HTML表格

最新推荐文章于 2025-06-08 21:13:28 发布

原创最新推荐文章于 2025-06-08 21:13:28 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了HTML表格的基本结构及常用属性，包括如何使用thead、tbody和tfoot进行表格划分，以及如何设置表格样式和数据合并等技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<table>                               <!-- table表示表格 -->
    <td>                              <!-- td表示行 -->
        <tr>...</tr>                  <!-- tr表示列单元格-->
        <tr>...</tr>
    </td>
    <td>
        <tr>...</tr>
        <tr>...</tr>
    </td>
</table>
<!-- 以上是一个两行两列的表格-->

表格在网页中的应用非常广泛，比如购物车、统计的信息。。。。

在实际使用中，表格往往很复杂，并且表格是作为一个整体加载的。必须等整个表格都加载完毕了才会显示，所以用户体验不好，于是出现了表结构的划分：

表格划分三部分：表头、主体、脚注（三部分在代码上的前后顺序不影响表格的展示效果）

·thead 表格的头（放标题之类的内容）

·tbody 表格的主体（放表格的主体数据）

·tfoot 表格的脚（放表格的脚注）

table表格的属性：

 


下面是代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <!--  表格的删除行删除列-->
    <table border="6" width="500px" bgcolor="#f2f2f2" cellspacing="0" cellpadding="5px" align="center">
        <caption>近三年程序员工资</caption>    <!-- 表格标题，居中显示-->
       <thead>
        <tr bgcolor="#20b2aa">
            <th rowspan="2">城市</th>  <!-- th表头单元格 居中和加粗的效果 -->
            <th colspan="2">2016</th>  <!--  colspan 跨列合并单元格，rowspan 跨行合并单元格-->

            <th rowspan="2">2017</th>
            <th rowspan="2">2018</th>
        </tr>
        <tr bgcolor="#20b2aa">

            <th>上半年</th>
            <th>下半年</th>

        </tr>
       </thead>
       <tbody align="center" valign="center">
        <tr>
            <td  bgcolor="#ffd700" align="center">北京</td>
            <td>20000</td>
            <td>20000</td>
            <td>20000</td>
            <td>20000</td>
        </tr>
        <tr>
            <td bgcolor="#ffd700" align="center">上海</td>
            <td>20000</td>
            <td>20000</td>
            <td>20000</td>
            <td>20000</td>
        </tr>
       </tbody>
       <tfoot>
        <tr align="center">
            <td bgcolor="#ffd700">合计</td>
            <td>20000</td>
            <td>20000</td>
            <td>20000</td>
            <td>20000</td>
        </tr>
       </tfoot>
    </table>
</body>
</html>