table学习笔记

最新推荐文章于 2021-07-02 09:34:08 发布

伪伪的喵喵

最新推荐文章于 2021-07-02 09:34:08 发布

阅读量379

点赞数

分类专栏：学习笔记文章标签： html

本文链接：https://blog.csdn.net/qq_32392057/article/details/60784912

版权

学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

`table`学习笔记

学习《HTML权威指南》学习笔记

表格元素

基本的表格元素

table

局部属性

boder;

内容

capion colgroup thead tfoot tr th td

习惯样式

    table {
        display: table; border-collapse:separate;
        border-spacing: 2px; boder-color:grey;
    }

tr

HTML表格基于行而不是列，每列必须分别标记

局部属性

内容

一个或多个td或th

习惯样式

    tr {
        display:table-row; vertical-align:inherit;
        boder-coler:inherit;
    }

td

局部属性

colspan rowspan headers

内容

流元素

习惯样式

    td {
        display: table-cell; vertical-align:inherit;
    }

添加表头单元格

th

表示表头的单元格，用来区分数据和对数据的说明

局部属性

colspan rowspan scope headers

内容

短语内容

习惯样式

    th {
        display:table-cell; vertical-align:inherit;
        font-weight:blod; text-align: centrt;
    }

添加表格结构

tbody

表示构成主体的全体行，不包括表头行和表脚行

局部属性

内容

tr

习惯样式

    tbody {
        display:table-row-gorup; vertical-align: middle;
        boder-color:inherit;
    }

thead

如果没有thead元素，所有tr都被视为表格主体的一部分

局部属性

内容

tr

习惯样式

    tbody {
        display:table-header-gorup; vertical-align: middle;
        boder-color:inherit;
    }

tfoot

形成表脚的行，可以放tbody之前之后

局部属性

内容

tr

习惯样式

    tbody {
        display:table-footer-gorup; vertical-align: middle;
        boder-color:inherit;
    }

不规则表格

colspan rowspan

rolspan和rowspan设置的值都必须是整数
html <th colspan="3"></th>

headers

td, th 都定义了headers属性，提可以提供残章辅助技术和屏幕阅读器简化表格的处理

属性

一个或多个th单元格的id属性值

样例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
    <style>
        thead th, tfoot th {
            text-align:left; background: grey; color: white;
        }
        tbody th {
            text-align: right; background: lightgrey; color: grey;
        }
        thead [colspan], tfoot [colspan] {
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <td id="rank">rank</td>
            <td id="name">name</td>
            <td id="color"rcoloe</td>
            <td id="size" colspan="2">size & vote</td>
        </thead>
        <tbody>
            <th id="first" headers="rank">favorite</th>
            <td headers="name first"> Apple</td>
            <td headers="color first">Green</td>
            <td headers="size first">midium</td>
            <td headers="size first">500</td>
        </tbody>
        <tbody>
            <th id="second" headers="rank">favorite</th>
            <td headers="name second">Orangs</td>
            <td headers="color second">Orangs</td>
            <td headers="size second">Large</td>
            <td headers="size second">500</td>
        </tbody>
        <tfoot>
            <th colspan="5">& cope; 2011 Adam</th>
        </tfoot>
    </table>

</body>
</html>

此例中thead和tbody中的每一个th元素都设置了全局的id值。tbody中的每个td和th都设置了headers属性将相应的单元格和列表头关联起来，td还关联了行表头。

caption

定义一个标题将其与表格关联起来

局部属性

内容

流内容

习惯样式

    caption {
        display:table-caption; text-align:center;
    }

处理列

colgroup

局部属性

span

内容

col元素，只有在没有设置span属性是才能使用；

习惯样式

    colgroup {
        dispaly: table-colum-group;
    }

影响范围

所有列中的单元格，包括thead,tfoot,该元素无法做到更具体的更具体的选择器的基础，如(#colgroup1>td)是不会有任何元素匹配的;

col

能获得更多的控制权，既能对一组列应用样式，也能对改组中的个别列应用样式
col位于colgroup元素中，每个col元素代表列组中的一列；

局部属性

span

内容

习惯样式

    col {
        display: table-column;
    }

border

<table border="1"></table>
该属性不控制边框的样式

`code`

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
    <style>
        thead th, tfoot th {
            text-align:left; background: grey; color: white;
        }
        tbody th {
            text-align: right; background: lightgrey; color: grey;
        }
        thead [colspan], tfoot [colspan] {
            text-align: center;
        }
        caption {
            font-weight: bold; font-size: large;margin-bottom: 5px;
        }
        #colgroup1 {
            background: red;
        }
        #col3 {
            background: green;font-size: small;
        }
        #colgroup2 {
            background: blue;font-size: small;
        }
    </style>
</head>
<body>
    <table border="1">
        <caption>Result of fruit</caption>
        <colgroup id="colgroup1">
            <col id="colAnd2" span="2">
            <col id="col3">
        </colgroup>
        <colgroup id="colgroup2" span="2"></colgroup>
        <thead>
            <tr>
                <th id="rank">rank</th>
                <th id="name">name</th>
                <th id="color">color</th>
                <th id="size" colspan="2">size & vote</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th id="first" headers="rank">favorite</th>
                <td headers="name first"> Apple</td>
                <td headers="color first">Green</td>
                <td headers="size first">midium</td>
                <td headers="size first">500</td>
            </tr>
            <tr>
                <th id="second" headers="rank">2th favorite</th>
                <td headers="name second">Orangs</td>
                <td headers="color second">Orangs</td>
                <td headers="size second">Large</td>
                <td headers="size second">500</td>
            </tr>
            <tr>
                <th id="second" headers="rank">3th favorite</th>
                <td headers="name second">Pomegrante</td>
                <td colspan="2" rowspan="2">oooooooooooooo</td>
                <td headers="size second">300</td>
            </tr>
            <tr>
                <th rowspan="2">join 4th</th>
                <td>cherries</td>
                <td rowspan="2">75</td>
            </tr>
            <tr>
                <td>pineapple</td>
                <td>brown</td>
                <td>large</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th colspan="5">& cope; 2011 Adam</th>
            </tr>
        </tfoot>
    </table>

</body>
</html>