首页 › 业界区 › 业界 ›HTML - 6、表格<table>

HTML - 6、表格<table>

剩鹄逅 前天 19:20

表格 [table] 是一种用于组织和显示数据的结构化元素，非常适合展示表格化的数据，如报表、时间表、比较表等。以下是关于 HTML 表格的详细解析和示例代码。HTML 表格的基本结构

HTML 表格由 [table] 标签定义，通常包含以下部分：

：表头部分，包含表格的标题行。
：表格主体部分，包含表格的数据行。
：表格脚注部分，通常用于总结或说明。
[tr]：表格行，用于定义表格的一行。
：表头单元格，用于定义表头内容。
[td]：表格数据单元格，用于定义表格的数据内容。

基本语法

<table>
<thead>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
</tr>
<tr>
<td>数据4</td>
<td>数据5</td>
<td>数据6</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结1</td>
<td>总结2</td>
<td>总结3</td>
</tr>
</tfoot>
</table>

复制代码

示例代码

完整的 HTML 表格示例：

复制代码

解析

[table]：
- 定义一个表格。
- 可以通过 CSS 设置表格的样式，如宽度、边框、背景颜色等。
：
- 定义表格的表头部分。
- 通常包含一行或多行表头单元格（）。
：
- 定义表格的主体部分。
- 包含表格的数据行（[tr]），每行包含多个数据单元格（[td]）。
：
- 定义表格的脚注部分。
- 通常用于总结或说明，包含一行或多行单元格（[td]）。
[tr]：
- 定义表格的一行。
- 每行可以包含多个单元格（或 [td]）。
：
- 定义表头单元格。
- 通常用于表格的标题行，内容会加粗并居中显示。
[td]：
- 定义表格数据单元格。
- 用于存储表格的具体数据。

常用属性

colspan：
- 定义单元格跨越的列数。
- 示例：[td=2,1]跨越两列[/td]
rowspan：
- 定义单元格跨越的行数。
- 示例：[td=1,2]跨越两行[/td]
border：
- 定义表格的边框。
- 示例：[table]（不推荐，建议使用 CSS 设置边框）

示例：使用 colspan 和 rowspan

<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>1班</td>
</tr>
<tr>
<td>李四</td>
<td>19</td>
<td>2班</td>
</tr>
<tr>
<td rowspan="2">王五</td>
<td>20</td>
<td>3班</td>
</tr>
<tr>
<td>21</td>
<td colspan="2">4班</td>
</tr>
</table>

复制代码

总结

[table]：定义一个表格。
：定义表头部分。
：定义表格主体部分。
：定义表格脚注部分。
[tr]：定义表格的一行。
：定义表头单元格。
[td]：定义表格数据单元格。
常用属性：colspan（跨越列数）、rowspan（跨越行数）、border（边框）。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

回复

使用道具举报

相关推荐

0

粉丝关注

6

主题发布

板块介绍填写区域，请于后台编辑

财富榜{圆}