html5学习15：表格元素

1、基本的表格

有三个元素是每个表格都必须要有的: table、tr和td。元素table，是HTML用以支持表格式内容的核心元素，它表示HTML文档中的表格。

1.1 table元素

属性：border

包含：caption,colgroup,thead,tbody,tfoot,tr,th,td

1.2 tr元素

父元素：table,thead,tfoot,tbody

内容：td,th

1.3 td元素

属性：colspan,rowspan,headers

<table>
    <tr>
        <td>apples</td>
        <td>apples</td>
    </tr>
</table>

table元素最棒的特性之一是作者不必操心尺寸的问题。浏览器会保证让列的宽度足以容纳最宽的内容，让行的高度足以容纳最高的单元格。

2、添加表头单元格

th元素表示表头的单元格

2.1 th元素

属性：colspan,rowspan,scope,headers

父元素：tr

<table>
     <tr>
        <th>name</th>
        <th>name</th>
    </tr>
    <tr>
        <td>apples</td>
        <td>apples</td>
    </tr>
</table>

3、为表格添加结构

区分表格中不同的th元素：

tr > th {}
tr > th:only-of-type{}

3.1 表头和表格主题

tbody元素表示构成表格主体的全体行——不包括表头行和表脚行(它们分别由thead和tfoot元素表示，稍后就会介绍)。

内容:tr元素

即便在文档中表格没有用到tbody元素，大多数浏览器在处理table元素的时候都会自动插人tbody元素。因此完全根据文档中的表格结构来设计的CSS选择器有可能不管用。

例如，由于浏览器在table和tr元素之间插了一个tbody元素，所以table > tr这个选择器会失效。为了应对这种情况，需要使用table > tbody > tr或table tr(没有字符>)这样的选择器，或者干脆写成tbody > tr。

thead元素用来标记表格的标题行。内容为tr元素。如果没有thead元素的话，所有的tr元素都会被视为表格主题的一部分。

3.2 添加表脚

tfoot元素用来标记组成表脚的行。可以包含tr元素。

在HTML5之前，tfoot元素只能出现在tbody元素之前（如果省略tbody元素，则是第一个tr元素之前)。在HTML5中则可以把tfoot元素放在tbody元素之后或最后一个tr元素之后，这与浏览器显示表格的方式更为一致。

4、制作不规则表格

大多数表格都是简单的网格形式，每个单元格占据网格中的一个位置。但是为了表示更复杂的数据，有时需要制作不规则的表格，其中的单元格会跨越几行或几列。这种表格的制作要用到td和th元素的colspan和rowspan属性。

<td colspan="2" rowspan="2"></td>

rowspan：设置所跨行数

colspan：设置所跨列数

设置了这个属性后，会覆盖原来在那些位置的内容。

5、把表头与单元格关联起来

td和th元素都定义了headers属性，它可以供屏幕阅读器和其他残障辅助技术用来简化对表格的处理。headers属性的值可被设置为一个或多个th单元格的id属性值。

<table>
    <thead>
    	<tr>
        	<th id="rank">rank</th>
            <th id="name">name</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<th id="first" headers="rank"></th>
            <td headers="name first"></td>
        </tr>
    </tbody>
</table>

将每个单元格与列表头和对应的表头关联起来

6、为表格添加标题

caption元素可以用来为表格定义一个标题并将其与表格关联起来。

允许的父元素：table元素。

<table>
    <caption>title</caption>
    <thead></thead>
    <tfoot></tfoot>
    <tbody></tbody>
</table>

一个表格只能包含一个caption元素。不必是表格的第一个子元素，无论定义在什么位置，总会显示在表格上方。

7、处理列

HTML中的表格是基于行的。单元格的定义都要放在tr元素中，而表格则是一行一行地组建出来的。因此对列应用样式有点不方便，对于包含不规则单元格的表格更是如此。这个问题的解决办法是使用colgroup和col元素。colgroup代表一组列。

父元素：table元素

属性：span

内容：col元素

<table>
    <caption>title</caption>
    <colgroup id="colgroup1" span="2"/>
</table>

这里定义的colgroup元素，span属性指定负责的列数。

该图揭示了colgroup元素使用中的一些重要特点。首先，应用到colgroup上的CSS样式在具体程度上低于直接应用到tr、td和th元素上的样式。从应用到thead、tfoot和第一列th元素上的样式未受应用到colgroup元素上的样式的影响就能看出这一点。

要是把针对colgroup元素的样式之外的样式都删除掉，那么所有单元格都会受到colgroup样式的影响。

第二，不规则单元格被计入其起始列。从表格的第三行可以看出这一点。在此行中有一个应用了第一种样式的单元格扩展到了由另一个colgroup元素负责的区域。

最后要说的是，colgroup元素的影响范围覆盖了列中所有的单元格，包括那些位于thead和tfoot元素中的单元格，不管它们是用th还是td元素定义的。colgroup元素的特别之处就在于它影响到的元素并未包含在其内部。因此该元素无法用做更具体的选择器的基础（如#colgroup1 > td这个选择器不会有任何匹配元素)。

表示个别的列

也可以不用colgroup元素的span属性,改用col元素指定组中的各列。

col元素允许的父元素有：colgroup元素，属性有span

使用col元素的好处在于能够获得更多控制权。有了它，既能对一组列应用样式，也能对该组中个别的列应用样式。col元素位于colgroup元素之中，每个col元素代表列组中的一列(未使用span属性的情况)。

<table>
    <caption>title</caption>
    <colgroup id="colgroup1">
    	<col id="col1And2" span="2"/>
       	<col id="col3>
     </colgroup>
</table>

可以用col元素的span属性让一个col元素代表几列。不用span属性的col元素只代表一列。此例分别为一个colgroup元素和其中的一个col元素设定了样式。

8、设置表格边框

table元素定义了border属性。使用这个属性就是告诉浏览器这个表格是用来表示表格式数据而不是用来布置其他元素的。大多数浏览器见到border属性后会在表格和每个单元格周围绘出边框。

<table border="1">
    <caption>title</caption>
    <colgroup></colgroup>
    <thead></thead>
    <tbody></tbody>
</table>

border属性的值必须设置为1或空字符串("")。该属性并不控制边框的样式，那是CSS的工作。