设置每个table的样式,比如class=tab1,class=tab2,然后在样式表设置
.tab1 td{这里为tab1的样式}
.tab2 td{这里为tab2的样式}
而不用一个个去设置td class="xx"了 毕竟比较麻烦。
如下代码:
<table >
<td class="style1" >内容</td >
</table >
<table >
<td class="style2" >内容</td >
</table >
在CSS中定义:
.style1 {
}
.style2 (
}
或者是给TD加上class,相同样式用的相同Class,不同样式用的不同Class
内嵌标签: thead (可选)、 tbody (可选)、td、tr、colgroup 、 caption (可选)
属性:align ,bgcolor ,bordercolor,border ,cellpadding ,cellspacing ,frame ,width ,summary ,rules 。
现在的table的属性基本已经过时,都使用css进行设置table样式。
1.border-collapsecollapse | separate
collapse : border线合并
separate: border线分隔,默认属性
ps: 使用collapse 此属性时, border-spacing 、empty-cells和 border-radius 失效 ,无任何效果。
2.border-spacinghorizontal <length >| vertical <length >
3.vertical-align 设置内容与图片位置
4.table-layout auto | fixed
ps: auto 表格布局自适应宽度
fixed 表格布局固定宽度,文字内容等可能会溢出
5.caption-side 针对于caption标签的css样式设置
6.empty-cells 但单元格内无内容时候,可设置隐藏
参考:
https://www.sitepoint.com/community/t/table-format-using-css-border-issue/36882/3
https://css-tricks.com/almanac/properties/b/border-collapse/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Table
你编写表格的时候可以这样:把第一列变成th
,这样就可以方便的控制了。
例如:三行三列的表格可以这样写:
<table>
<tbody>
<tr>
<th></th>
<td></td><td></td>
</tr>
<tr>
<th></th>
<td></td><td></td>
</tr>
<tr>
<th></th>
<td></td><td></td>
</tr>
</tbody>
</table>
或者你可以分别设置不同的类来达到控制的目的。
CSS可以这样写
th{
width:100px
}
td{
width:200px
}