table tr td /td/tr 1.把td改成td style="border:1px solid red"border后面的第一個(gè)參數(shù)是邊框像素,第二個(gè)是邊框樣式(solid:實(shí)線),第三個(gè)是邊框的顏色2.通過外部css改變td{ border:1px solid red;} 如果你是要在網(wǎng)頁中動(dòng)態(tài)的改變邊框樣式的話,一般配合javascript來實(shí)現(xiàn)(比如開始邊框顏色為黑色,把鼠標(biāo)放上去變?yōu)榧t色)

成都創(chuàng)新互聯(lián)于2013年成立,先為石鼓等服務(wù)建站,石鼓等地企業(yè),進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為石鼓企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
邊框樣式可以
CSS 參考手冊(cè)
定義和用法border 簡(jiǎn)寫屬性在一個(gè)聲明設(shè)置所有的邊框?qū)傩浴?/p>
可以按順序設(shè)置如下屬性:
border-widthborder-styleborder-color如果不設(shè)置其中的某個(gè)值,也不會(huì)出問題,比如 border:solid #ff0000; 也是允許的。
默認(rèn)值:not specified繼承性:no版本:CSS1JavaScript 語法:object.style.border="3px solid blue"實(shí)例
設(shè)置4 個(gè)邊框的樣式:
p { border:5px solid red; }TIY
瀏覽器支持所有瀏覽器都支持 border 屬性。
注釋:任何的版本的 Internet Explorer (包括 IE8)都不支持屬性值 "inherit"。
可能的值值描述border-width規(guī)定邊框的寬度。參閱:border-width 中可能的值。border-style規(guī)定邊框的樣式。參閱:border-style 中可能的值。border-color規(guī)定邊框的顏色。參閱:border-color 中可能的值。
用CSS設(shè)置html中的表格邊框樣式用border設(shè)置就可以。
方法如下:
1、參考代碼
body?
table
tr
td胖迪/td
td胖迪/td
td胖迪/td
/tr
tr
td胖迪/td
td胖迪/td
td胖迪/td
/tr
tr
td胖迪/td
td胖迪/td
td胖迪/td
/tr
/table
style
table?{
'設(shè)置邊框1像素?實(shí)線?紅色
border:1px?solid?red;
}
td{
'設(shè)置邊框1像素?實(shí)線?黃色
border:?1px?solid?yellow;
}
/style
/body
為table的tr、td標(biāo)簽設(shè)置邊框?qū)傩约纯?/p>
選擇器可以使用:
table tr, table td
邊框?qū)傩悦麨椋篵order
style
table?td?{
border:?1px?solid?#000;
}
/style
用CSS設(shè)置表格的每個(gè)單元格,邊框?yàn)?像素的黑色實(shí)線
link href="y5u.css" rel="stylesheet" type="text/css" //headbodytable width="363"trtd width="355"img src="模板.jpg" width="333" height="24" //li/td/trtrtdlia href="#"/a北約希望與俄羅斯建立“具有建設(shè)性的”關(guān)系/li/td/trtrtdlia href="#"/a北約希望與俄羅斯建立“具有建設(shè)性的”關(guān)系/li/td/trtrtdlia href="#"/a北約希望與俄羅斯建立“具有建設(shè)性的”關(guān)系/li/td/trtrtdlia href="#"/a北約希望與俄羅斯建立“具有建設(shè)性的”關(guān)系/li/td/trtrtdlia href="#"/a北約希望與俄羅斯建立“具有建設(shè)性的”關(guān)系/li/td/trtrtdlia href="#"/a北約希望與俄羅斯建立“具有建設(shè)性的”關(guān)系/li/td/tr/table/body/html編輯對(duì)應(yīng)的CSS代碼,在表格加邊框顏色(黑色)。
border-collapse 屬性:設(shè)置表格的邊框是否被合并為一個(gè)單一的邊框,即:用于設(shè)置表格邊框是合并顯示還是分開顯示。
border-collapse 屬性設(shè)置表格的邊框是否被合并為一個(gè)單一的邊框。它有以下幾個(gè)值:
-- separate 默認(rèn)值:邊框會(huì)被分開,不會(huì)忽略 border-spacing 和 empty-cells 屬性;
-- collapse:如果可能,邊框會(huì)合并為一個(gè)單一的邊框。會(huì)忽略 border-spacing 和 empty-cells 屬性;
-- inherit:規(guī)定應(yīng)該從父元素繼承 border-collapse 屬性的值。
雙線表格邊框的實(shí)現(xiàn)
html代碼:
table
tr
td內(nèi)容/tdtd內(nèi)容/tdtd內(nèi)容/tdtd內(nèi)容/tdtd內(nèi)容/td
/tr
tr
td內(nèi)容/tdtd內(nèi)容/tdtd內(nèi)容/tdtd內(nèi)容/tdtd內(nèi)容/td
/tr
tr
td內(nèi)容/tdtd內(nèi)容/tdtd內(nèi)容/tdtd內(nèi)容/tdtd內(nèi)容/td
/tr
tr
td內(nèi)容/tdtd內(nèi)容/tdtd內(nèi)容/tdtd內(nèi)容/tdtd內(nèi)容/td
/tr
/table
css代碼:
table,table td{
text-align: center;
border: 1px solid #000;
border-collapse:separate;
}
table td{
padding: 10px 30px;
}
表格邊框的雙線樣式其實(shí)很簡(jiǎn)單,只要同時(shí)設(shè)置表格外邊框和table里的每個(gè)單元格的邊框,就可以實(shí)現(xiàn)了。
因?yàn)閟eparate是默認(rèn)值,就算是不設(shè)置border-collapse:separate;表格也會(huì)呈現(xiàn)雙線效果。
我們主要是來看看border-collapse屬性合并邊框,實(shí)現(xiàn)單線邊框的方法,html代碼一樣,只需設(shè)置css樣式:
css代碼:
table,table tr td {
border: 1px solid #000;
text-align: center;
border-collapse: collapse;
}table tr td {
padding: 10px 30px;
}
單線邊框的實(shí)現(xiàn)也很簡(jiǎn)單,它是在雙線樣式的基礎(chǔ)上,設(shè)置border-collapse: collapse;
把相鄰的兩個(gè)table邊框合并成一個(gè),使得相鄰的兩條線并在一起,邊框就以單線的形式顯示了。
總結(jié):表格邊框的無論是單線邊框樣式,還是雙線邊框樣式都在前端頁面中應(yīng)用廣泛,大家可以根據(jù)自己
本文標(biāo)題:css創(chuàng)建表格邊框樣式,css設(shè)置表格邊框樣式
文章路徑:http://chinadenli.net/article31/dsejepd.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供商城網(wǎng)站、網(wǎng)站導(dǎo)航、企業(yè)網(wǎng)站制作、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)站內(nèi)鏈
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)