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