当前位置：首页 > news >正文

HTML5表格语法格式详解

news 来源：原创 2025/5/14 12:07:30

HTML5 表格的基本结构

HTML5 表格由 <table> 标签定义，表格中的每一行由 <tr> 标签定义，表头单元格由 <th> 标签定义，数据单元格由 <td> 标签定义。表格的基本结构如下：

<table><tr><th>表头1</th><th>表头2</th></tr><tr><td>数据1</td><td>数据2</td></tr>
</table>

表格的标题

可以使用 <caption> 标签为表格添加标题，标题通常显示在表格的上方。

<table><caption>表格标题</caption><tr><th>表头1</th><th>表头2</th></tr><tr><td>数据1</td><td>数据2</td></tr>
</table>

表格的表头和表体

可以使用 <thead>、<tbody> 和 <tfoot> 标签分别定义表格的表头、表体和表脚部分。

<table><thead><tr><th>表头1</th><th>表头2</th></tr></thead><tbody><tr><td>数据1</td><td>数据2</td></tr></tbody><tfoot><tr><td>表脚1</td><td>表脚2</td></tr></tfoot>
</table>

合并单元格

可以通过 colspan 和 rowspan 属性合并单元格。colspan 用于合并列，rowspan 用于合并行。

<table><tr><th colspan="2">合并的表头</th></tr><tr><td rowspan="2">合并的行</td><td>数据1</td></tr><tr><td>数据2</td></tr>
</table>

表格的样式和边框

可以通过 CSS 为表格添加样式和边框。使用 border 属性可以设置表格边框，但推荐使用 CSS 进行样式控制。

<style>table {border-collapse: collapse;width: 100%;}th, td {border: 1px solid black;padding: 8px;text-align: left;}
</style>
<table><tr><th>表头1</th><th>表头2</th></tr><tr><td>数据1</td><td>数据2</td></tr>
</table>

表格的响应式设计

为了使表格在移动设备上具有良好的显示效果，可以使用 overflow-x: auto; 来添加水平滚动条。

<div style="overflow-x: auto;"><table><tr><th>表头1</th><th>表头2</th><th>表头3</th><th>表头4</th></tr><tr><td>数据1</td><td>数据2</td><td>数据3</td><td>数据4</td></tr></table>
</div>