表格标签及属性高级

表格标签及属性高级

1、单元格间距：(给table{ }加)

border-spacing:5px;

2、合并相邻单元格边框：(给table{ }加)

border-collapse:separate/collapse;
separate：默认边框分开 collapse：边框合并

3、无内容时单元格的设置：(给table{ } 加)

empty-cells:show/hide;
show：显示 hide：隐藏

4、单元格的宽高：(给table{ }加)

table-layout:auto/fixed;
auto:宽度由内容而定 fixed:固定不变（加快表格的运行速度）

5、表格标题：（在< table>< /table>中间加）

<caption>标题内容</caption>
标题位置：caption-side:top/right/bottom/left（兼容性）
<th>表格列标题、和td是同级标签

6、 行列属性

colspan="value"合并列
rowspan="value"合并行
rules="groups/ rows / cols / all / none"添加组分隔线

属性说明： 
	rows：位于行之间的线条 
	cols：位于列之间的线条 
	all：位于行和列之间的线条
	none：没有线条 
	groups：位于行组和列组之间的线条

7、数据列分组

<colgroup span="2"> </colgroup>
<colgroup span="3"> </colgroup>

colgroup必须配table里的rules=groups使用
span 默认值为1

8、数据行分组

<thead>表头</thead>
<tbody>表体</tbody>
<tfoot>表尾</tfoot>

注：一个Table中，只能包含一个thead,一个tfoot,但可包含多个tbody

9、隔行变色的设置

双数行： tr:nth-child(2n){ }
单数行： tr:nth-child(2n+1){ }

设置单数(odd)单元格的样式和双数(even)单元格的样式

总结

以上是对表格标签及属性高级的小总结，后期将继续更新html基础知识点
文章为原创内容，要是遇到有不合适的地方欢迎赐教🙌