HTML中的表格

1. 元素 <table>

HTML 提供了一种用表格结构化展示数据的便捷方式。表格可以组织信息成多行多列，非常适合展示数字数据、日程表、价格表等结构化数据集合。 我们来看看创建表格时常用的标签：<table>, <tr>, <td> 和 <th>。

标签 <table> 是整个表格的容器。它用于标记表格的开始和结束，并包含所有与表格相关的其他标签。

使用 <table> 标签创建表格的示例：

<table>
  <!-- 这里是表格的行和单元格 -->
</table>

标签 <table> 还可以使用 border 属性进一步设置样式，使表格带有边框：

<table border="1">
  <tr>
    <td>示例单元格</td>
  </tr>
</table>

这里的属性 border="1" 会在表格及其单元格周围添加一个边框，使其可见。

2. 元素 <tr>

标签 <tr> 表示表格的行 (table row)。每一行必须在 <tr> 标签中，并且其本身必须包含在 <table> 中。

示例：

<table border="1">
  <tr>
    <td>单元格 1</td>
    <td>单元格 2</td>
  </tr>
  <tr>
    <td>单元格 3</td>
    <td>单元格 4</td>
  </tr>
</table>

这个例子中，表格由两行组成，每一行包含两个单元格。

3. 元素 <td>

标签 <td> (table data) 用于在表格中创建数据单元格。它表示表格中普通的单元格，可以包含文本、图片或其他HTML内容。

使用 <td> 的示例：

<table border="1">
  <tr>
    <td>单元格 1</td>
    <td>单元格 2</td>
  </tr>
</table>

<table border="1">
  <tr>
    <td>单元格 1</td>
    <td>单元格 2</td>
  </tr>
</table>

<td> 单元格是表格的主要内容，位于 <tr> 内。

4. 元素 <th>

标签 <th> (table header) 用来创建表格标题单元格。用 <th> 创建的单元格默认是加粗且居中的。它非常适合用于标示列或行的标题。

带标题的表格示例：

    
<table border="1">
  <tr>
    <th>名字</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>安娜</td>
    <td>25</td>
  </tr>
  <tr>
    <td>伊万</td>
    <td>30</td>
  </tr>
<table border="1">
    
  

    
<table border="1">
  <tr>
    <th>名字</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>安娜</td>
    <td>25</td>
  </tr>
  <tr>
    <td>伊万</td>
    <td>30</td>
</tr>
<table border="1">
    
  

示例中，<th> 用于标示标题“名字”和“年龄”，让用户一眼就能看懂每列代表的含义。