HTML 表格
- HTML表格基本结构:使用
<table>
标签创建表格,表格内部包含行<tr>
,行内部包含表格数据<td>
和表格标题<th>
。 - 表格附加标签和功能:可以使用
<thead>
、<tbody>
、<tfoot>
标签分别定义表格的头部、主体和尾部,以及使用colspan
和rowspan
属性合并多个单元格。 - 表格的其他特性:表格可以包含
<caption>
作为标题,可以同时使用colspan
和rowspan
进行更复杂的布局,以及使用<th>
创建垂直表头。
HTML 表格标签(<table>
)用于通过创建表格来以结构化方式表示数据。例如,
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>国家</th>
</tr>
<tr>
<td>Harry Depp</td>
<td>28</td>
<td>英国</td>
</tr>
<tr>
<td>John Smith</td>
<td>35</td>
<td>美国</td>
</tr>
<tr>
<td>Ram Krishna</td>
<td>19</td>
<td>尼泊尔</td>
</tr>
</table>
浏览器输出
在上面的示例中,您可以看到我们使用了多个标签来在 HTML 中创建表格。
<table>
<tr>
<td>
<th>
HTML 中的表格标签 <table>
<table>
标签用于定义表格。例如,
<table>
….
<table></table>
</table>
HTML 中的表格行 <tr>
<tr>
标签用于定义表格中的一行。例如,
<table>
<tr>
...
</tr>
</table>
表格行可以包含表格标题 <th>
或表格数据 <td>
。
<tr>
<th>姓名</th>
<th>国家</th>
</tr>
<tr>
<td>Prasanna</td>
<td>尼泊尔</td>
</tr>
<tr>
<td>Simon</td>
<td>美国</td>
</tr>
在表格中,可以有任意数量的行。
HTML 中的表格标题 <th>
<th>
标签用于定义表格表头。它通常是表格的顶部行。例如,
<table>
<tr>
<th>物品</th>
<th>数量</th>
</tr>
<tr>
<td>芒果</td>
<td>125</td>
</tr>
<tr>
<td>橙子</td>
<td>75</td>
</tr>
</table>
浏览器输出
在上述示例中,Item 和 Count 是表格标题,它们用于表示特定行中的数据类别。
这里,表格标题的样式是加粗和居中对齐的。这是因为 <th>
标签有一些默认的样式设置。
HTML 中的表格单元格 <td>
<td>
标签用于定义表格单元(数据)。表格单元格用于存储要在表格中显示的数据。例如,
<tr>
<td>苹果</td>
<td>芒果</td>
<td>橙子</td>
</tr>
在上述示例中,<td>苹果</td>
、<td>芒果</td>
和 <td>橙子</td>
是表格单元格。
表格单元格通常位于表格行或表格标题内。
表格边框
请记住,我们在第一个示例中使用了边框属性。
<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>序号</th>
<th>物品</th>
</tr>
</thead>
... ...
</table>
<thead>
的内容放置在表格的顶部,我们通常将带有表格标题的行放在 <thead>
标签内。
2. 表格主体
我们使用 <tbody>
标签添加表格主体。<tbody>
标签必须在 <thead>
之后并且在表格内的其他任何标签之前。例如,
<table>
<thead>
...
</thead>
<tbody>
<tr>
<td>单元格 1</td>
<td>单元格 2</td>
</tr>
</tbody>
... ...
</table>