HTML教程 #7：掌握表格标签（ table、tr、td）的使用方法

2023-06-30

摘要: 当使用 HTML 创建表格时，可以使用以下标签来定义表格的结构和内容：1. `table`：用于创建表格的容器。所有的表格标签都应该位于`table`标签之内。 - 示例：`table/table`2. `tr`：用于定义表格的行。所有的表格行都 ...

当使用 HTML 创建表格时，可以使用以下标签来定义表格的结构和内容：

1. `<table>`：用于创建表格的容器。所有的表格标签都应该位于`<table>`标签之内。

- 示例：`<table></table>`

2. `<tr>`：用于定义表格的行。所有的表格行都应该位于`<table>`标签内部，并使用`<tr>`标签进行包裹。

- 示例：`<tr></tr>`

3. `<td>`：用于定义表格的数据单元格。所有的单元格都应该位于`<tr>`标签内部，并使用`<td>`标签进行包裹。

- 示例：`<td></td>`

以下是一个简单的表格示例，展示了如何使用这些标签来创建一个包含学生信息的表格：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>成绩</th>
  </tr>
  <tr>
    <td>小花</td>
    <td>20</td>
    <td>85</td>
  </tr>
  <tr>
    <td>小猪</td>
    <td>22</td>
    <td>90</td>
  </tr>
  <tr>
    <td>小猫</td>
    <td>19</td>
    <td>78</td>
  </tr>
</table>

在这个例子中，`<table>` 标签用于创建整个表格的容器。`<tr>` 标签用于定义表格的行，包裹了每一行的单元格。`<td>` 标签用于定义表格的数据单元格，包裹了每一个单元格中的内容。

表头使用`<th>`标签来定义，放置在第一个`<tr>`标签中。表格数据使用`<td>`标签来定义，放置在每个数据行的`<tr>`标签中。

可以根据需要添加更多的行和单元格，并在单元格中填充具体的数据。这样就可以创建出一个包含结构化数据的表格。

查看全文

上一篇：HTML教程 #6：表格基础——学习如何创建HTML表格以展示数据下一篇：HTML教程 #8：设置HTML表格的标题、边框和样式

HTML教程 #7：掌握表格标签（ table、tr、td）的使用方法

相关阅读

热门文章