HTML 表格

HTML 表格标签以表格（行 x 列）的形式呈现表格数据。一行中有不同的列，每个单元格可以包含任何类型的内容。

我们可以使用 <table> 元素，以及 <tr>、<td> 和 <th> 标签分别标记行、数据和标题来创建这样的表格。表格单元格不仅可以包含简单的文本，还可以包含图片、列表、超链接，甚至另一个表格。

每个表格包含

• 行：使用 <tr> (table row) 定义。
• 标题：使用 <th> (table header) 定义。
• 数据：使用 <td> (table data cell) 定义。

虽然网页最初使用表格来构建（例如页眉、导航栏和页脚），但现在不鼓励使用表格来表示表格数据，而使用 <div> 和 CSS 来安排布局。

HTML 表格标签

HTML 表格示例

让我们看一个 HTML 表格标签的例子。其输出显示在上面。

输出

说明

这是一个简单的表格，包含一个标题和四行数据，每行包含学生的姓名、姓氏和分数。

带边框的 HTML 表格

添加边框有两种方法

1) HTML border 属性（已弃用）

说明

border 属性指定了表格本身的边框，但已被淘汰。建议使用 CSS，它提供了更多的控制并且是更新的。

2) CSS Border 属性（推荐）

说明

最好使用 CSS 来处理边框，而且它也很灵活。可以轻松地格式化表格的单个或多个组件。

合并边框

示例

说明

border-collapse 属性可以将相邻的边框合并，以获得更整洁的外观。

带单元格内边距的 HTML 表格

在单元格内添加间距

示例

说明

内边距在单元格内创建了更多空间，使其更易于阅读并提供视觉间距。

您可以将其与边框进一步结合。

示例

说明

使用内边距、边框和合并布局，可以呈现一个排版精美的表格。

HTML 表格宽度

表格宽度可以通过以下方式定义

示例

说明

为了使表格具有响应性，表格宽度应设置为 100%，以便在有额外空间时可以相应地拉伸。

带 colspan 的 HTML 表格

colspan 属性使一个单元格跨越多个列。

示例

输出

说明

第二个标题跨越两列，并将它们合并到一个标记为“手机号”的标题下。

带 rowspan 的 HTML 表格

rowspan 属性使一个单元格跨越多个行。

示例

输出

说明

手机号码标题通过占用两行来隔离两个手机号码。

带标题的 HTML 表格

在 <table> 标签后直接使用 <caption> 标签。

示例

输出

说明

表格标题包含在表格中使用 <caption> 标签，通常位于表格上方。

样式化奇偶行

说明

使用 :nth-child 的应用使表格行的区分更加明显，这对于大型表格很重要。

其他表格样式选项

左对齐标题

说明

标题默认居中。此规则确保标题和左对齐的数据单元格的一致性。

边框间距

说明

在单元格之间（但不包含在单元格内）引入间距，以获得比边框合并更宽松的外观。

背景颜色

说明

这为背景颜色增加了视觉对比，有助于提高可读性或加强品牌形象。

嵌套表格

HTML 允许将一个表嵌套在另一个表内，以实现高级布局。

说明

当在单个结构内需要更复杂、分层的数据结构时，会应用嵌套表。

支持的浏览器

元素	Chrome	IE	Firefox	Opera	Safari
<table>	是的	是的	是的	是的	是的
<thead>	是的	是的	是的	是的	是的
<tbody>	是的	是的	是的	是的	是的
<tfoot>	是的	是的	是的	是的	是的
<col>	是的	是的	是的	是的	是的
<caption>	是的	是的	是的	是的	是的

结论

HTML 表格是呈现行和列结构化数据的关键元素，它使用了 <table>、<tr>、<th> 和 <td> 等各种标签。尽管它们以前曾与布局结合使用，但现在应仅在需要表格信息的场合使用，并借助 CSS 来实现设计。colspan、rowspan、<caption> 和嵌入式表格的便利性增加了灵活性。

CSS 还可以通过边框、内边距、颜色和隔行着色等样式元素使内容更易于阅读。像 <thead>、<tbody> 和 <tfoot> 这样的语义标签的可访问性增强了可用性。表格在所有主流浏览器上都得到了全面支持，因此，只要正确使用和设置样式，它们在显示数据方面就是稳定有效的。