HTML具有一组元素，可以在HTML文档中创建表。本文介绍了如何在HTML文档中创建表格。

可以使用CSS为HTML表格设置样式。我已经在有关CSS表样式的教程中说明了如何。可以通过HTML属性(如" align"和" valign")和CSS属性来设置表格的某些方面。我更喜欢在可能的情况下使用CSS属性。

表格元素

可以使用<table>元素创建表。每个表均以<table>标记开头，并以</ table>结束标记结尾。这是table元素的外观：

<table>

</table>

<tr>元素定义一个表行(水平)，而<td>(表数据)元素定义一个单元格。这两个元素嵌套在table元素内。这是一个例子：

<table>
    <tr>
        <td> cell 1 </td>
        <td> cell 2  </td>
    </tr>
    <tr>
        <td> cell 3  </td>
        <td> cell 4 </td>
    </tr>
</table>

本示例定义了一个具有2个表行的表，每行有2个表单元格。结果是一个具有两行(水平)和两列(垂直)的表。

表格在浏览器中的外观如下：

边框属性

我们可以使用border属性在HTML表格周围显示边框。 " border"属性值应设置为数字。数字定义边框的粗细(以像素为单位)。这是带有边框的表格的示例。

<table border="1">
    <tr>
        <td> cell 1</td>
        <td> cell 2</td>
    </tr>
    <tr>
        <td> cell 3</td>
        <td> cell 4</td>
    </tr>
</table>

本示例定义一个边框厚度为1像素的表格。

这是上面带边框的表格在浏览器中的外观：

注意如何在每个表格单元格周围绘制边框。

我们可以使用CSS在HTML表格上做更多的边框样式。我已经在关于CSS边框的教程中解释了CSS中的边框样式选项。

cellspacing和cellpadding属性

我们可以设置各个表格单元格之间，表格单元格内容之间以及单元格边框之间应有多少空间。我们可以使用" cellspacing"和" cellpadding"属性来实现。

" cellspacing"属性设置了单元之间应该有多少像素空间。这是一个使用10作为" cellspacing"的示例：

<table cellspacing="10" border="1">
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
    <tr>
        <td>Cell 3</td>
        <td>Cell 4</td>
    </tr>
</table>

表格在浏览器中的外观如下：

" cellpadding"属性设置单元格的内容和单元格边框之间应该有多少空间。这是一个使用10作为" cellpadding"的示例：

<table cellpadding="10" border="1">
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
    <tr>
        <td>Cell 3</td>
        <td>Cell 4</td>
    </tr>
</table>

表格在浏览器中的外观如下：

最后，这是当同时使用10作为cellspacing和cellpadding时表格的外观：

我们还可以通过CSS属性border-spacing和padding(在表格单元格上)设置单元格间距和单元格填充。

Thead，tfoot和tbody元素

HTML表可以定义表头<thead>和表脚<tfoot>。如果在打印页面时出现分页符，这些元素可确保在每个页面上自动显示工作台头和工作台脚。这是一个例子：

<table border="1">
    <thead>
    <tr>
        <th>Homepage 1</th>
        <th>Homepage 2</th>
        <th>Homepage 3</th>
    </tr>
    </thead>

    <tfoot>
    <tr>
        <td>1.2 Mio.</td>
        <td>1.5 Mio.</td>
        <td>2.1 Mio.</td>
    </tr>
    </tfoot>

    <tbody>
    <tr>
        <td>Europe</td>
        <td>America</td>
        <td>Asia</td>
    </tr>
    <tr>
        <td>Copenhagen</td>
        <td>New York</td>
        <td>Bangkok</td>
    </tr>
    </tbody>

</table>

注意，也定义了一个" tbody"部分。

上表在浏览器中的外观如下：

注意现在如何强调thead元素内的表行文本。还要注意，" tfoot"部分中的表行如何显示在表的底部，即使该行在HTML的" thead"部分之后定义也是如此。

第元素

如果我们回过头来仔细研究本节中的示例，我们会发现thead节使用的是th元素，而不是表其余部分中使用的td元素。

" th"元素定义了表格内部的表格标题单元格。

th元素的行为与td元素相同，但可以使用CSS分别设置样式。

rowpan和colspan属性

使用" rowspan"和" colspan"属性，表格单元可以跨越多行或者多列。

这是一个示例，其中第一行的单元格跨越三列：

<table border="1">
    <tr>
        <td colspan="3" > 1 </td>
        <td> 4 </td>
        <td> 5 </td>
    </tr>
    <tr>
        <td> a </td>
        <td> b </td>
        <td> c </td>
        <td> d </td>
        <td> e </td>
    </tr>
</table>

表格在浏览器中的外观如下：

请注意，与第二行相比，第一行的第一个单元格如何跨越3个单元格(列)。

要使一列跨越多行，我们可以使用rowspan属性。这里是一个例子：

<table border="1">
    <tr>
        <td> 1  </td>
        <td rowspan="2" > 2  </td>
        <td> 3  </td>
    </tr>
    <tr>
        <td> a  </td>

        <td> c  </td>
    </tr>
</table>

表格在浏览器中的外观如下：

单元格不一致

请注意，第一行的第二个单元格现在如何跨越两行。因此，我们只需要在第二行中定义2个单元格，而不是在第一行中定义3个单元格。

align和valign属性

如果表格单元格大于文字，则可以定义表格单元格中文字的对齐方式。看一下这张桌子：

请注意，第二个单元格中的文本在单元格的中间垂直浮动，而在单元格的左侧水平浮动。我们可以使用align和valign属性更改文本的对齐方式。

" align"属性使表格单元格的内容水平对齐。我们可以使用以下值：

这是同一张表，但在第二个单元格中具有右对齐：

要实现这种右对齐，我们要做的就是在要应用对齐方式的td元素上设置" align =" right"`属性。这是一个简单的示例：

<td align="right"></td>

我们还可以使用valign属性进行垂直对齐。这是一个例子：

第二个单元格的内容现在朝着底部对齐。这是带有valign属性的td元素的HTML外观：

<td valign="bottom"></td>

这是valign属性的有效属性的列表：

我们还可以通过CSS属性text-align和vertical-align来设置水平和垂直对齐方式。

宽度和高度属性

table和td元素的width和height属性可用于控制表格的宽度和高度以及各个单元格。

本示例将表格的宽度设置为300像素：

<table width="300" border="1">
    <tr><td>Cell 1</td></tr>
    <tr><td>Cell 2</td></tr>
</table>

这是表格在浏览器中的外观。请注意，它现在比单元格中的内容宽得多。

我们还可以将表的宽度设置为浏览器窗口宽度或者其父HTML元素的宽度的百分比。为此，我们可以在" width"属性内的数字后面加上一个"％"。这是一个例子：

<table width="50%" border="1">

</table>

该表将占用浏览器窗口宽度的50％或者其父HTML元素宽度的50％。

" table"元素的" height"属性与" width"属性的工作方式相同，不同之处在于修改表的高度。

我们还可以通过CSS的width和height属性设置表格的宽度和高度。

表格单元格的宽度和高度属性

td元素的width和height属性可用于设置每个表格单元格的宽度和高度。当然，每个单元格不能完全具有自己的宽度和高度，因为表格单元格显示为行和列。

这是一个例子：

<table border="1">
    <tr>
        <td width="50" >Cell 1</td>
        <td width="100">Cell 2</td>
    </tr>
    <tr>
        <td>Cell 3</td>
        <td>Cell 4</td>
    </tr>
</table>

这是表格在浏览器中的外观。

请注意，第一行中单元格的宽度如何也定义了第二行同一垂直列中单元格的宽度。

这是将表格单元格的高度设置为50像素的示例：

<table border="1">
    <tr>
        <td height="50">Cell 1</td>
        <td>Cell 2</td>
    </tr>
    <tr>
        <td>Cell 3</td>
        <td>Cell 4</td>
    </tr>
</table>

表格在浏览器中的外观如下：

请注意，第一行中第一个单元格的高度如何设置同一行中所有单元格的高度。

我们还可以将百分比用作宽度和高度。如果使用百分比设置表格单元格的宽度或者高度，则该单元格将获得表格宽度或者高度的百分比。这是一个例子：

<table border="1" height="100">
    <tr>
        <td height="25%">Cell 1</td>
        <td>Cell 2</td>
    </tr>
    <tr>
        <td>Cell 3</td>
        <td>Cell 4</td>
    </tr>
</table>

表格在浏览器中的外观如下：

如我们所见，表格高度为100像素，第一行高度为这100像素的25％= 25像素。

我们也可以通过CSS的width和height属性设置表格单元的宽度和高度。