html表格标签使用与注意事项

最新推荐文章于 2024-07-21 17:58:14 发布

挽风^

最新推荐文章于 2024-07-21 17:58:14 发布

阅读量570

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_50526087/article/details/123520136

版权

表格的基本标签

场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表。

基本标签：

标签名	作用
table	表格的整体，用于包含多个tr
tr	表格的每行，用于包含多个td
td	表格单元格，用于包含内容

注意事项：嵌套关系为：table > tr > td

例如：

代码如下：

<body>
    <!-- 表格标签嵌套关系：table（表格整体，用于包裹多个tr） > tr（表格每行，用于包裹多个td） > td（表格每列，包裹内容）  -->
    <table border="1" height="300" width="400">
        <tr>
            <td>姓名</td>
            <td>成绩</td>
            <td>评语</td>
        </tr>
        <tr>
            <td>小哥哥</td>
            <td>100分</td>
            <td>小哥哥真帅气</td>
        </tr>
        <tr>
            <td>小姐姐</td>
            <td>100分</td>
            <td>小姐姐真漂亮</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>郎才女貌</td>
            <td>郎才女貌</td>
        </tr>
    </table>

其中表格相关属性（常见）👇

表格标题和表头单元格标签

在表格中表示整体大标题和一列小标题

TIP：

• caption标签书写在table标签内部

• th标签书写在tr标签内部（用于替换td标签）

例子：

代码如下：

 <table border="1" height="200" width="400">
        <strong>
            <caption>学生成绩单</caption>
        </strong>
        <!-- caption 为表格标题  写在table中 -->
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
                <!-- th为表头单元格标签 默认为居中对齐并加粗 th可代替td写在tr中 -->
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小哥哥</td>
                <td>100</td>
                <td>小哥哥很帅</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td>100</td>
                <td>小哥哥很帅</td>
            </tr>
        </tfoot>
    </table>

其中：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部）

thead --》 tbody --》 tfoot

（表格结构标签写在table标签内部、表格标签内部用于包裹tr标签），使语义更加清晰。

合并单元格

合并单元格步骤： 1. 明确合并哪几个单元格

2. 通过左上原则，确定保留谁删除谁 • 上下合并→只保留最上的，删除其他 • 左右合并→只保留最左的，删除其他

3. 给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）

例子：

代码如下：

<table border="1" height="200" width="400">
        <strong>
            <caption>学生成绩单</caption>
        </strong>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>

        <tr>
            <td>小哥哥</td>
            <!-- 保留 并且说明合并哪一行/列 -->
            <td rowspan="2">100</td>
            <td>小哥哥很帅</td>
        </tr>

        <tr>
            <td>小哥哥</td>
            <!-- 这个被删除了 因为需要合并 -->
            <!-- <td>100</td> -->
            <td>小哥哥很帅</td>
        </tr>

        <tr>
            <td>小哥哥</td>
            <td colspan="2">100</td>
            <!-- 删除下面这个 来实现跨列合并 -->
            <!-- <td>小哥哥很帅</td> -->

        </tr>

    </table>

Tip：

• 只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）

谢谢您的观看，感谢！

挽风^

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html表格标签使用与注意事项

表格的基本标签场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表。基本标签：标签名作用 table 表格的整体，用于包含多个tr tr 表格的每行，用于包含多个td td 表格单元格，用于包含内容注意事项：嵌套关系为：table > tr > td例如：代码如下：<body> <!-- 表格标签嵌套关系：table（表格整体，用于包裹多个tr） > tr.
复制链接

扫一扫