码农教程 - 一技在手,衣食无忧! tools

HTML 表格

❮ 上一节 下一节 ❯

HTML 表格允许 Web 开发人员将数据排列成行和列。

示例

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
亲自试一试 »

定义 HTML 表

HTML 中的表格由行和列内的表格单元格组成。

示例

一个简单的 HTML 表格：

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>
亲自试一试 »

表格单元格

每个表格单元格由一个定义<td>和一个</td>标签。

td代表表数据。

之间的一切<td>和</td>是表格单元格的内容。

示例

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>
亲自试一试 »

笔记：表格单元格可以包含各种 HTML 元素：文本、图片、列表、链接、其他表格等。

表行

每个表行都以<tr>并以</tr>标签。

tr代表表格行。

示例

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>
亲自试一试 »

一个表中可以有任意多的行；只需确保每行中的单元格数量相同即可。

笔记：有时，一行中的单元格可能比另一行少或多。您将在后面的章节中了解这一点。

表格标题

有时您希望单元格成为表格标题单元格。在这些情况下使用<th>标签而不是<td>标签：

th代表表头。

示例

令第一行为表格标题单元格：

<table>
  <tr>
    <th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>
亲自试一试 »

默认情况下，文本中<th>元素是粗体且居中的，但您可以使用 CSS 更改它。

HTML练习

通过练习测试一下

练习:

添加带有两个表标题的表行。

两个表头的值应为"Name" 和"Age"。

<table>
  
    
    
  
  <tr>
    <td>Jill Smith</td>
    <td>50</td>
  </tr>
</table>

开始练习

HTML 表格标签

Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table

有关所有可用 HTML 标签的完整列表，请访问我们的HTML 标签参考。


❮ 上一节 下一节 ❯