表格内部的对齐和跨度
默认情况下,放在表格单元格中的内容将水平左对齐,并垂直居中。可用样式属性text-align和vertical-align来控制表格单元格中的内容在水平方向和垂直方向的对齐方式。
这些属性可用于任何<tr>、<td>或<th>标签。应用于<tr>标签的对齐属性将应用于该行所有的单元格。如果表格很大,应将这些属性应用于<tr>而不是每个<td>或<th>标签,这样可以节省很多时间和精力。程序清单11.2中的HTML代码使用style="vertical-align:top"使文本出现在单元格的顶部。图11.2显示了结果。
程序清单11.2 表格内的对齐、单元格间距、边框和背景颜色
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Things to Fear</title>
</head>
<body>
<table border="2" cellpadding="4" cellspacing="2">
<tr style="background-color:silver">
<th colspan="2">Description</th>
<th>Size</th>
<th>Weight</th>
<th>Speed</th>
</tr>
<tr style="vertical-align:top">
<td><img src="handgun.gif" alt=".38 Special"/></td>
<td><h2>.38 Special</h2></td>
<td>Five-inch barrel.</td>
<td>Twenty ounces.</td>
<td>Six rounds in four seconds.</td>
</tr>
<tr style="vertical-align:top">
<td><img src="rhino.gif" alt="Rhinoceros" /></td>
<td><h2>Rhinoceros</h2></td>
<td>Twelve feet, horn to tail.</td>
<td>Up to two tons.</td>
<td>Thirty-five miles per hour in bursts.</td>
</tr>
<tr style="vertical-align:top">
<td><img src="axeman.gif" alt="Broad Axe " /></td>
<td><h2>Broad Axe</h2></td>
<td>Thirty-inch blade.</td>
<td>Twelve pounds.</td>
<td>Sixty miles per hour on impact.</td>
</tr>
</table> #p#分页标题#e#
</body>
</html>

图11.2 程序清单11.2中的colspan属性使左上角的单元格跨越多列
提示:下面是最常用的vertical-align样式属性值:top、middle、bottom、text-top、text-bottom和baseline(用于文本)。这些属性值让你能够灵活地控制表格数据的垂直对齐方式。
在图11.2的顶部,一个单元格(Description)跨越两列。这是因为该单元格的<th>标签指定了属性colspan="2"。也可用rowspan属性来创建跨越多行的单元格。跨越(spanning)是使单元格扩展到占据表格中多行或多列的过程。Colspan属性使单元格跨越多列;rowspan使单元格跨越多行。
提示:创建含有跨越多行或多列的单元格的表格时,记住行和列的组织结构可能是最困难的事。通常一个很小的错误就能使整个表格排列错误。编写表格的HTML代码前,先在纸上画出表格,可以节省很多时间,避免造成困惑。也可以使用可视化的网页设计软件来排列表格中的行和列。这使表格的创建容易得多,只要选择的软件(如Microsoft FrontPage或Macromedia Dreamweaver)能够创建格式良好、易于编辑的HTML。