什么是 HTML 表格？
HTML 表格由<table>标签来定义，是一种用于展示结构化数据的标记语言元素。
HTML 表格允许你以行和列的形式来排列信息，就像我们在 Excel 中看到的表格一样。例如：漂亮的表格
HTML 表格结构
HTML 表格由<table>标签开始，以</table>标签结束。
在<table>标签内部，使用<tr>标签来定义表格的行，<td>标签来定义表格的单元格。
<table border="1">
<caption>简单表格示例</caption>
<thead>
<tr>
<th>列标题1</th>
<th>列标题2</th>
<th>列标题3</th>
</tr>
</thead>
<tbody>
<tr>
<td>行1，列1</td>
<td>行1，列2</td>
<td>行1，列3</td>
</tr>
<tr>
<td>行2，列1</td>
<td>行2，列2</td>
<td>行2，列3</td>
</tr>
</tbody>
</table>以上的表格实例代码中，有多种标签共同组成：
- <table>标签：定义一个表格。
- <caption>标签：定义表格加标题，<caption>标签要放在<table>标签内部的第一行。
- <thead>标签：定义表格标题部分，在<thead>中，使用<th>元素定义列的标题。
- <tbody>标签：定义表格主体部分，在<tbody>中，使用<tr>元素定义行，在每行中使用<td>元素定义单元格数据。
- <tr>标签：定义表格的一行，有几个<tr>标签就有几行。
- <th>标签：使用<th>标签来定义表格的表头，表头通常位于表格的第一行，用来描述每列的内容。
- <td>标签：定义表格的一个单元格，一个<tr>标签内有几个<td>标签，该行就有几个单元格。
HTML 表格 caption 标题
使用<caption>标签可以为表格添加标题，<caption>标签要放在<table>标签内部的第一行。
<table border="1">
<caption>简单表格示例</caption>
<tr>
<td>行1，列1</td>
<td>行1，列2</td>
<td>行1，列3</td>
</tr>
<tr>
<td>行2，列1</td>
<td>行2，列2</td>
<td>行2，列3</td>
</tr>
</table>HTML 表格 th 标头
使用<th>标签来定义表格的表头，表头通常位于表格的第一行，用来描述每列的内容。
<table border="1">
<tr>
<td>姓名</td>
<td>语文成绩</td>
<td>数学成绩</td>
</tr>
<tr>
<td>张艳</td>
<td>85</td>
<td>90</td>
</tr>
<tr>
<td>王雪</td>
<td>92</td>
<td>88</td>
</tr>
</table>HTML 表格 colspan 属性
使用<colspan>属性用于合并同一行中的单元格，指定该单元格跨越的列数。
<table border="1">
<tr>
<td colspan="2">合并两列</td>
</tr>
<tr>
<td>第一列</td>
<td>第二列</td>
</tr>
</table>HTML 表格 rowspan 属性
使用<rowspan>属性用于合并同一列中的单元格，指定该单元格跨越的行数。
<table border="1">
<tr>
<td rowspan="2">合并两行</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第二列</td>
</tr>
</table>
评论区 0
发表评论
教程介绍
HTML 超文本标记语言，一种用于创建网页的标准标记语言，在浏览器上运行和解析。
60
章节
251
阅读
0
评论