《五》表格

表格：是一些被称作单元格的矩形框按照从左到右，从上到下的顺序排列在一起而形成的，通常用来组织结构化的信息。

<table></table> 表格标签：

用于创建表格。

属性有：

1. width、height。

2. border：表格边框的宽度。

3. cellspacing：单元格之间的间距，默认是 2px。

4. cellpadding：单元格边框与单元格内容之间的距离。

5. frame：控制表格边框最外层的四条线框。
   属性值：void(默认值，无边框)；above(仅顶部有边框)；below(仅底部有边框)；hsides(仅顶部和底部有边框)；lns(仅左侧有边框)；rhs(仅右侧有边框)；vsides(仅左右侧有边框)；box/border(全部四个边框)
   

6. rules：控制是否显示以及如何显示单元格之间的分割线。
   属性值：none(默认值，无分割线)；all；rows(仅有行分割线)；cols(仅有列分割线)；groups(仅在行组和列组之间有分割线)。
   

<tr></tr> 表格行标签：

tr 是 table row 的缩写。用于创建表格行。

属性有：

1. align：统一设置当前表格行的单元格中内容的水平方向对齐方式。
   属性值：left、right、center。
2. valign：统一设置当前表格行的单元格中内容的垂直方向对齐方式。
   属性值：top、bottom、middle。

<td></td> 单元格标签。

td 是 table data 的缩写，用于创建单元格，存储表格数据。

属性有：

1. width、height、align、valign。
2. rowspan、colspan。

<th></th> 表头单元格标签：

用于创建表头单元格。

<td></td> 和 <th></th> 都是单元格标签，嵌套在 <tr></tr> 标签内成对出现，两者的属性一样。但是 <th></th> 是表头标签，通常位于首行或首列，文字会被默认加粗居中，而 td></td> 不会。

<caption></caption> 表格标题标签：

用于为表格定义标题，必须紧随 <table></table> 标签，且每个表格只能定义一个标题。默认情况下，标题将在表格上方居中显示。

<table border=”1”>
    <caption>我的表格</caption>//标题
    <tr>
        <td>第一行，第一列</td>
        <td>第一行，第二列</td>
    </tr>
</table>

<thead></thead> 表头行分组标签：

用于对表格中的表头内容进行分组。

<thead></thead>、<tbody></tbody>、<tfoot></tfoot> 必须结合使用，包含一个或者多个<tr></tr>，但是它们不会影响到表格的布局。

<tbody></tbody> 表主体行分组标签：

用于对表格中的主体内容进行分组。

<thead></thead>、<tbody></tbody>、<tfoot></tfoot> 必须结合使用，包含一个或者多个<tr></tr>，但是它们不会影响到表格的布局。

<table border=”1” width=”300”>
     <tbody align=”right”>
           <tr>
                 <td>mary</td>
                 <td>18</td>
            </tr>
            <tr>
                   <td>jerry</td>
                   <td>20</td>
            </tr>
     </tbody>
</table>

<tfoot></tfoot> 表尾行分组标签：

用于对表格中的表尾内容进行分组。

<thead></thead>、<tbody></tbody>、<tfoot></tfoot> 必须结合使用，包含一个或者多个<tr></tr>，但是它们不会影响到表格的布局。

不规则表格：

设置单元格 <td></td> 的跨行或跨列属性可以创建出不规则表格。

1. rowspan：设置单元格可跨的行数。rowspan=”0” 表示单元格跨到行组的最后一行。
2. colspan：设置单元格可跨的列数。colspan=”0” 表示单元格跨到列组的最后一列。

<table border=”1”>
      <tr>
          <td>1,1</td>
          <td>1,2</td>
          <td>1,3</td>
     </tr>
     <tr>
         <td colspan=”2”>2,1 2,2</td>
         <td>2,3</td>
    </tr>
</table>

嵌套表格：

在单元格中放置另一个表格，即 <td></td> 元素中再包含 <table></table> 元素可以创建出嵌套表格。使用嵌套表格以设计复杂表格或者复杂布局。