HTML 表格

在HTML中，我们可以使用表格以行和列的形式组织内容。每个表格可以包含若干行，每行可以包含若干列。表格中的每个单元格可以包含多种形式的内容，如图片、文本、列表、链接，甚至还可以包含表格。

定义一个表格

在HTML中，一个表格以<table>标签进行定义。表格的行以<tr>标签进行定义，使用<td>标签进行定义表格中的每个单元格。

下面是一个包含三行四列的表格。

为了让用户看到表格的实际效果，在上面的代码中，为<table>标签添加了一个border属性，用于给出表格是带边框的表格，其显示效果如下：

如果去掉 border="1" 或改为 border="0"，其显示效果如下：

从上面的显示效果看，没有边框时，数据仍然按照行和列来组织，但是让人看不到表格的存在，如果组织有关内容还是可以的，对于组织数据不够友好。

同时，表格在没有给出宽度时，浏览器默认以单元格中数据的宽度、边距和单元格间距来确定总宽度。

表格中的行

从上面的例子可以看出，表格的一行使用<tr>标签来定义，并以<tr>开始，</tr>结束。

下面几个例子演示了不同行的效果。

在上面第2个例子中，我们为<table>标签添加了width属性，width属性指定表格的宽度为200个像素。

两个例子的显示效果如下：

可以看到，第2个例子在使用width属性后，其宽度必默认情况要宽，用户可以根据实际情况下借助width属性或CSS来调整表格的宽度。

表格中的单元格

在表格中，一个单元格以<td>开始，以</td>结束。

表格中每行中可以包含多个单元格，但在默认情况下，一个表格中每行的单元格数量必须相等。

以上例子效果如下图所示：

在这个例子中，我们为每个表格的第一个单元格设置了width属性，用于指定其显示的宽度。通过第2个表格可以发现，虽然我们置为第1行第1列设置了宽度，但位于同列的其它单元格的宽度与第一个相同。在实际中，我们可以通过设置首行的单元格宽度为该列指定显示的宽度。

HTML 表格表头

有时，我们可能需要把一些单元格作为表头，这时，我们可以使用<th>标签来定义单元格。也就是说把作为表头的单元格<td>和</td>分别替换成<th>和</th>。th即表示table header。

其效果如下图所示：

在默认情况下，位于<th>标签中的文本以粗体形式显示，同时内容将在单元格中居中显示。为了让其有更好的显示效果，我们可以借助CSS来调整。

带有标题的表格

我们可以使用<caption>标签为表格添加标题。

预览效果如下图所示：

单元格跨列与跨行（合并单元格）

在实际中可能会遇到下面的表格形式。

在HTML中可以使用colspan属性和rowspan属性实现单元格的跨列和跨行显示，亦即横向或纵向合并单元问题。

下面使用两个简单的例子来讲解单元格的合并问题。

其显示效果如下：

单元格边距cellpadding

单元格边距是指单元格中的内容与单元格边框之间的空白。如果把单元格看做一Word中的页面的话，单元格边距就是指Word页面中的上下和左右边距，但与word页面不同的地方是，单元格的四个边距在默认情况下是相同的，而且HTML表格中的每个单元格边距都是相同的。

在HTML中，表格中的单元格边距使用table标签的cellpadding属性进行设置。其可以使用下图来表示。

下面是一个设置单元格边距的例子。

上面这个例子的预览效果如下：

单元格间距cellspacing

单元格间距与单元格边距是不同的概念。单元格间距是指两个临近单元格之间的距离。一个表格可以理解是由很多单元格排列在一起，单元格与单元格之间可以保持一定的距离。这就是单元格间距。

在HTML中，一个表格的单元格间距使用cellspacing属性进行设置。一旦设置了cellspacing属性，则表格中的所有单元格的上下左右的间距都是cellspacing设置的大小。

单元格cellspacing的概念可以使用下图来表示。

下面演示了table cellspacing的使用方法。

 其效果如下图所示：

表格的cellpadding属性和cellspacing属性默认使用像素(px)作为设置的单位。

点击这里在你的浏览器中预览实际效果。

表格的thead、tbody 和 tfoot

<thead>、<tbody>和<tfoot>三个元素用于定义一个表格的表头、主体和页脚部分。这三个元素是非必须的部分。但在实际中可以使用它分别为表格的这三个不同部分定义不同的样式。

thead元素

thead元素用来标记表格的标题行，在没有thead元素的情况下，表格中的行都视为表格的主体部分。

thead元素位于所有<tr>元素的前边，一个thead元素应该至少包含一个<tr>标签。

tbody元素

tbody元素用于定义表格的主体内容，tbody元素位于thead元素之后。

tbody元素可以包含多个<tr>标签，即表格的主体部分可以有多行构成。

tfoot元素

tfoot元素用于定义表格的尾行。但这个元素应位于thead元素之后，tbody元素和<tr>元素之前。

下面是使用thead、tbody和tfoot的例子。

其预览效果如下：

源代码与表格各部分的对应关系如下图所示：

读者也可以点击这里查看预览效果。

表格的colgroup和col元素

在HTML 表格中，内容以行的形式进行组织，在对行运用样式时非常方便，但要是对某一列或某些列设置样式的话比较困难，在不借助其它方法时，需要对该列的每个<td>元素设置或使用样式。

colgroup元素和col元素可以帮助我们对列进行分组，并为不同的列分组设置样式。

colgroup元素

colgroup元素是对一个表格中的列进行分组，并为其中的列设置样式。

colgroup元素定义在<table>和</table>元素之间，位于所有<tr>元素之前。如表格定义了thead、tbody和tfoot，则colgroup元素应位于这三种元素之前；如果表格定义了<caption>元素，则colgroup元素应位于<caption>元素之后。也就是说colgroup元素应出现在表格所有行之前，表标题之后。

colgroup元素有一个重要的属性是span属性，其表示当前colgroup包含的列数。

colgroup元素运用的例子

其预览效果如下图所示：

在上面这个例子中，第一个colgroup对第一列设置了宽度和背景色。第二个colgroup设置了span属性为3，则其设置了是从第2列到第4列的背景色；第三个colgroup设置了最后一列的背景色。

col元素

col元素是colgroup元素的子元素，其作用是为表格的每一列设置相关属性。

col元素对于为表格中的整列设置样式提供了一种方便的途径，运用col元素可以避免重复为列的每个<td>元素设置样式。

col元素也有span属性，其作用也是指定col影响的列数。

因为col元素是colgroup元素的子元素，所以col元素要搭配colgroup使用。

col元素使用的例子

 其预览效果如下：

读者也可以点击这里预览以上两例的实际效果。

---

以上讲解了HTML 表格的运用知识，如有问题请留言，如需转载，请注明出处：翔宇亭IT乐园（http://www.biye5u.com）,并给出本文的链接地址：http://www.biye5u.com/article/HTML5/2023/6595.html。