table

老是忘记table表格的用法，今天已经是第4次+重新学习table，决定把table的用法总结一下。

HTML代码：

<div id="main">
<table>
    <caption>Table 1 Customers</caption>
    <thead>
    <tr>
        <th>物品</th>
        <th>价格</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>苹果</td>
        <td>8 rmb/kg</td>
    </tr>
    <tr>
        <td>鸭梨</td>
        <td>5 rmb/kg</td>

    </tr>
    </tbody>
</table>
    </div>

CSS代码：

   #main{
        width: 500px;

    }
    caption{
        caption-side: bottom;
    }
    table,th,td{
        border:solid 1px #666;
    }
    table{
        width:100%;
        border-collapse: collapse;//折叠边框
    }
    th{
        height:50px;
        background: yellow;

    }
    td{
        text-align: center;
        height:30px;
        vertical-align: bottom;

    }

浏览器的测试结果：

Paste_Image.png

1.首先table标签里可以有thead和tbody及tfoot标签。

不加上这些标签表面上看不出对最后的渲染有什么影响，但我想既然有这些标签的存在，肯定会有它们存在的原因：
按W3C的规范设计目的，把表格分为thead、tbody、tfoot主要是为了在浏览很长的表格时，其表头及表尾可以不动，只有内容在动。

顾名思义：

thead用来放标题之类的；tbody用来放数据主体；tfoot则是用来放表格的脚注之类的。

附加说明：

没有必要全部用到，但要记住如果有thead 或 tfoot就必须有tbody。

2.表格标题写在 caption标签里(表的名字)

caption-side:top(默认在table正上方) / bottom（在table正下方）

3.tr标签

表示table里的一行 里面可以是多组由th或者td标签所定义的单元格；

关于th标签

用来定义表头的单元格，表格中的文字将以粗体显示，并居中。（必须放在tr标签内）

关于td标签

用来定义单元格标签，一组td将建立一个单元格，（必须放在tr标签内）

增加css样式的说明

1.border-collapse ：collapse 折叠边框
2.text-align :center 标签内的文本水平居中
3.vertical-align :center 标签内的文本垂直居中
4.border-spacing :4px 控制单元格之间的距离