HTML入门基础2：表格

表格在网页中的应用比较广泛，如用户管理、电商网站购物车，还有很多分栏结构都是用表格写的。

基础表格语法
表格用三种标签，分别是table代表整个表格、tr代表行、td代表单元格。三种标签彼此是嵌套关系。

<!--创建一个三行两列的，边框为1的表格-->
<table border="1">
    <tr><td>上午</td><td>下午</td></tr>
    <tr><td>语文</td><td>英语</td></tr>
    <tr><td>数学</td><td>历史</td></tr>
</table>

插入和删除
插入行：插入一个tr标签以及该行所包括的所有td标签。
删除列：删除每一个tr标签里的相同位置的td标签。

带标题和表头的表格

<table border="1" width="500px">
    <caption>三年一班课程表</caption><!--表格的标题，内容居中显示-->
    <tr><th>星期一</th><th>星期二</th></tr><!--表格的第一行表格头，内容居中加粗显示-->
    <tr><td>语文</td><td>英语</td></tr><!--普通单元格，内容靠左不加粗-->
    <tr><td>数学</td><td>历史</td></tr>
</table>

带结构的表格
如果我们所编辑的表格太大，那么浏览器在加载内容时就会很慢。如果需要等所有内容都加载完再显示，用户体验不好。因此需要把表格分割成几块，让其一块一块地显示。相当于对表格的行进行分组。
表格划分为三部分：表头、主体、脚注。
表格的头thead标签：放表格的第一行即表头。
表格的主体tbody标签：放表格主体内容。
表格的脚注tfoot标签：放脚注。
注意：thead标签里的内容永远显示在表格最上方，tfoot标签里的内容永远显示在表格最下方，无论你把它们俩放到文档的哪个部分。

一个完整的表格结构如下：

<table border="1" width="500px">
    <caption>标题</caption>
    <thead>
        <tr><th>表头</th><th>表头</th></tr><!--表格的第一行表格头-->
    </thead>
　  <tbody>
        <tr><td>主体</td><td>主体</td></tr>
        <tr><td>主体</td><td>主体</td></tr>
    </tbody>
　  <tfoot>
        <tr><td>脚注</td><td>脚注</td></tr>
    </tfoot>
</table>

表格属性：table标签的属性

表格属性：table标签的外边框属性

表格属性：table标签的内边框属性

表格属性：tr标签的属性，针对表格的每一行

表格属性：th和td标签的属性，针对表格的每一个单元格

表格属性：thead、tbody和tfoot标签的属性，针对表格的每一个部分

表格的跨行rowspan和跨列colspan
前面所接触的都是最基本的形式的表格，那如果表格里有某个单元格跨行或者跨列了该怎么编写？
拿到一个跨行或者跨列的表格，先不去看跨行跨列的那些单元格，先把表格的最基本的格式写出来。
例如下图的表格：

首先把表格最基本的形式写出来。本例最基本的格式是6行5列。代码如下：

<table border="1" width="500" cellspacing="0" cellpadding="5px" align="center">
    <caption>课程表</caption>
    <tr bgcolor="pink" align="center">
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
    </tr>
    <tr align="center">
        <td>语文</td>
        <td>数学</td>
        <td>化学</td>
        <td>英语</td>
        <td>生物</td>
    </tr>
    <tr align="center">
        <td>语文</td>
        <td>数学</td>
        <td>化学</td>
        <td>英语</td>
        <td>生物</td>
    </tr>
    <tr align="center">
        <td>课间活动</td>
        <td>课间活动</td>
        <td>课间活动</td>
        <td>课间活动</td>
        <td>课间活动</td>
    </tr>
    <tr align="center">
        <td>语文</td>
        <td>数学</td>
        <td>化学</td>
        <td>英语</td>
        <td>生物</td>
    </tr>
    <tr align="center">
        <td>语文</td>
        <td>数学</td>
        <td>化学</td>
        <td>英语</td>
        <td>生物</td>
    </tr>
</table>

效果如下：

接下来处理星期一的语文的跨行：
对表格的第二行、第一列的单元格td设置跨行属性，属性值为2。同时把第三行、第一列的单元格td删掉。效果如下：

再处理课间活动的跨列：
对表格的第四行、第一列设置跨列属性，属性值为5。同时把第四行、第二三四五列的单元格td删掉。效果如下：

最终代码：

<table border="1" width="500" cellspacing="0" cellpadding="5px" align="center">
    <caption>课程表</caption>
    <tr bgcolor="pink" align="center">
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
    </tr>
    <tr align="center">
        <td rowspan="2">语文</td>
        <td>数学</td>
        <td>化学</td>
        <td>英语</td>
        <td>生物</td>
    </tr>
    <tr align="center">
        <!-- <td>语文</td> -->
        <td>数学</td>
        <td>化学</td>
        <td>英语</td>
        <td>生物</td>
    </tr>
    <tr align="center">
        <td colspan="5">课间活动</td>
        <!-- <td>课间活动</td>
        <td>课间活动</td>
        <td>课间活动</td>
        <td>课间活动</td> -->
    </tr>
    <tr align="center">
        <td>语文</td>
        <td>数学</td>
        <td>化学</td>
        <td>英语</td>
        <td>生物</td>
    </tr>
    <tr align="center">
        <td>语文</td>
        <td>数学</td>
        <td>化学</td>
        <td>英语</td>
        <td>生物</td>
    </tr>
</table>

表格的嵌套
即表格里还有一个小表格。嵌入表格需要满足：嵌入的小表格有完整的表格结构；嵌入的小表格需要放到大表格的td标签中。

利用表格来搭建网页布局
例如：一个网页，有位于最顶部的导航条、位于最底部的版权信息、还有位于中间的主体内容、这三部分之间又有细细的一条缝隙。也就是说站在全局角度，网页是一个五行一列的表格。然后再在主体内容行上嵌套一个一行三列的小表格，是网页主体内容的细致的布局。如果还有更细致的布局，还可以继续嵌套。

在进行网页布局时，表格一般不设置border属性。当然，在开发过程中可以先加上border属性来便于观察，开发结束再删掉就行了。

表格布局应该遵循的两个原则：尽可能少的用表格嵌套；尽可能少的跨行跨列。
如图所示的网页布局：

它的代码如下：

<table width="100%">
    <tr bgcolor="pink" height="80px"><td></td></tr><!--顶部导航-->
    <tr height="10px"><td></td></tr><!--缝隙-->
    <tr bgcolor="orange"><td><!--主体内容-->
        <table align="center"><!--表格嵌套-->
            <tr><td width="240px" bgcolor="white">左侧内容</td><td width="20px"></td><td width="764px" bgcolor="white">右侧内容</td></tr>
        </table>
    </td></tr>
    <tr height="10px"><td></td></tr><!--缝隙-->
    <tr bgcolor="black" height="80px"><td></td></tr><!--底部版权-->
</table>