HTML - 你不知道的 table 用法

最后更新：
阅读次数： 次
许可协议： 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议

用于组织表格的标签有：table（声明表格）、caption（声明整个表格的标题）、thead（声明表格标题）、tbody（声明表格表体）、tfoot（声明表格表尾）、tr（声明表格行）、th（存放表格列标题）、td（存放表格数据）。

其实只用 table、tr、td 这三个标签足以绘出一个表格。

更语义化的表格

使用 thead、tbody、tfoot 来更好地组织表格元素。

// 移除 `td` 或 `th` 元素之间的间隙
table {
  border-collapse: collapse;
}

See the Pen table-main-structure by percy (@percy507) on CodePen.

合并单元格

td、th 标签的两个重要属性：colspan 和 rowspan。他们接受任何大于等于 2 的正整数。如果一个 td 元素的 colspan 值为 2（<td colspan="2">），它将仍然是单独的单元格，但它会在一行中水平的占据两个单元格的空间。rowspan 也一样，但它作用于垂直方向。

See the Pen table-colspan-rowspan by percy (@percy507) on CodePen.

两轴表格

写法：省略 thead、tbody 等标签的使用，第一个 tr 标签全为 th，之后的每一个 tr 的第一个元素节点都设置为 th。

See the Pen table-two-shaft by percy (@percy507) on CodePen.

斑马条纹表格

使用 css 伪类选择器 :nth-child(…) 来实现这个效果。

tbody tr:nth-child(odd) {
  background: #ccc;
}

See the Pen table-horse by percy (@percy507) on CodePen.

CodePen 上有个各色表格的收集，点这里 Terrific Tables

HTMLTableElement API

下面是一些与 Table 有关的 API，没准有用。

  • table.insertRow(index)： 在指定位置插入一个新行（tr）
  • table.deleteRow(index)： 在指定位置删除一行（tr）
  • tr.insertCell()： 在指定位置插入一个单元格（td）
  • tr.deleteCell()： 在指定位置删除一个单元格（td）
  • createCaption()： 插入标题
  • deleteCaption()： 删除标题
  • createTHead()： 插入表头
  • deleteTHead()： 删除表头

参考资料