HTML 表格
在本教程中，您将学习如何使用 HTML 表格显示表格数据。
在 HTML 中创建表格
HTML 表格允许您将数据排列成行和列。 它们通常用于显示表格数据，如产品列表、客户详细信息、财务报告等。
您可以使用 <table> 元素创建表。 在 <table> 元素内，您可以使用 <tr> 元素来创建行，而要在行内创建列，您可以使用 <td> 元素。 您还可以使用 <th> 元素将一个单元格定义为一组表格单元格的标题。
以下示例演示了表的最基本结构。
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Peter Parker</td>
<td>16</td>
</tr>
<tr>
<td>2</td>
<td>Clark Kent</td>
<td>34</td>
</tr>
</table>默认情况下，表格没有任何边框。 您可以使用 CSS border 属性为表格添加边框。 此外，默认情况下，表格单元格的大小刚好足以容纳内容。 要在表格单元格的内容周围添加更多空间，您可以使用 CSS padding 属性。
以下样式规则为表格添加 1 像素的边框，并为其单元格添加 10 像素的填充。
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}默认情况下，表格周围的边框和它们的单元格是相互分离的。 但是您可以通过使用 <table> 元素上的 border-collapse 属性将它们合并为一个。
此外，<th> 元素内的文本以粗体显示，默认情况下在单元格中水平居中对齐。 要更改默认对齐方式，您可以使用 CSS text-align 属性。
以下样式规则折叠表格边框并将表格标题文本左对齐。
table {
border-collapse: collapse;
}
th {
text-align: left;
}请查看 CSS 表格 上的教程，详细了解如何设置 HTML 表格样式。
注意： 早期版本中用于样式化表格外观的 <table> 元素的大部分属性（例如 border, cellpadding, cellspacing, width, align 等）在 HTML5 中已被删除，因此请避免使用它们。 改用 style HTML tables 来抄送。
跨越多行多列
跨越允许您将表格的行和列扩展到多个其他行和列。
通常，一个表格单元格不能进入另一个表格单元格下方或上方的空间。 但是，您可以使用 rowspan 或 colspan 属性来跨越表中的多行或多列。
让我们试试下面的例子来了解 colspan 的基本工作原理:
<table>
<tr>
<th>Name</th>
<th colspan="2">Phone</th>
</tr>
<tr>
<td>John Carter</td>
<td>5550192</td>
<td>5550152</td>
</tr>
</table>同样，您可以使用 rowspan 属性来创建一个跨越多行的单元格。 让我们尝试一个示例来了解行跨越的基本工作原理:
<table>
<tr>
<th>Name:</th>
<td>John Carter</td>
</tr>
<tr>
<th rowspan="2">Phone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>为表格添加标题
您可以使用 <caption> 元素为表格指定标题（或标题）。
<caption> 元素必须直接放在开头的 <table> 标记之后。 默认情况下，标题显示在表格的顶部，但您可以使用 CSS caption-side 属性更改其位置。
以下示例显示了如何在表格中使用此元素。
<table>
<caption>Users Info</caption>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Peter Parker</td>
<td>16</td>
</tr>
<tr>
<td>2</td>
<td>Clark Kent</td>
<td>34</td>
</tr>
</table>定义表头、正文和页脚
HTML 提供了一系列标签 <thead>, <tbody>, 和 <tfoot>，通过分别定义页眉、正文和页脚区域，帮助您创建更结构化的表格。
下面的示例演示了这些元素的使用。
<table>
<thead>
<tr>
<th>Items</th>
<th>Expenditure</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stationary</td>
<td>2,000</td>
</tr>
<tr>
<td>Furniture</td>
<td>10,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td>12,000</td>
</tr>
</tfoot>
</table>注意： 在 HTML5 中，<tfoot> 元素可以放在 <tbody> 和 <tr> 元素之前或之后，但必须出现在任何 <caption>、<colgroup> 和 <thead> 元素之后。
提示：不要使用表格来创建网页布局。 表格布局的渲染速度较慢，并且很难维护。 它应该只用于显示表格数据。