老是忘記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 控制單元格之間的距離