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

来源：互联网发布：simulink怎么增加端口编辑：程序博客网时间：2024/05/28 19:23

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

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>

1 0