HTML - 6、表格<table>
表格 是一种用于组织和显示数据的结构化元素，非常适合展示表格化的数据，如报表、时间表、比较表等。
表格
<table> 是一种用于组织和显示数据的结构化元素，非常适合展示表格化的数据，如报表、时间表、比较表等。以下是关于 HTML 表格的详细解析和示例代码。HTML 表格的基本结构
HTML 表格由
<table> 标签定义，通常包含以下部分：-
<thead>：表头部分，包含表格的标题行。 -
<tbody>：表格主体部分，包含表格的数据行。 -
<tfoot>：表格脚注部分，通常用于总结或说明。 -
<tr>：表格行，用于定义表格的一行。 -
<th>：表头单元格，用于定义表头内容。 -
<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 表格示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML 表格示例</title>
<style>
table {
width: 100%;
border-collapse: collapse; /* 合并边框 */
}
th, td {
border: 1px solid #ddd; /* 单元格边框 */
padding: 8px; /* 单元格内边距 */
text-align: center; /* 文本居中 */
}
th {
background-color: #f2f2f2; /* 表头背景颜色 */
}
</style>
</head>
<body>
<h2>学生信息表</h2>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>18</td>
<td>1班</td>
</tr>
<tr>
<td>李四</td>
<td>19</td>
<td>2班</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>3班</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总计</td>
<td>57</td>
<td>3个班级</td>
</tr>
</tfoot>
</table>
</body>
</html>解析
-
<table>：-
定义一个表格。
-
可以通过 CSS 设置表格的样式，如宽度、边框、背景颜色等。
-
-
<thead>：-
定义表格的表头部分。
-
通常包含一行或多行表头单元格（
<th>）。
-
-
<tbody>：-
定义表格的主体部分。
-
包含表格的数据行（
<tr>），每行包含多个数据单元格（<td>）。
-
-
<tfoot>：-
定义表格的脚注部分。
-
通常用于总结或说明，包含一行或多行单元格（
<td>）。
-
-
<tr>：-
定义表格的一行。
-
每行可以包含多个单元格（
<th>或<td>）。
-
-
<th>：-
定义表头单元格。
-
通常用于表格的标题行，内容会加粗并居中显示。
-
-
<td>：-
定义表格数据单元格。
-
用于存储表格的具体数据。
-
常用属性
-
colspan：-
定义单元格跨越的列数。
-
示例：
<td colspan="2">跨越两列</td>
-
-
rowspan：-
定义单元格跨越的行数。
-
示例：
<td rowspan="2">跨越两行</td>
-
-
border：-
定义表格的边框。
-
示例：
<table border="1">（不推荐，建议使用 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>：定义一个表格。 -
<thead>：定义表头部分。 -
<tbody>：定义表格主体部分。 -
<tfoot>：定义表格脚注部分。 -
<tr>：定义表格的一行。 -
<th>：定义表头单元格。 -
<td>：定义表格数据单元格。 -
常用属性：
colspan（跨越列数）、rowspan（跨越行数）、border（边框）。
浙公网安备 33010602011771号