Thead和tbody,说一下不常用的东西!

如果你想,你可以把你的表像,但如果你欣赏的内容是高度语义结构化的我很高兴向您介绍<Thead>元。<Thead>元结构表中的标题,这告诉浏览器的每一列包含什么。< tbody >元结构的全部内容,让浏览器知道该表的实际内容是什么。使用同样的例子之前,<Thead>和< tbody >元素B这样用:

<table border="1" width="100%">
        <thead>
                <tr>
                        <td>Row 1, cell 1</td>
                        <td>Row 1, cell 2</td>
                        <td>Row 2, cell 3</td>
                </tr>
        </thead>
        <tbody>
                <tr>
                        <td>Row 2, cell 1</td>
                        <td>Row 2, cell 2</td>
                        <td>Row 2, cell 3</td>
                </tr>
                <tr>
                        <td>Row 3, cell 1</td>
                        <td>Row 3, cell 2</td>
                        <td>Row 3, cell 3</td>
                </tr>
                <tr>
                        <td>Row 4, cell 1</td>
                        <td>Row 4, cell 2</td>
                        <td>Row 4, cell 3</td>
                </tr>
        </tbody>
</table>

此外,还有一个元素我想介绍给你---<th>元素。这个标签是表格单元标题,是用来代替<td>元素的内容时的细胞是一个标题,而不是实际的电池数据。

这意味着它是显而易见的选择在<thead>元素(应包含如第一行你的表),但你也可以用它来的第一列显示标题,表行标题。

让我们看一个例子,它非常类似于前面的但是我用有意义的内容明确,你如何使用<th>元素。

<table border="1" width="100%">
        <thead>
                <tr>
                        <th>Fruits</th>
                        <th>Vitamin A</th>
                        <th>Vitamin C</th>
                </tr>
        </thead>
        <tbody>
                <tr>
                        <th>Apples</th>
                        <td>98 ui</td>
                        <td>8.4 mg</td>
                </tr>
                <tr>
                        <th>Oranges</th>
                        <td>295 ui</td>
                        <td>69.7 mg</td>
                </tr>
                <tr>
                        <th>Bananas</th>
                        <td>76 ui</td>
                        <td>10.3 mg</td>
                </tr>
        </tbody>
</table>

你可能注意到了,当你尝试自己的例子,你不能看到任何差异。这是因为thead,使,tableheadings只添加semmantic值。但是你总是可以使用CSS样式表,然后这些元素实际上使造型更容易!


 

posted @ 2013-09-21 13:59  linmeiyis也学习代码  阅读(1097)  评论(0编辑  收藏  举报
李美仪的博客,个人喜欢健长乐和html编程哦!