HTML5-表格元素

关注

原创最新推荐文章于 2026-06-03 12:58:09 发布 675 阅读 AI 写同款· GEO 优化 ›

HTML5结构化元素与列表表格创建实践本篇博客将深入探讨HTML5中结构化元素的使用，以及如何在文档中创建列表和表格。我们将通过具体实例来了解如何有效地利用标题、导航、主要内容区域、文章、页脚等元素来构建网页结构，并学习如何通过CSS为这些元素添加样式以提高可读性。此外，我们还将了解无序列表和有序列表的创建方法，以及如何在表格中跨越行和列，设置列宽等。阅读详情

 <html lang="zh-cn">
 <head>
    <meta charset="utf-8">
    <title>表格元素</title>
 </head>
 <body>
 <!-- border设置线格宽度 width设置表格宽度 -->
 <table border="1" style="width:200px">
    <!-- tr包裹一行 td表示单元格 th代表是表头单元格 -->
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>婚否</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>未婚</td>
    </tr>
 </table>
<br>
 <table border="1" style="width:300px">
    <!-- rowspan归并几行为1列 -->
    <tr>
        <td rowspan="4">单位人员</td>
    </tr>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>婚否</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>未婚</td>
    </tr>
    <!-- colspan归并几列为1行 -->
    <tr>
        <td colspan="4">统计:共两人</td>
    </tr>

 </table>
<br>
<table border="1" style="width:200px">
    <!-- 设置表格名称 -->
    <caption>这是一个表格</caption>
    <!-- thead 包裹表头 tbody包裹表主题 tfoot包裹表脚 不怕位置混乱 -->
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>婚否</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>未婚</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>未婚</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">统计:2人</td>
        </tr>>
    </tfoot>
 </table>
<br>
<table border="1" style="width:200px">
    <!-- 第一种设置第二列为红色 -->
    <colgroup style="background:white"></colgroup>
    <colgroup style="background:red" span="1"></colgroup>
    <!-- 第二种设置第三列为黄色 更为灵活 -->
<!--    <colgroup>
        <col>
        <col>
        <col style="background:yellow"> 
    </colgroup> -->
    <!-- 设置表格标题 -->
    <caption>这是一个表格</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>婚否</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>未婚</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>未婚</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">统计:2人</td>
        </tr>>
    </tfoot>
 </table>
 </body>
 </html>