重学 HTML —— 表格

「这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战」

table 和 form 是管理后台常用的组件，后台开发技术已经非常成熟了，我们现在有非常多快速搭建管理后台的技术，因此在实际开发中我们直接使用原生 table 和 form 的场景不多，但是我们使用的各种 table 和 form 组件库的背后都是由原生的 html 支持的，这一节我们先来看 table 部分。

表格相关的最外层元素就是 table 元素，它是最外层的容器，具体的内容由其子元素决定，table 的子元素可以包含下面几部分内容：

• 一个可选的  元素

• 零个或多个的  元素

• 一个可选的  元素

• 下列任意一个:

  • 零个或多个 
  • 零个或多个 

• 一个可选的  元素

接下来我们按照从上至下的顺序看一下这几部分：

caption 和之前见过的 figcaption 是类似的效果，caption 是表格专用的，为表格添加描述信息。

colgroup 与其子元素 col 定义表格中的列，可以为特定的列添加样式，col 的 span 属性描述占用实际列的数量。

thead、tbody、tfoot 分别为表头、表内容、表尾部，子元素为多个 tr，代表每一行，tr 下面可以有 th 或 td。

th 定义表头信息，td 定义数据信息，这两个是列表的实际内容，th 和 td 有下面几个有效属性：

• colspan：每个单元格的列数。
• rowspan：每个单元格的行数。
• headers：id 的列表，可以与 th 做一一对应。
• scope （td 的 scope 已废弃，只有 th 有效）：定义与 th 相关联的单元格。

上面的是一些 table 相关的属性解释，实际上是比较抽象的，可以尝试一下效果：

<table>
	<tr>
		<td>1.1</td>
		<td>1.2</td>
		<td>1.3</td>
	</tr>

	<tr>
		<td colspan='2'>2.1+2.2</td>
		<td rowspan='2'>2.3+3.3</td>
	</tr>

	<tr>
		<td>3.1</td>
		<td>3.2</td>
	</tr>
</table>

这部分内容在实际开发中使用的也并不多，这里有一个不太常用的知识，table 的 display 属性是什么？

在 css 中最常见的属性是 block、inline、inline-block、flex、grid 这些，但是 table 不同，table 标签的 display 属性值为 table，与之相关联的还有一系列属性值，这些只与 table 相关，详细可以参考 MDN 的描述。这些属性现在虽然没有太多用处，不过在浏览器兼容性差的时候，可以利用 table 来快速实现一些布局效果，我之前的文章中有提到过。

作为管理后台的必要元素，表格组件的功能和性能往往是选择组件库的一个重要参考，表格处理中也会有一些类似虚拟化的性能提升手段，虽然我们没有直接操作底层的 table 元素，但是简单了解一下终究没有坏处。