跳到主要内容

表格

HTML 表格允许 Web 开发人员将数据展示成行和列。例如：

姓名语文分数数学分数总分
郝来吴8999188
刘美溪9188179
李达7867145

创建表格​

HTML 中的表格由行和列的单元格组成。例如：

简单表格
<table>
    <tr>
        <td>姓名</td>
        <td>语文分数</td>
        <td>数学分数</td>
        <td>总分</td>
    </tr>
    <tr>
        <td>郝来吴</td>
        <td>89</td>
        <td>99</td>
        <td>188</td>
    </tr>
    <tr>
        <td>刘美溪</td>
        <td>91</td>
        <td>88</td>
        <td>179</td>
    </tr>
    <tr>
        <td>郝来吴</td>
        <td>78</td>
        <td>67</td>
        <td>145</td>
    </tr>
</table>

<table>和</table>定义一个表格，表格的行和列必须在这两个标签内。 <tr>和</tr>标签定义表格的一行，<td>和</td>标签定义表格的一个单元格。 表格的每一行相同位置的单元格成为一列。

表格行​

每个表格行都以 <tr>标签开头，以</tr>标签结尾。tr代表表格行。 表格可以拥有任意数量的行，只需确保每行中的单元格数量相同即可。

<table>
    <!--这里定义了一行数据-->
    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>物理</td>
        <td>化学</td>
    </tr>
</table>
提示

有时，一行的单元格可能比另一行少或多。这个将在表格跨行和跨列学到。

单元格​

每个表格的单元格都是由<td>和</td>标签定义，之间的所有内容都是单元格的内容。 td代表表格数据。

<html>
    <head>
        <style>
            table,td {
                border:1px solid black;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>物理</td>
                <td>化学</td>
            </tr>
        </table>
    </body>
</html>

about:blank

表头​

如果希望单元格用于定义表头，则应使用<th>标签。

默认情况下，th元素中的文本是粗体和居中，也可以用CSS改变：

<html>
    <head>
        <style>
            table,td, th {
                border:1px solid black;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>物理</th>
                <th>化学</th>
            </tr>
            <tr>
                <td>郝来吴</td>
                <td>90</td>
                <td>100</td>
                <td>98</td>
                <td>100</td>
            </tr>
            <tr>
                <td>刘美溪</td>
                <td>94</td>
                <td>98</td>
                <td>100</td>
                <td>89</td>
            </tr>
        </table>
    </body>
</html>

about:blank

HTML 参考​

名称描述

CSS 参考​

名称描述