1.3.4　表格

V1-10　表格排版-1

在HTML页面中，表格一直以来都发挥着非常重要的作用，除了显示表格化数据以外，更重要的一个方面是非常有利于进行页面布局。HTML表格实例如表1-3所示。

表1-3　HTML表格

HTML表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母td指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线及表格等。使用HTML标签完成一个简单表格的代码如下。

在浏览器显示运行效果如图1-19所示。

图1-19　一个简单的HTML表格

上面的表格是一个最基础的表格结构，虽然设置了表格的边框为1，但是明显看上去边框不止1个像素，同时单元格的内容与表格边框之间相距很近，显得非常拥挤。那么怎样来对表格进行美化呢？这里设置表格的边框为1，设置表格内部单元格之间的间距为0个像素（cellspacing="0"），并设置单元格内与文字内容之间的边距为10个像素（cellpadding="10"），我们来看看源文件：

运行效果如图1-20所示。

图1-20　边框正常的表格

显然，这样的外观看上去要稍微好看一些，继续来为该表格进行美化，比如加上一个标题行，可以使用thead和th标签，它们是表格的特殊标签，专门应用于表格的标题栏，会让标题栏的内容加粗，同时设置标题栏的字体颜色为白色，并设置为黑色背景，代码如下。

运行效果如图1-21所示。

图1-21　美化后的表格

开发人员也可以设置单元格的宽度或高度，表格的宽度设置只需要对第一行的单元格进行设置即可，其他行的宽度会自动保持与第1行的宽度一致。同样的，如果要设置单元格的高度，则只需要对第1列进行设置即可。当然，也可以设置表格里面文本内容的对齐方式，如水平居中、水平靠右、垂直居中、顶部对齐等。例如如下源文件。

运行效果如图1-22所示。

图1-22　设置了对齐方式的表格

V1-11　表格排版-2

可以发现，其实单元格当中的元素默认就是垂直居中的，图像也不例外。读者可以试一试往一个单元格当中插入一张图片，来确认一下效果。

当然，其实HTML表格的使用跟在Word文档中插入一张表格原理是相似的，在Word或Excel中，还可以合并单元格，HTML也提供了这样的功能（colspan和rowspan），例如下述代码。

最后的运行效果如图1-23所示。

图1-23　合并单元格

事实上，表格除了用于展示数据外，还经常用来进行页面的布局。仔细分析所有网页可以发现，绝大部分网页的布局都可以被细分为一格一格的，都可以很容易地绘制出线框来拆解页面的布局。比如蜗牛学院官网的宣传页面，也可以绘制线框图，进而使用表格来完成页面的布局，相关实战演练将在后续章节中详细讲解。