
4.1 简单表格
表格是用于排列内容的最佳手段。在HTML网页中,很多网页都是使用表格进行排版的。简单的表格是由<table>标签、<tr>标签和<td>标签组成的。通过使用<table>表格标签,可以完成课程表、成绩单等常见表格的制作。
4.1.1 简单表格的制作

表格标签是<table>…</table>,表格的其他标签只有在表格的开始标签<table>和表格的结束标签</table>间才有效。用于制作表格的主要标签如表4.1所示。
表4.1 用于制作表格的主要标签

<table>标签的语法格式如下:

在该语法中,<table>和</table>标签分别标志着一个表格的开始和结束;<tr>和</tr>标签分别标志着表格中一行的开始和结束,在表格中包含几组<tr>…</tr>标签,就表示该表格为几行;<td>和</td>标签标志着一个单元格的开始和结束,即表示一行中包含了几列。
接下来通过一个实例,巧用<table>表格标签、<tr>行标签和<td>单元格标签,实现一个考试成绩单表格的制作。首先通过<table>表格标签,创建一个表格框架,然后通过<tr>行标签,创建表格中的一行,最后使用<td>单元格标签,输入具体的内容。具体代码如下:


本实例的运行效果如图4.1所示。

图4.1 考试成绩表的界面效果
学习笔记
如果开始标签与属性之间漏加空格,如把<table align="center">写成<tablealign="center">,则会导致浏览器无法识别<table>标签,从而导致网页布局错乱。例如,在下面代码的第1行处,<table align="center">就写成了<tablealign="center">。

运行上述代码将出现如图4.2所示的错误界面。

图4.2 表格标签漏加空格的错误界面
4.1.2 表头的设置

表格中还有一种特殊的单元格,称为表头。表头一般位于表格第一行,用来表明该列的内容类别,用<th>和</th>标签来表示。<th>标签的使用方法与<td>标签的使用方法相同,但是<th>标签中的内容是加粗显示的,其语法格式如下:

学习笔记
在编写代码的过程中,结束标签不要忘记添加“/”。
下面的实例使用<table>表格标签、<caption>表格标题标签、<th>表头标签、<tr>行标签和<td>单元格标签,实现了一个简单的课程表的制作。首先通过<table>标签,创建一个表格,然后利用<caption>表格标题标签,制作表头文字“简单课程表”,最后使用<tr>行标签和<td>单元格标签,输入课程表的内容。具体代码如下:


本实例的运行效果如图4.3所示。

图4.3 简单课程表的界面效果