對(duì)table設(shè)置css樣式邊框,分為幾種情況:1、只對(duì)table設(shè)置邊框;2、對(duì)td設(shè)置邊框;3、對(duì)table和td技巧性設(shè)置表格邊框;4、對(duì)table和td設(shè)置背景,實(shí)現(xiàn)完美表格邊框。
創(chuàng)新互聯(lián)主營貴池網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都App定制開發(fā),貴池h5小程序制作搭建,貴池網(wǎng)站營銷推廣歡迎貴池等地區(qū)企業(yè)咨詢
代碼如下:
1、只對(duì)table設(shè)置邊框;
style .table-a table{border:1px solid #F00} /* css注釋:只對(duì)table標(biāo)簽設(shè)置紅色邊框樣式 */ /style2、對(duì)td設(shè)置邊框;
style .table-b table td{border:1px solid #F00} /* css注釋:只對(duì)table td標(biāo)簽設(shè)置紅色邊框樣式 */ /style3、對(duì)table和td技巧性設(shè)置表格邊框;
style .table-c table{border-right:1px solid #F00;border-bottom:1px solid #F00} .table-c table td{border-left:1px solid #F00;border-top:1px solid #F00} /* css 注釋: 只對(duì)table td設(shè)置左與上邊框; 對(duì)table設(shè)置右與下邊框; 為了便于截圖,我們將css 注釋說明換行排版 */ /style4、對(duì)table和td設(shè)置背景,實(shí)現(xiàn)完美表格邊框。
style .table-d table{ background:#F00} .table-d table td{ background:#FFF} /* css注釋:設(shè)置table背景為紅色,td背景為白色 */ /style
總結(jié):
以上四種方式實(shí)現(xiàn)table表格邊框樣式方法,推薦使用第三和第四種方法來解決表格邊框樣式。希望此html table邊框布局方法對(duì)大家有幫助并能掌握,平時(shí)需要時(shí)靈活運(yùn)用。
下面來個(gè)例子,你可以復(fù)制到你的編輯器里修改測(cè)試
style?type="text/css"
table.gridtable?{}{
font-family:?verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width:?1px;
border-color:?#666666;
border-collapse:?collapse;
}
table.gridtable?th?{}{
border-width:?1px;
padding:?8px;
border-style:?solid;
border-color:?#666666;
background-color:?#dedede;
}
table.gridtable?td?{}{
border-width:?1px;
padding:?8px;
border-style:?solid;
border-color:?#666666;
background-color:?#ffffff;
}
/style
!--?Table?goes?in?the?document?BODY?--
table?class="gridtable"
tr
thInfo?Header?1/ththInfo?Header?2/ththInfo?Header?3/th
/tr
tr
tdText?1A/tdtdText?1B/tdtdText?1C/td
/tr
tr
tdText?2A/tdtdText?2B/tdtdText?2C/td
/tr
/table
CSS(層疊樣式表)級(jí)聯(lián)樣式表是一種用來表現(xiàn)HTML(標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用)或XML(標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集)等文件樣式的計(jì)算機(jī)語言。
1、首先打開vscode編輯器,新建一個(gè)html文件,定義一個(gè)兩行兩列的表格,在瀏覽器打開的效果。
2、然后給表格添加邊框,這里給table標(biāo)簽和td標(biāo)簽都設(shè)置邊框,不過兩個(gè)標(biāo)簽的邊框顏色值不一樣。
3、最后可以用width屬性給表格設(shè)置寬度,用height屬性設(shè)置單元格的高度,設(shè)置好后可以在瀏覽器看到效果。
指定的table為細(xì)邊框,把table放在div中即可。
一、首先新建表格,代碼如下:
table width="500" border="1"? trtdnbsp;/tdtdnbsp;/tdtdnbsp;/td/tr trtdnbsp;/tdtdnbsp;/tdtdnbsp;/td /trtr? tdnbsp;/td tdnbsp;/tdtdnbsp;/td/tr/table。
二、在table里加css樣式,代碼如下:
table width="500" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"? tr tdnbsp;/tdtdnbsp;/td tdnbsp;/td /tr tr tdnbsp;/tdtdnbsp;/tdtdnbsp;/td/tr trtdnbsp;/tdtdnbsp;/tdtdnbsp;/td/table。
三、單元格邊距(表格填充)(cellpadding) -- 代表單元格外面的一個(gè)距離,用于隔開單元格與單元格空間。單元格間距(表格間距)(cellspacing) -- 代表表格邊框與單元格補(bǔ)白的距離,也是單元格補(bǔ)白之間的距離,border-collapse:collapse表示表格的兩邊框合并為一條即可。
這是設(shè)置的邊框,將邊框的樣式設(shè)置為 dashed就行,舉個(gè)例子:
table{
width: 320px;
height: 320px;
}
tr td{
border:1px dashed #333;
}
可以這樣寫