4.3 详解table

表格:table
     表格的行：tr
     每行中的列：td
     表格的标题：<th></th> 默认加粗，单元格居中
     表格头:caption
    [常用属性]
    1、border:给表格添加边框。

       当border属性增大时，只有外围框线增加，单元格的边框始终为1px
    2、bordercolor="blue" 边框颜色
    3、Width、 Height：表格的宽高
    4、Cellspacing：单元格与单元格之间的间隙距离。
       当cellspacing="0"，只会使单元格间隙为0，但不会合并边框线。
       表格边框合并：style="border-collapse: collapse;",
       无需再写cellspacing="0"
    5、Cellpadding：每个单元格中的内容与边框线的距离。
    6、align：表格在屏幕的左中右位置显示，left center right
       注意：给表格加上align属性，相当于让表格浮动。
       会直接打破表格后面元素的原有排列方式
    7、bgcolor:背景色   等同于style="background-color:;"
    8、background:   background="img/computer.jpg"设置背景图片
      等同于style="background-image:;" 且背景图会覆盖背景色-->

【tr和td相关的属性】
    1、width/height: 单元格的宽高
    2、bgcolor:单元格的背景颜色
    3、align: left center right 单元格中的文字，水平对齐方式
    4、valign:top center bottom 单元格中的文字，垂直对齐方式
    5、nowrap="nowrap" 单元格中文字不换行

    注意：1、当表格属性与行列属性冲突时，以行列属性为准。（近者优先,就近原则）
         2、表格的align属性，是控制表格自身在浏览器的显示位置；
            行和列的align属性，是控制单元格中文字在单元格中的对齐方式；
         3、表格的align属性，并不影响表格内，文字的水平对齐方式
            tr的align或者valign属性，可以控制一行中所有单元格的水平或者垂直对齐方式

表格的跨行与跨列：

	1.colspan：跨行

	2.rowspan: 跨列 

表格的结构化（语义化）：

	完整表格结构

	caption (永远在表格的最上方)

	thead	(永远在表格内的最上方)

	tbody

	tfoot   (在表格的最下方)

语义化标签的优点：
	1.便于理解。

	2.便于浏览器搜索识别

	3.可以调整书写顺序实验某些优先展示，不打乱顺序。

语义化标签 例

<table width="500" align="center">
    <colgroup style="background-color: #ff8454"> <!--前两列为一组-->
        <col/> <!--第一列-->
    </colgroup>
    <colgroup style="background-color: #ff2026">
        <col/> <!--第二列-->
        <col/> <!--第三列-->
    </colgroup>

    <caption>表格标题</caption>

    <thead>
    <tr>
        <th>头1</th>
        <th>头2</th>
        <th>头3</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>csdn</td>
        <td>csdn</td>
        <td>csdn</td>
    </tr>
    <tr>
        <td>csdn</td>
        <td>csdn</td>
        <td>csdn</td>
    </tr>
    </tbody>

    <tbody>
    <tr>
        <td>csdn</td>
        <td>csdn</td>
        <td>csdn</td>
    </tr>
    <tr>
        <td>csdn</td>
        <td>csdn</td>
        <td>csdn</td>
    </tr>
    </tbody>

    <tfoot >
    <tr>
        <td>尾1</td>
        <td>尾2</td>
        <td>尾3</td>
    </tr>
    </tfoot>
</table>