二维码
搜索 ×

HTML 表格

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

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

推荐教程