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

目标:总结表格标签及标签属性,设置表格样式

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,1td>
            <td>1,2td>
            <td>1,3td>
        tr>
        <tr>
            <td>2,1td>
            <td>2,2td>
            <td>2,3td>
        tr>
        tbody>

        <tfoot>
        <tr>
            <td>脚1td>
            <td>脚2td>
            <td>脚3td>
        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标签只能设置高度,无法设置宽度


<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>APth>
            <th>ADth>
            <th>ADCth>
        tr>
        thead>
        <tbody>
        <tr>
            <td>不祥之刃td>
            <td>荆棘之兴td>
            <td>卡牌大师td>
        tr>
        <tr>
            <td>暗夜猎手td>
            <td>小黄毛EZtd>
            <td>男枪td>
        tr>
        tbody>
        <tfoot>
        <tr>
            <td>GGtd>
            <td>GGtd>
            <td>GGtd>
        tr>
        tfoot>
    table>
body>
html>

你可能感兴趣的:(HTML5标签及标签属性)