园龄：3年1个月粉丝：0 关注：1

📂前端 / HTML

🔖HTML 前端

2025-02-18 10:21阅读: 17评论: 0推荐: 0

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（边框）。

上一篇卢沟桥的烽火与佟麟阁将军💖

下一篇HTML - 7、表单<table> 基本结构

本文作者：别晃我的可乐

本文链接：https://www.cnblogs.com/lwehne/p/18721383

posted @ 2025-02-18 10:21 别晃我的可乐阅读(17) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

别晃我的可乐

HTML - 6、表格<table>

HTML 表格的基本结构

基本语法

示例代码

解析

常用属性

示例：使用 `colspan` 和 `rowspan`

总结

公告

最新随笔

我的标签

随笔分类

随笔档案

	<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>

	<!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 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>

别晃我的可乐

HTML - 6、表格<table>

HTML 表格的基本结构

基本语法

示例代码

解析

常用属性

示例：使用 colspan 和 rowspan

总结

公告

最新随笔

我的标签

随笔分类

随笔档案

示例：使用 `colspan` 和 `rowspan`