表格标签及相关属性的介绍

最新推荐文章于 2024-06-19 10:23:02 发布

Q _Q

最新推荐文章于 2024-06-19 10:23:02 发布

阅读量3.8k

点赞数 3

分类专栏： HTML5 文章标签： html5 html

本文链接：https://blog.csdn.net/weixin_54021642/article/details/124358903

版权

HTML5 专栏收录该内容

14 篇文章 3 订阅

订阅专栏

1 表格基本标签介绍

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

代码：

<table>

<tr>

</tr>

</table>

table 是表格整体，可用于包裹多个tr

tr 表格每行，可用于包裹td

td 表格单元格，可用于包裹内容

例题：

    <p>成绩表1</p>
    <table>
        <tr>
            <td>学号</td>
            <td>姓名</td>
            <td>成绩</td>
        </tr>
        <tr>
            <td>001</td>
            <td>张三</td>
            <td>100</td>
        </tr>
        <tr>
            <td>002</td>
            <td>李四</td>
            <td>90</td>
        </tr>
        <tr>
            <td>003</td>
            <td>王五</td>
            <td>60</td>
        </tr>
    </table>

效果图：

2 表格相关属性

使用场景：设置表格基本展示效果

常见相关属性：

border 边框宽度

width 表格宽度

height 表格高度

注意：实际开发时针对样式效果推荐用CSS设置

例题：

    <p>成绩表2</p>
    <table border="1" width="200" height="100">
        <tr>
            <td>学号</td>
            <td>姓名</td>
            <td>成绩</td>
        </tr>
        <tr>
            <td>001</td>
            <td>张三</td>
            <td>100</td>
        </tr>
        <tr>
            <td>002</td>
            <td>李四</td>
            <td>90</td>
        </tr>
        <tr>
            <td>003</td>
            <td>王五</td>
            <td>60</td>
        </tr>
    </table>

效果图：

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

使用场景：在表格中表示整体大标题和一系列小标题

代码：

<caption>表格大标题</caption>

<th>表头单元格</th>

说明：

1 caption标签表示表格整体大标题，默认在表格整体顶部居中位置显示

2 th标签表示一系列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

注意：

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

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

例题：

    <p>成绩表3</p>
    <table border="1" width="200" height="100">
        <caption>学生成绩表</caption>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
        <tr>
            <td>001</td>
            <td>张三</td>
            <td>100</td>
        </tr>
        <tr>
            <td>002</td>
            <td>李四</td>
            <td>90</td>
        </tr>
        <tr>
            <td>003</td>
            <td>王五</td>
            <td>60</td>
        </tr>
    </table>

效果图：

4 表格的结构标签（了解）

使用场景：让表格内部结构分组，突出表格的不同部分（头部、主体、尾部），使语义更加清晰

代码：

注意：

1 表格结构标签内部用于包裹tr标签

2 表格的结构标签可以省略

例题：

    <p>成绩表4</p>
    <table border="1" width="200" height="100">
        <caption>学生成绩表</caption>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>成绩</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>001</td>
                <td>张三</td>
                <td>100</td>
            </tr>
            <tr>
                <td>002</td>
                <td>李四</td>
                <td>90</td>
            </tr>
            <tr>
                <td>003</td>
                <td>王五</td>
                <td>60</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="2">整体成绩不错</td>
            </tr>
        </tfoot>
    </table>

效果图：

5 合并单元格

使用场景：将水平或垂直多个单元格合并成一个单元格

代码：

rowspan="合并单元格的个数" 合并行（上下合并）

colspan="合并单元格的个数" 合并列（左右合并）

说明：

1 合并行（上下合并）保留最上行单元格，其他删除

2 合并列（左右合并）保留最左列单元格，其他删除

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

例题：

    <p>表5-1</p>
    <table border="1" width="300" height="100">
        <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>总结</td>
                <td>理想男友</td>
                <td>理想男友</td>
            </tr>
        </tfoot>
    </table>

    <p>表5-2</p>
    <table border="1" width="300" height="100">
        <caption>个人评语</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>评语</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>彭于晏</td>
                <td>男</td>
                <td rowspan="2">我==彭于晏</td>
            </tr>
            <tr>
                <td>我</td>
                <td>男</td>

            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="2">理想男友</td>
            </tr>
        </tfoot>
    </table>

效果图：