二维码

HTML 表格

HTML 表格

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

1
2
3
4
5
6
7
8
| 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 中的表格由行和列内的表格单元格组成。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
一个简单的 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>

表格单元格

每个表格单元格都由 a 和 tag 定义。<td>``</td>

td代表表数据。

和之间的所有内容都是表单元格的内容。<td>``</td>

1
2
3
4
5
6
7
<table>  
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>

注意: 表格单元格可以包含 各种 HTML 元素:文本、图像、列表、链接、其他表格等。

表行

每个表行都以 a 开头,以 tag 结尾。<tr>``</tr>

tr代表表行。

1
2
3
4
5
6
7
8
9
10
11
12
<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代表表头。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
让第一行成为表头单元格:

<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>

默认情况下,元素中的文本 是粗体和居中,但你可以用 CSS 来改变它。<th>

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 标记参考]。