表格

HTML 教程 · 第 8 章 · 6 次浏览

表格用 <table> 标签创建，用来展示有行列关系的数据（价格表、参数表、对比表）。HTML 表格由行和单元格组成，最基础的结构是：<table> 包 <tr>（行），行里放 <td>（单元格）。

基础结构与表头

<table>
    <tr>
        <th>课程</th>
        <th>难度</th>
    </tr>
    <tr>
        <td>HTML</td>
        <td>入门</td>
    </tr>
    <tr>
        <td>Python</td>
        <td>入门</td>
    </tr>
</table>

<th> 是表头单元格，默认加粗居中；<td> 是普通单元格。表头告诉读者这一列/行是什么数据，屏幕阅读器也靠它朗读表格。

表格的完整结构

复杂表格可以按语义分成三部分：<thead>（表头）、<tbody>（主体）、<tfoot>（表尾，如合计行）。表头单元格配合 scope 属性说明它管的是哪一列还是哪一行：

<table>
    <thead>
        <tr><th scope="col">月份</th><th scope="col">销量</th></tr>
    </thead>
    <tbody>
        <tr><td>1 月</td><td>120</td></tr>
        <tr><td>2 月</td><td>150</td></tr>
    </tbody>
    <tfoot>
        <tr><td>合计</td><td>270</td></tr>
    </tfoot>
</table>

合并单元格

跨列合并用 colspan，跨行合并用 rowspan。合并后要相应减少该行/列的其他单元格数量，否则表格会错位：

<tr>
    <td colspan="2">整行合并</td>
</tr>

表格的样式与注意点

默认表格没有边框，边框、间距、条纹全部用 CSS 控制（border-collapse: collapse 合并边框是第一步）；
表格只用于数据展示。拿表格做页面布局（整页套格子）是老式做法，已经淘汰，布局用 CSS Flex/Grid；
单元格内容有长文本时，给列设宽度或用 white-space: nowrap 控制换行，避免表格被撑乱；
移动端宽表格建议外层包一个可横向滚动的容器，而不是硬缩。

表格 vs 列表怎么选

多个数据项、每项有多列属性 → 表格；只有一组并列项 → 列表；术语+解释 → 自定义列表。选错语义不影响显示，但影响可访问性和 SEO 对内容的解读。

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表格示例</title>
    <style>
        table { border-collapse: collapse; width: 100%; max-width: 480px; }
        th, td { border: 1px solid #ccc; padding: 8px 12px; text-align: left; }
        th { background: #f1f8e9; }
    </style>
</head>
<body>
    <h2>课程价格表</h2>
    <table>
        <thead>
            <tr><th scope="col">课程</th><th scope="col">难度</th><th scope="col">价格</th></tr>
        </thead>
        <tbody>
            <tr><td>HTML 入门</td><td>入门</td><td>免费</td></tr>
            <tr><td>CSS 进阶</td><td>中级</td><td>¥99</td></tr>
            <tr><td colspan="2">JavaScript 全栈</td><td>¥299</td></tr>
        </tbody>
    </table>
</body>
</html>

📚 HTML 标签速查

常用条目速查，完整版见对应教程章节。可复制代码到在线运行中测试。

写法 / 语法	作用
`<h1>-<h6>`	标题，h1 最高，每页只用一个 h1
`<p>`	段落，自动加前后间距
`<a href="">`	链接，href 是目标地址
`<img src="" alt="">`	图片，src 地址，alt 替代文字
`<ul> / <li>`	无序列表
`<ol> / <li>`	有序列表，数字编号
`<dl> / <dt> / <dd>`	自定义列表：术语 + 说明
`<table> / <tr> / <td> / <th>`	表格：行 / 单元格 / 表头
`<form action="" method="">`	表单，action 提交地址，method 提交方式
`<input type="">`	输入控件，type 有 text/password/email/number 等
`<textarea>`	多行文本输入
`<select> / <option>`	下拉框及选项
`<button type="submit">`	按钮，submit 提交表单
`<strong> / <em>`	加粗（重要）/ 斜体（强调）
`<div> / <span>`	区块容器 / 行内容器
`<header> <nav> <main>`	语义化：页眉 / 导航 / 主体
`<section> <article> <aside>`	语义化：分节 / 独立内容 / 侧栏
`<footer>`	页脚：版权、备案
`<video> / <audio>`	HTML5 视频 / 音频，加 controls 显示控制条
`<iframe src="">`	嵌入其他网页
`<!-- 注释 -->`	HTML 注释，不显示在页面
`<br> / <hr>`	换行 / 水平分割线
`<pre>`	保留空格和换行，原样显示
`<blockquote> / <q>`	块级引用 / 行内引用
`<figure> / <figcaption>`	图文组合及说明