表格标签、标签属性、样式属性总结

最新推荐文章于 2023-02-15 19:51:27 发布

MRname

最新推荐文章于 2023-02-15 19:51:27 发布

阅读量2.9k

点赞数 3

分类专栏： HTML5标签及标签属性文章标签： html5表格标签

本文链接：https://blog.csdn.net/MRname/article/details/50754581

版权

HTML5标签及标签属性专栏收录该内容

2 篇文章 0 订阅

订阅专栏

目标：总结表格标签及标签属性，设置表格样式

PS：表单的用途是收集用户数据，而表格的用途则是以网格的形式向用户显示二维数据

一、表格标签

理论上只需要table、tr、td就可以达到目的，但是为了结构更加清晰明确，达到语义化的效果，需要配合thead、th、tbody、tfoot、caption，为了更好的控制表格还需要colgroup、col

1、表格的组成结构：tabel（标题+头+主体+脚）
1)、标题 caption
2)、头：thead+(tr+th) 或 tr+td，只能有一个thead，一个thead中只能有一个tr
3)、主体：tbody+(tr+td) 或 tr+td，可以有多个tbody，一个tbody中可以有多个tr
4)、脚：tfoot+(tr+td) 或 tr+td，只能有一个tfoot，一个tfoot中只能有一个tr

     <table>
        <caption>我的表格</caption>
        <thead>
        <tr>
            <th>第一列</th>
            <th>第二列</th>
            <th>第三列</th>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td>1，1</td>
            <td>1，2</td>
            <td>1，3</td>
        </tr>
        <tr>
            <td>2，1</td>
            <td>2，2</td>
            <td>2，3</td>
        </tr>
        </tbody>

        <tfoot>
        <tr>
            <td>脚1</td>
            <td>脚2</td>
            <td>脚3</td>
        </tr>
        </tfoot>
    </table>

2、colgroup和col，以行为单位去控制表格直接通过tr标签就可以很方便的达到目的，如果以列为单位可以使用colgroup标签和col标签

3、html5对之前各个版本的表格标签属性大部分不再支持，其中很多属性都可以用样式属性去实现，表格标签、标签属性只负责结构

4、一些常用的设置
1、跨行给单元格(td、th)设置 rowspan=”3”
2、跨列给单元格(td、th)设置 colspan=”2”

二、表格table独有的的样式属性
1、设置单元格是否独立存在的样式属性 border-collapse
1.1）、属性值：separate( 默认值) 单元格独立存在
1.2）、属性值：collapse 相邻单元格边框合并，table的另一个样式border-spacing无效

2、设置相邻单元格之间的距离 border-spacing，属性值为css长度值

3、设置表格标题的位置 caption-side，属性值top( 默认值)、bottom–>标题分别在上面、下面

4、空单元格是否显示边框 empty-cells，属性值show( 默认值)、hide –>分别是显示、不显示

5、设置当内容过长时，是否拉伸单元格 table-layout
5.1）、auto 默认值，内容过长时，拉伸整个单元格
5.3）、fixed 内容过长时，不拉伸整个单元格
PS：当设置了表格的宽度时，设置拉伸，内容过长时会先挤压其他有空余空间的单元格，然后在拉伸
PS：当设置了表格的宽度时，设置不拉伸，内容过长时会自动换行，就算给单元格、表格设置了高度也一样

PS：除了上述的表格独立样式属性，其他样式属性和其他标签差不多
PS：tr标签只能设置高度，无法设置宽度

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表格</title>
    <style>
        #myT{border-collapse: collapse;}
        th,td{border: 1px solid darkcyan;padding: 10px;}
        tr:hover{background-color: #00aaff;cursor: pointer;}
    </style>
</head>
<body>
    <table id="myT">
        <caption>我喜欢的英雄</caption>
        <thead>
        <tr>
            <th>AP</th>
            <th>AD</th>
            <th>ADC</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>不祥之刃</td>
            <td>荆棘之兴</td>
            <td>卡牌大师</td>
        </tr>
        <tr>
            <td>暗夜猎手</td>
            <td>小黄毛EZ</td>
            <td>男枪</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td>GG</td>
            <td>GG</td>
            <td>GG</td>
        </tr>
        </tfoot>
    </table>
</body>
</html>

MRname

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
表格标签、标签属性、样式属性总结

目标：总结表格标签及标签属性，设置表格样式PS：表单的用途是收集用户数据，而表格的用途则是以网格的形式向用户显示二维数据一、表格标签理论上只需要table、tr、td就可以达到目的，但是为了结构更加清晰明确，达到语义化的效果，需要配合thead、th、tbody、tfoot、caption，为了更好的控制表格还需要colgroup、col 1、表格的组成
复制链接

扫一扫

专栏目录