表格元素其实说白了就是一个表格，表格在现在的页面中其实用得非常少。在 CSS 出现以前，网页的布局其实就是用表格来干的，也就是把整个网页看成一个表格，然后表格套表格，完成布局。表格这个东西目前基本只存在于后台管理系统中。

前台网站：展示给用户的网站
后台网站：展示给网站管理员的网站，用于管理网站
一般来说，前台网站界面绚丽，后台网站相对而言界面要求不高，但功能性要求很高。

为什么表格布局被淘汰了

表格的渲染速度太慢了，一个页面中使用大量的表格会出现性能问题。浏览器对表格的渲染也是整体渲染，即将整个表格全部读取之后再渲染，这也是不友好的。

以上为表格的基础术语。

表格内部其实有一套非常完整的布局方式，但是我们不去管它，因为我们完全不用表格布局。

其实表格非常简单，我们看下面的例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            width: 100%;
        }

        table th,
        table td {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <table>
        <caption>表格标题</caption>
        <thead>
            <tr>
                <th>表头1</th>
                <th>表头2</th>
                <th>表头3</th>
                <th>表头4</th>
                <th>表头5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>内容1</td>
                <td>内容2</td>
                <td>内容3</td>
                <td>内容4</td>
                <td>内容5</td>
            </tr>
            <tr>
                <td>内容1</td>
                <td>内容2</td>
                <td>内容3</td>
                <td>内容4</td>
                <td>内容5</td>
            </tr>
        </tbody>
        <tfoot>
         <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>合计：</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>


从上面的例子我们可以得出很多结论，首先，我们在写表格的时候，是一行一行往下写的，caption 元素可以定义表格的标题，一个 tr 元素就是一行，一行里面有很多小格子，每一个小格子就是一列，如果这个单元格是标题，就应该用 th 元素，如果不是标题，就应该用 td 元素。而一个表格我们可以给他拆成三个部分，分别是 thead，tbody 和 tfoot，每个部分可以由多行组成，也就是每个元素下面可以包含多个 tr 元素。

这里读者会发现一个问题，单元格和单元格之间似乎出现了空隙，这个空隙我们可以使用 CSS 属性进行设置，具体属性为 border-collapse，默认值为 separate，也就是现在这样，中间存在空隙，另一个取值为 collapse，就可以把中间的空隙去掉，当设置为 collapse 之后，就得到了下面的效果。


border-collapse 是在 table 元素上设置的 CSS 属性

以上其实就是表格的基础用法，表格还有一个很高级的功能，就是单元格的合并，单元格合并功能读者应该在 Excel 等软件中见过，这里我们也可以将表格的单元格进行合并。

单元格合并可以通过一个属性来完成，使用 colspan 属性，可以设置该单元格占几列，还有一个属性为 rowspan，可以设置该单元格占几行。

例如将上例中的表尾部分改为

<tfoot>
            <tr>
                <td></td>
                <td colspan="4">合计：</td>
            </tr>
        </tfoot>

此时表示内容为 合计： 的那一个单元格跨四列，也就是占了四列，效果如图所示



若要把图中框出来的两部分进行合并，则按照下面的写法即可

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        table th,
        table td {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <table>
        <caption>表格标题</caption>
        <thead>
            <tr>
                <th>表头1</th>
                <th>表头2</th>
                <th>表头3</th>
                <th>表头4</th>
                <th>表头5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">内容1</td>
                <td>内容2</td>
                <td>内容3</td>
                <td>内容4</td>
                <td>内容5</td>
            </tr>
            <tr>
                <td>内容2</td>
                <td>内容3</td>
                <td>内容4</td>
                <td>内容5</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td colspan="4">合计：</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>


如果读者看懂了这个代码，相信跨行和跨列其实很好理解，说白了就是单元格合并嘛。colspan 属性可以设置跨列，rowspan 属性可以设置跨行，没有什么难点。

一个常见的表格美化方案是隔行变色，我们可以使用以下 CSS 样式，实现隔行变色

tbody tr:nth-of-type(2n){
	background:#ccc;
}

其实我们可以看到，我们的表格是一行一行写的，所以我们选中一行其实非常容易，但是选中一列，看起来就没那么容易，其实也很容易我们也可以通过前面学过的选择器来选中表格的第一列，例如 tbody tr td:first-of-type 就可以选择 tbody 中每一行的第一个 td 元素，也就是选中了第一列。