写在上面
在本文中，我们将学习 HTML 中的表格以及如何使用 CSS 处理表格样式。 本文内容如右图所示：
有哪些形式
现实生活中，表单是一种比较常见的方式，比如申请表、简历等。在HTML页面中还提供了一组表格相关的元素来实现HTML页面中表格的效果。
有哪些形式
表是一组由行和列组成的结构化数据集。 可以将不同类型的数据整合到一张表中，以展示不同类型数据之间的某种关系，如右图所示：
如上所述，表中有一些概念，如下：
哪些是表格元素
为了在HTML页面中实现表格的功效，HTML提供了一系列的表格元素。 根据表格中的一些概念，HTML页面中提供的表格元素如下：
以下示例代码显示了 HTML 页面中的基本表格：
<table>
<tr><th>姓名</th><th>区域</th></tr>
<tr><td>梵云飞</td><td>西西域</td></tr>
<tr><td>欢都落兰</td><td>南国</td></tr>
</table>
上述代码的CSS样式如下：
td, th, table { border: 1px solid #284; }
代码运行结果如右图所示：
Tips：上面的代码前面会依次解释
表的基本结构
HTML页面提供了一组表格元素，其最基本的结构如下面的示例代码所示：
<table>
<tr>
<td>单元格</td>
</tr>
</table>
表元素最基本的结构是：
元素：将 HTML 页面中的表格表示为表格的容器。
元素：表示 HTML 页面中表格的行。 一个表可以有一行或多行。
元素：代表 HTML 页面表格中的一行的单元格。 一行可以有一个单元格或多个单元格。
常见表应用案例中表的基本结构分析如右图所示：
标题单元格
HTML 中的元素用于定义一组单元格的标题。 该元素的用法与元素一致，在元素中定义。
以下示例代码演示了该元素的用法：
<table>
<tr>
<th>姓名</th>
<th>区域</th>
</tr>
<tr>
<td>梵云飞</td>
<td>西西域</td>
</tr>
<tr>
<td>欢都落兰</td>
<td>南国</td>
</tr>
</table>
代码运行结果如右图所示：
如上图所示，我们可以发现，浏览器运行时css3 表格样式，元素中的文本内容会被手动加粗并居中。
元素的scope属性用于定义与标题单元格关联的单元格，它是一个枚举类型，具体值如下：
以下示例代码演示了元素范围属性的用法：
<table>
<tr>
<th>姓名</th>
<th>区域</th>
</tr>
<tr>
<th scope="row">梵云飞</th>
<td>西西域</td>
</tr>
<tr>
<th scope="row">欢都落兰</th>
<td>南国</td>
</tr>
</table>
代码运行结果如右图所示：
值得注意的是，即使单元格中没有内容，仍然需要定义一个元素或元素来指示空单元格的存在。
表标题
HTML 中的元素用于定义 HTML 页面中表格的标题。 该元素通常作为该元素的第一个子元素出现，并且会显示在表格内容的顶部，但会水平居中显示。
以下示例代码演示了该元素的用法：
<table>
<caption>
狐妖小红娘
</caption>
<tr>
<th>姓名</th>
<th>区域</th>
</tr>
<tr>
<td>梵云飞</td>
<td>西西域</td>
</tr>
<tr>
<td>欢都落兰</td>
<td>南国</td>
</tr>
</table>
代码运行结果如右图所示：
行与列
HTML页面中的表格不仅是常规的，还可以实现跨行或跨列的效果。 具体实现方法是通过以下属性来实现：
下面的示例代码演示了交叉行的效果：
<table>
<tr>
<th colspan="2">狐妖小红娘</th>
</tr>
<tr>
<th rowspan="4">四大妖皇</th>
<td>涂山红红</td>
</tr>
<tr>
<td>梵云飞</td>
</tr>
<tr>
<td>石宽</td>
</tr>
<tr>
<td>欢都擎天</td>
</tr>
</table>
代码运行结果如右图所示：
完整的表结构
HTML中表格的完整结构还包括以下三个元素
下面的示例代码演示了元素、元素、元素的用法：
<table>
<thead>
<tr>
<th colspan="2">狐妖小红娘</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="4">四大妖皇</th>
<td>涂山红红</td>
</tr>
<tr>
<td>梵云飞</td>
</tr>
<tr>
<td>石宽</td>
</tr>
<tr>
<td>欢都擎天</td>
</tr>
</tbody>
</table>
如上所示，元素、元素和元素不会使屏幕阅读器用户更容易访问表格，也不会导致任何视觉变化。 然而，他们将在应用样式和布局方面发挥作用，以更好地将 CSS 应用于表格。
表格样式操作表布局
CSS中的table-layout属性用于实现表格中单元格的布局，以及行列的估计。 该属性有以下2个值：
以上两个值形成的结果可能会有所不同css3 表格样式，但两者最大的区别主要在于速度上。 与fixed相比，速度较快，而auto的速度稍慢。 原因如下：
表标题
CSS中的caption-side属性用于设置HTML页面中表格元素的显示位置。 该属性需要与 属性结合使用。 该属性的值有以下2个值：
下面的示例代码展示了当caption-side属性值为bottom时的情况：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>caption-side</title>
<style>
td,
th,
table {
border: 1px solid #284;
}
caption {
caption-side: bottom;
}
</style>
</head>
<body>
<table>
<caption>
狐妖小红娘
</caption>
<tr>
<th>姓名</th>
<th>区域</th>
</tr>
<tr>
<td>梵云飞</td>
<td>西西域</td>
</tr>
<tr>
<td>欢都落兰</td>
<td>南国</td>
</tr>
</table>
</body>
</html>
代码运行结果如右图所示：
处理空单元格
CSS中的empty-cells属性用于设置是否显示或隐藏HTML页面表格中没有可见内容的单元格的边框和背景。 该属性的值有以下两种：
以下示例代码显示了empty-cells属性的用法：
table {
empty-cells: show;
}
两者的区别如右图所示：
单元格边框
CSS中的border-collapse属性用于设置HTML页面中表格的边框是分离还是合并。 该属性有以下两个值：
当border-calllapse属性值是分离的时候，称为分离(_separated)_模式，这是HTML表格的传统模式。 在这些模式中，相邻单元格具有不同的边界。 边框之间的距离是通过 CSS 的 border-spacing 属性设置的。
CSS中的border-spacing属性用于设置HTML页面中表格中相邻单元格边框之间的距离。 该属性的取值设置有以下两种形式：
下面的示例代码展示了当 border-calllapse 属性的值为 Collapse 时 border-spacing 属性的使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>边框处理</title>
<style>
td,
th,
table {
border: 1px solid #284;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>区域</th>
</tr>
<tr>
<td>梵云飞</td>
<td>西西域</td>
</tr>
<tr>
<td>欢都落兰</td>
<td>南国</td>
</tr>
</table>
</body>
</html>
代码运行结果如右图所示：
总结
预览：在下一篇文章中，我们将学习CSS中的结构伪类选择器
