获取input file的文件 HTML translate 属性 HTML picture 元素使用教程 HTML a标签 HTML列表 HTML标题 HTML段落 HTML img标签 HTML表格

HTML表格

栏目： html 发布时间：2024-12-13

HTML表格是网页设计中非常常见的元素，用于展示结构化数据，如日历、员工信息、产品列表等。下面是一个简单的HTML表格教程，帮助你理解如何创建和自定义表格。

1. 基本结构

HTML表格由<table>标签定义，内部包含行（<tr>）、单元格（<td>和<th>）。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML表格教程</title>
    <style>
        table {
            width: 50%;
            border-collapse: collapse; /* 合并边框 */
            margin: 20px 0;
            font-size: 18px;
            text-align: left; /* 文字左对齐 */
            margin: 0 auto; /* 表格居中 */
        }
        th, td {
            padding: 12px;
            border: 1px solid #ddd; /* 边框颜色 */
        }
        th {
            background-color: #f2f2f2; /* 表头背景色 */
        }
    </style>
</head>
<body>

<h2>简单的HTML表格</h2>

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>28</td>
        <td>工程师</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>34</td>
        <td>设计师</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>45</td>
        <td>教师</td>
    </tr>
</table>

</body>
</html>

2. 表格元素详解

<table>: 定义整个表格。
<tr>: 定义表格中的一行。
<th>: 定义表头单元格，内容默认加粗并居中。
<td>: 定义表格中的标准单元格。

3. 添加样式

你可以使用CSS来美化表格。上面的示例中，我们使用了内联样式（<style>标签）来设置表格的宽度、边框、填充、背景色等。

4. 合并单元格

跨行合并: 使用rowspan属性。例如，<td rowspan="2">表示该单元格将占据两行。
跨列合并: 使用colspan属性。例如，<td colspan="2">表示该单元格将占据两列。

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
        <th>备注</th>
    </tr>
    <tr>
        <td rowspan="2">张三</td>
        <td>28</td>
        <td>工程师</td>
        <td>优秀员工</td>
    </tr>
    <tr>
        <td colspan="3">详细信息</td>
        <td>爱好广泛</td>
    </tr>
</table>

5. 表格分组

<thead>: 定义表格的头部（通常包含<th>元素）。
<tbody>: 定义表格的主体（包含<td>元素）。
<tfoot>: 定义表格的尾部（通常用于总结数据）。

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>职业</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>28</td>
            <td>工程师</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>34</td>
            <td>设计师</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">总计人数: 2</td>
        </tr>
    </tfoot>
</table>

本文地址：https://www.tides.cn/p_html-table