上查看所有课程
HTML 表格标签 (<table>) 用于通过创建表格来结构化地表示数据。例如：
<table border="1" >
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>Harry Depp</td>
<td>28</td>
<td>Britain</td>
</tr>
<tr>
<td>John Smith</td>
<td>35</td>
<td>USA</td>
</tr>
<tr>
<td>Ram Krishna</td>
<td>19</td>
<td>Nepal</td>
</tr>
</table>浏览器输出
在上面的示例中，您可以看到我们使用了多个标签在 HTML 中创建了一个表格。
<table><tr><td><th>
HTML 中的表格标签 <table>
<table> 标签用于定义一个表格。例如：
<table>
….
<table>HTML 中的表格行 <tr>
<tr> 标签用于定义表格中的一行。例如：
<table>
<tr>
...
</tr>
</table>表格行可以包含表格标题 <th> 或表格数据 <td>。
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Prasanna</td>
<td>Nepal</td>
</tr>
<tr>
<td>Simon</td>
<td>USA</td>
</tr>在一个表格中，可以有任意数量的行。
HTML 中的表格标题 <th>
<th> 标签用于定义表格标题。它通常是表格的第一行。例如：
<table>
<tr>
<th>Item</th>
<th>Count</th>
</tr>
<tr>
<td>Mango</td>
<td>125</td>
</tr>
<tr>
<td>Orange</td>
<td>75</td>
</tr>
</table>浏览器输出
在上面的示例中，"Item" 和 "Count" 是表格标题，它们用于表示特定行中数据的类别。
这里，表格标题的样式是粗体和居中对齐的。这是因为 <th> 标签有一些默认样式。
HTML 中的表格单元格 <td>
<td> 标签用于定义表格单元格（数据）。表格单元格存储要在表格中显示的数据。例如：
<tr>
<td>Apple</td>
<td>Mango</td>
<td>Orange</td>
</tr>在上面的示例中，<td>Apple</td>、<td>Mango</td> 和 <td>Orange</td> 是表格单元格。
表格单元格通常位于表格行或表格标题内。
表格边框
请记住，在我们的第一个示例中我们使用了 border 属性。
<table border="1">
...
</table>在 HTML 中，border 属性用于为表格和所有单元格添加边框。
注意：表格可以有各种样式的边框，但对于更具体的边框，我们需要使用 CSS。
为了防止像上面示例中那样的双边框，我们可以设置表格的 border-collapse 属性。例如：
<table border="1" style="border-collapse: collapse;">
...
</table>
表格头部、主体和底部
HTML 表格可以分为三个部分：一个头部、一个主体和一个底部。
1. 表格头部
我们使用 <thead> 标签来添加表格头部。<thead> 标签必须在表格内任何其他标签之前。例如：
<table>
<thead>
<tr>
<th>Head1</th>
<th>Head2</th>
</tr>
</thead>
...
...
</table><thead> 的内容放置在表格的顶部，我们通常将包含表格标题的行放置在 <thead> 标签内。
2. 表格主体
我们使用 <tbody> 标签来添加表格主体。<tbody> 标签必须在 <thead> 之后且在表格内任何其他标签之前。例如：
<table>
<thead>
...
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
...
...
</table><tbody> 的内容放置在表格的中心部分，我们通常将包含要表示的内容的行放置在 <tbody> 中。
3. 表格底部
我们使用 <tfoot> 标签来添加表格底部。<tfoot> 标签必须在 <tbody> 之后且在表格内任何其他标签之前。例如：
<table>
<thead>
...
</thead>
<tbody>
,,,,
</tbody>
<tfoot>
<tr>
<td>foot 1</td>
<td>foot 2</td>
</tr>
</tfoot>
</table><tfoot> 的内容放置在表格的底部，我们通常将包含底部的行放置在 <tfoot> 中。
所有这些标签都必须放置在 <table> 标签内，并且必须至少包含一个 <tr>。例如：
示例：HTML 表格头部、主体和底部
<table>
<thead>
<tr>
<th>S.N</th>
<th>Item</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Apple</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>Mango</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>Orange</td>
<td>1</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>Total</td>
<td>5</td>
</tr>
</tfoot>
</table>浏览器输出
Colspan 和 Rowspan
Colspan
colspan 属性合并跨多个列的单元格。例如：
<table>
<tr>
<th>S.N</th>
<th>Item</th>
<th>Quantity</th>
</tr>
<tr>
<td>1</td>
<td>Apple</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>Mango</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>Orange</td>
<td>1</td>
</tr>
<tr>
<td colspan="2">Total</td>
<td>5</td>
</tr>
</table>浏览器输出
在上面的示例中，您可以看到最后一行只有 2 个单元格，其中一个单元格占据 2 列。
colspan 属性的值决定了单元格占据的列数。
Rowspan
rowspan 属性合并跨多个行的单元格。例如：
<table>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td rowspan="3">Mark Smith</td>
<td>English</td>
<td>67</td>
</tr>
<tr>
<td>Maths</td>
<td>82</td>
</tr>
<tr>
<td>Science</td>
<td>91</td>
</tr>
</table>浏览器输出
在上面的示例中，您可以看到第一列只有 2 个单元格，其中一个单元格占据 2 行。
rowspan 属性的值决定了单元格占据的行数。
关于 HTML 表格的须知事项
是的，我们可以同时使用 colspan 和 rowspan 来创建占据多行和多列的单元格。这是一个示例：
在本教程中，我们多次看到表格标题 <th> 用于顶部行。但我们也可以在列中使用 <th> 标签来创建垂直标题。例如：
<table>
<tr>
<th>Name</th>
<td>Sam</td>
<td>Steve</td>
<td>Peggy</td>
</tr>
<tr>
<th>Age</th>
<td>31</td>
<td>42</td>
<td>29</td>
</tr>
<tr>
<th>Gender</th>
<td>M</td>
<td>M</td>
<td>F</td>
</tr>
</table>浏览器输出
<caption> 元素作为表格的标题。它用于给出表格的简短描述。它显示在表格的顶部。
<caption> 标签必须是 <table> 元素的第一个子元素。
<table>
<caption>Employee Details</caption>
<tr>
<th>Name</th>
<td>Sam</td>
<td>Steve</td>
<td>Peggy</td>
</tr>
<tr>
<th>Age</th>
<td>31</td>
<td>42</td>
<td>29</td>
</tr>
<tr>
<th>Gender</th>
<td>M</td>
<td>M</td>
<td>F</td>
</tr>
</table>