HTML table表格用法详解（附带实例）

表格是信息的基本呈现方式之一。本节将介绍页面中关于表格的相关元素，以及表格样式的设置。

HTML 页面中，表格相关的元素包括：

table，表格元素，定义表格的区域，以下元素都会定义在此元素中；
caption，表格的标题；
tr，定义一行，可以是标题行或数据行；
th，在 tr 元素中定义列标题单元格，如字段名等；
td，在 tr 元素中定义数据单元格；
colgroup 和 col，定义列组和其中的列，可以对多列和单列进行设置，如设置列的样式等；
tbody，定义表格的主体；
thead 和 tfoot，定义表格的标题组和脚注行组，可以包含一系列的行，如表格数据的合计行。

在下面的代码中，首先从一个简单的表格开始。

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>SUV配置单</title>
</head>
<body>
    <table>
        <caption>SUV配置单</caption>
        <tbody>
            <tr>
                <th>项目</th>
                <th>基本型</th>
                <th>精英型</th>
                <th>尊贵型</th>
            </tr>
            <tr>
                <td>GPS</td>
                <td>*</td>
                <td>有</td>
                <td>有</td>
            </tr>
            <tr>
                <td>雷达</td>
                <td>有</td>
                <td>有</td>
                <td>有</td>
            </tr>
            <tr>
                <td>倒车影像</td>
                <td>*</td>
                <td>*</td>
                <td>有</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

页面显示效果见下图：

虽然说定义样式主要是 CSS 的工作，但在表格中还是有一些基本的样式属性可以使用。

例如，需要为表格加上线条时可以使用 <table> 标记的 border 属性指定宽度，单位是像素；如 <table border="1"> 指定线条宽度为 1 像素。页面显示效果见下图。

默认情况下，单元格之间会有一些间距，虽然看起来有一些立体感，但很多时候并不需要这样的效果。下面的代码在 <table> 标记中再添加两个属性。

<table border="1" cellspacing="0" cellpadding="3">

上述代码中，cellspacing 属性设置单元格之间的距离，cellpadding 属性设置单元格内容与边框的距离（内缩进）。页面显示效果见下图。

下面的代码通过设置 colgroup 和 col 元素的样式为表格的列添加背景色：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="3">
    <caption>SUV 配置单</caption>
    <colgroup>
        <col style=" background-color:#bbb;" />
    </colgroup>
    <colgroup style=" background-color:#ddd;">
        <col />
        <col />
        <col />
    </colgroup>
    <tbody>
        <tr>
            <th>项目</th>
            <th>基本型</th>
            <th>精英型</th>
            <th>尊贵型</th>
        </tr>
        <tr>
            <td>GPS</td>
            <td>*</td>
            <td>有</td>
            <td>有</td>
        </tr>
        <tr>
            <td>雷达</td>
            <td>有</td>
            <td>有</td>
            <td>有</td>
        </tr>
        <tr>
            <td>后视影像</td>
            <td>*</td>
            <td>*</td>
            <td>有</td>
        </tr>
    </tbody>
</table>
</body>
</html>

页面显示效果见下图：

代码中，colgroup 元素中可以定义一个或多个 col 元素，这些 col 元素会按顺序与表格中的列相匹配。通过 col 元素，可以定义列的属性，通过 colgroup 元素，则可以同时定义多个列的属性。在下面的代码中，第一个 <tr> 标签中添加了 style 属性，指定了行的背景色。

<tr style="background-color:#bbb;">
    <th>项目</th>
    <th>基本型</th>
    <th>精英型</th>
    <th>尊贵型</th>
</tr>

页面显示效果见下图：

使用 Excel 时，有合并单元格的概念，即将多个单元格（多列或多行）进行合并。在 HTML 中的表格，同样可以实现这个功能，此时需要关注 td 元素的以下两个属性：

colspan 属性，指定单元格所占的列数；
rowspan 属性，指定单元格所占的行数。

下面的代码在第二行定义了一个占用两列的合并单元格：

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <table border="1" cellpadding="10" cellspacing="0">
        <tr>
            <td>行1列1</td>
            <td>行1列2</td>
            <td>行1列3</td>
        </tr>
        <tr>
            <td>行2列1</td>
            <td colspan="2">行2列2(占用两列)</td>
        </tr>
        <tr>
            <td>行3列1</td>
            <td>行3列2</td>
            <td>行3列3</td>
        </tr>
    </table>
</body>
</html>

页面显示效果见下图：

HTML表格样式

页面中，表格相关的元素都会有特殊的显示类型，样式中的 display 属性也都有对应的值，如：

table，相当于 table 元素，显示效果类似块元素；
inline-table，行内表，可以定义嵌入行的表格；
table-caption，对应 caption 元素，一个表只有一个。对于 caption 元素，还可以使用 caption-side 属性设置表标题的位置，其值包括 top（默认值）和 bottom。
table-header-group，相当于 thead 元素，一个表只有一个。
table-footer-group，相当于 tfoot 元素，一个表只有一个。
table-row-group，相当于 tbody 元素。
table-row，相当于 tr 元素。
table-column-group，相当于 colgroup 元素。
table-column，相当于 col 元素。
table-cell，相当于一个 td 或 th 元素。

大多数情况下，并不需要对表格中的元素设置 display 属性，但在使用 JavaScript 操作表格时，使用正确的 display 属性值非常重要。

对于表元素，也就是 display 属性值为 table 或 inline-table 的元素，还有一些样式属性可以使用，下面分别讨论。

border-collapse 属性，用于设置单元格之间的折叠样式，其常用值包括：

separate，默认值。各单元格边框之间会有一定的距离。
collapse，各单元格边框合并。

下图分别显示了这两个值的效果：

border-spacing 属性，设置单元格边框之间的距离，此时，border-collapse 属性值应该为 separate。

empty-cells 属性，用于处理空单元格是否显示，默认值为 show，还可以设置为 hide。使用此属性时，border-collapse 属性值同样应该为 separate。

此外，在单元格中经常还会使用 text-align 和 vertical-align 属性设置内容的水平对齐方式和垂直对齐方式。

下面的代码综合演示了表格的一些样式设计：

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        table {
            border-collapse: collapse;
        }
        th, td {
            padding: 0.3em 1em;
            border: 1px solid gray;
            text-align: center;
        }
        th {
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>列一</th>
            <th>列二</th>
            <th>列三</th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
        </tr>
    </table>
</body>
</html>

页面显示效果见下图：

HTML table表格用法详解（附带实例）

HTML表格样式

相关文章