table标签



 •thead、tfoot 以及 tbody标签实现一个表格示例,这三个标签分别代表表格的头部(th)、主题、和底部,能让表格更加语义化的同时,也能让我们更加方便的控制表格的表现,用js控制也更简单


<table border="1">
    <thead>
        <tr>
            <th>科目</th>
            <th>分数</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>语文</td>
            <td>99</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>60</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>总分</td>
            <td>159</td>
        </tr>
    </tfoot>
</table>
这几个标记主要是用于提高table标签的加载以及显示的,说白了,就是分布加载。在传统的浏览器,在加载时,是当所有的标签中元素都被下载后才会显示,当然这样的用户体验是不好的。再加入了这几个t打头的标签后,table就会分布的加载table中的元素,顺序依据写在table中的标签顺序进行。 为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用TBODY可以优化显示。如果表格很长,用tbody分段,可以一部分一部分地显示,不用等整个表格都下载完成。下载一块显示一块,表格巨大时有比较好的效果。
tbody、tfoot、thead一般来说用得不是很多,对于比较复杂的页面,页面的排版用到了很多的表格,表格的结构也就相对的复杂了,所以又将表格分割成三个部分:题头、正文和脚注。而这三部分分别用: thead, tbody, tfoot来标注。
thead 表格的头        用来放标题之类的东西
tbody 表格的身体    放数据本体 
tfoot  表格的脚       放表格的脚注之类
我觉得最直接的用处是:   
TBODY包含行的内容下载完优先显示,不必等待表格结束.另外,还需要注意一个地方。表格行本来是从上向下显示的。但是,应用了thead/tbody/tfoot以后,就“从头到脚”显示,不管你的行代码顺序如何。也就是说如果thead写在了tbody的后面,html显示时,还是以先thead后tbody显示
 




•colgroup,col:
colgroup放在table元素里,给表格的列统一定义风格,比如下面表格每一行前2列颜色为红色
第三列颜色黄色,第四列颜色绿色,如果只有一列,第二,三,四列效果不应用


<table id="table2">
    <colgroup>
        <col span="2" style="background-color:red">
        <col style="background-color:yellow">
        <col style="background-color:green">
    </colgroup>
    <tr>
        <th>ISBN</th>
        <th>Title</th>
        <th>Price</th>
        <th>test</th>
    </tr>
    <tr>
        <td>3476896</td>
        <td>My first HTML</td>
        <td>$53</td>
        <td>testvalue</td>
    </tr>
</table>


也可以把col直接放入table中,效果一样,colgroup只是起到一个语义上的作用




•scope:

标示单元格是某一行或某一列的头,或某一个行组或列组的头

没有实际的视觉效果,有语义上的作用,可以辅助屏幕阅读器


Poster name Color Sizes available
Zodiac Full color A2 A3 A4
Black and white A1 A2 A3
Sepia A3 A4 A5
Angels Black and white A1 A3 A4
Sepia A2 A3 A5

<table id="table3">
    <caption>
        Poster availability
    </caption>
    
    <thead>
        <tr>
            <th scope="col">Poster name</th>
            <th scope="col">Color</th>
            <th colspan="3" scope="colgroup">Sizes available</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th rowspan="3" scope="rowgroup">Zodiac</th>
            <th scope="row">Full color</th>
            <td>A2</td>
            <td>A3</td>
            <td>A4</td>
        </tr>
        <tr>
            <th scope="row">Black and white</th>
            <td>A1</td>
            <td>A2</td>
            <td>A3</td>
        </tr>
        <tr>
            <th scope="row">Sepia</th>
            <td>A3</td>
            <td>A4</td>
            <td>A5</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <th rowspan="2" scope="rowgroup">Angels</th>
            <th scope="row">Black and white</th>
            <td>A1</td>
            <td>A3</td>
            <td>A4</td>
        </tr>
        <tr>
            <th scope="row">Sepia</th>
            <td>A2</td>
            <td>A3</td>
            <td>A5</td>
        </tr>
    </tbody>
</table>


•summary属性不会产生任何视觉效果,相当于一个注释,标示table里的内容

<table border="1" summary="Calendar for 2007.10">

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页