HTML 表格

HTML 表格实例

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
John Doe 80
Adam Johnson 67

Examples在线实例

表格
这个例子演示如何在 HTML 文档中创建表格。
(可以在本页底端找到更多实例。)

HTML 表格

表格由<table>标签来定义。每个表格均有若干行(由<tr>标签定义),每行被分割为若干单元格(由<td>标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

 HTML 表格的基本结构:
<table>…</table>:定义表格
<th>…</th>:定义表格的标题栏(文字加粗)
<tr>…</tr>:定义表格的行
<td>…</td>:定义表格的列

表格实例

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

在浏览器显示如下:
t

HTML 表格和边框属性

如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。
使用边框属性border来显示一个带有边框的表格:

<table border="1">
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>

HTML 表格表头单元格

表格的表头单元格使用<th>标签进行定义。
表格的表头单元格属性主要是一些公共属性,如:aligndirwidthheight
大多数浏览器会把表头显示为粗体居中的文本:

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

在浏览器显示如下:

t2

表格标题

<table>标签中我们可以使用<caption> ... </ caption>标签作为标题,并在表的顶部显示出来。

:此标签在较新版本的HTML / XHTML中已弃用

<table border = "1">
    <caption>这是标题</caption>
    <tr>
        <td>row 1, column 1</td><td>row 1, columnn 2</td>
    </tr>         
    <tr>
        <td>row 2, column 1</td><td>row 2, columnn 2</td>
    </tr>
</table>

HTML表格高度和宽度

<table>标签中您可以使用width(宽)和height(高)属性设置表格宽度和高度。您可以按像素或可用屏幕区域的百分比来指定表格宽度或高度。

<table border = "1" width = "400" height = "150">
    <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
    </tr>
    <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
    </tr>
</table>

HTML表格背景

您可以使用以下方法之一设置HTML表格的背景

:HTML5中不推荐使用bgcolorbackgroundbordercolor属性。不要使用这些属性。

<body>
    <table border = "1" bordercolor = "green" bgcolor = "yellow">
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </table>
</body>

使用background属性需要提供图像 URL 地址:

<table border = "1" bordercolor = "green" background = "/images/test.png">
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
</table>

HTML表格空间

有以下两个属性,用于调整HTML表格中单元格的空间:

<table border = "1" cellpadding = "5" cellspacing = "5">
    <tr>
        <th>Name</th>
        <th>Salary</th>
    </tr>
    <tr>
        <td>其琛</td>
        <td>5000</td>
    </tr>
    <tr>
        <td>曼迪</td>
        <td>7000</td>
    </tr>
</table>

HTML合并单元格

<table border = "1">
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
    <tr>
        <td rowspan = "2">Row 1 Cell 1</td>
        <td>Row 1 Cell 2</td>
        <td>Row 1 Cell 3</td>
    </tr>
    <tr>
        <td>Row 2 Cell 2</td>
        <td>Row 2 Cell 3</td>
    </tr>
    <tr>
        <td colspan = "3">Row 3 Cell 1</td>
    </tr>
</table>

HTML表格头部、主体、页脚

表格可以分为三个部分 - 头部,主体和页脚,如同word文档中页面的页眉、正文、页脚。每个页面保持相同,而正文是表格的主要内容持有者。
头部,主体和页脚的对应的三个标签是:

表可以包含多个<tbody>元素以指示不同的页面。
但值得注意的是<thead><tfoot>标签应出现在<tbody>之前:

<table border = "1" width = "100%">
    <thead>
        <tr>
            <td colspan = "4">This is the head of the table</td>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <td colspan = "4">This is the foot of the table</td>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
            <td>Cell 4</td>
        </tr>
    </tbody>         
</table>

HTML表格的嵌套

您可以在另一个表中使用一个表。可以使用<table>内的几乎所有标签。

<table border = "1" width = "100%">
    <tr>
        <td>
            <table border = "1" width = "100%">
                <tr>
                    <th>Name</th>
                    <th>Salary</th>
                </tr>
                <tr>
                    <td>其琛</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>曼迪</td>
                    <td>7000</td>
                </tr>
            </table>
        </td>
    </tr>       
</table>

Examples本站实例
没有边框的表格
本例演示一个没有边框的表格。

表格中的表头(Heading)
本例演示如何显示表格表头。

带有标题的表格
本例演示一个带标题 (caption) 的表格

跨行或跨列的表格单元格
本例演示如何定义跨行或跨列的表格单元格。

表格内的标签
本例演示如何显示在不同的元素内显示元素。

单元格边距(Cell padding)
本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。

单元格间距(Cell spacing)
本例演示如何使用 Cell spacing 增加单元格之间的距离。

HTML 表格标签

标签 描述
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚