html/css 表格元素以及表格佈局

一，html之表格

1，一個完整的html表格所包含的元素

<!--一個完整的html表格-->
<!--cellpadding表明單元格內的文字和單元格邊框之間的間距-->
<!--cellspacing表明單元格和單元格之間的間距-->
<!--caption能夠不是table的第一個子元素,但老是顯示在表格最上方-->
<!--表格結構：thead / tbody / tfoot-->
<table border="1" cellpadding="1" cellspacing="1">
    <caption>我是表格的說明文字</caption>
    <thead>
    <tr>
        <th>姓名</th>
        <th>年齡</th>
        <th>位置</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th>馬內</th>
        <td>25</td>
        <td>左邊鋒</td>
    </tr>
    <tr>
        <th>薩拉赫</th>
        <td>25</td>
        <td>右邊鋒</td>
    </tr>
    <tr>
        <th>庫蒂尼奧</th>
        <td>25</td>
        <td>攻擊型中場</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <th colspan="3">&copy;2017利物浦球員歐冠大名單</th>
    </tr>
    </tfoot>
</table>

2，單獨用於處理列的元素

上述表格中的元素都是按行排列的，想對某一行應用某種css樣式很容易，可是若是想對某一列應用某種css樣式就不方便了。html表格元素中專門定義了一些標籤元素用於處理列，以下所示：

<table border="1" cellpadding="1" cellspacing="1">
    <caption>我是表格的說明文字</caption>
    <!--單獨處理列有兩種方法：-->
    <!--1,colgroup標籤,其span屬性指定處理幾列;-->
    <!--2,位於colgroup標籤中的col標籤,其span屬性一樣是指定處理幾列,若是沒有span屬性則col表明一列-->
    <!--另外,跨列的不規則單元格被計入其起始列-->
    <colgroup span="2" style="background-color: red"></colgroup>
    <colgroup >
        <col style="background-color: blue" />
        <col span="2" style="background-color: green" />
    </colgroup>
    <thead>
    <tr>
        <th>姓名</th>
        <th>年齡</th>
        <th>位置</th>
        <th>國籍</th>
        <th>原俱樂部</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th>馬內</th>
        <td>25</td>
        <td>左邊鋒</td>
        <td>塞內加爾</td>
        <td>南安普頓</td>
    </tr>
    <tr>
        <th>薩拉赫</th>
        <td>25</td>
        <td>右邊鋒</td>
        <td>埃及</td>
        <td>羅馬</td>
    </tr>
    <tr>
        <th>庫蒂尼奧</th>
        <td>25</td>
        <td>攻擊型中場</td>
        <td>巴西</td>
        <td>國際米蘭</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <th colspan="5">&copy;2017利物浦球員歐冠大名單</th>
    </tr>
    </tfoot>
</table>

二，css之表格佈局(實際上,HTML Table使用標籤<table>、<tr>、<td>等標籤，就是使用CSS Table的相關屬性來實現的)

1，http://www.css88.com/archives/6308