HTML中的表格元素介绍

当我们需要在网页中展示有序的数据的时候，可以使用HTML表格元素来实现。在HTML中，表格元素是由<table> 标签和其它标签组成的，下面对表格元素的使用进行详细介绍。

\<table> 标签

<table>标签用来创建一个HTML表格，它是所有表格元素的容器。

语法规则

<table>
   <!-- 表格中的行和列 -->
</table>

属性说明

<table>标签可以使用以下属性：

• border：设置表格的边框宽度，单位为像素。
• cellpadding：设置单元格内容与单元格边框的间距，单位为像素。
• cellspacing：设置单元格与单元格之间的间距，单位为像素。

\<tr> 标签

<tr>标签用来创建表格中的一行。

语法规则

<table>
   <!-- 表格行 -->
   <tr>
      <!-- 表格单元格 -->
      <td></td>
      <td></td>
   </tr>
   <tr>
      <td></td>
      <td></td>
   </tr>
</table>

属性说明

<tr>标签没有特有的属性。

\<th> 标签

<th>标签用于创建表格中的表头单元格，通常加粗并且居中显示。

语法规则

<table>
   <tr>
      <!-- 表头单元格 -->
      <th></th>
      <th></th>
   </tr>
</table>

属性说明

<th>标签可以使用以下属性：

• colspan：设置单元格跨越的列数。
• rowspan：设置单元格跨越的行数。

\<td> 标签

<td>标签用于创建表格中的数据单元格。

语法规则

<table>
   <tr>
      <td></td>
      <td></td>
   </tr>
   <tr>
      <td></td>
      <td></td>
   </tr>
</table>

属性说明

<td>标签可以使用以下属性：

• colspan：设置单元格跨越的列数。
• rowspan：设置单元格跨越的行数。

下面通过几个实例更详细的说明表格元素的使用方法。

示例1

以下是一个带有表头和数据的表格的示例：

<table border="1" cellpadding="10" cellspacing="0">
   <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
   </tr>
   <tr>
      <td>张三</td>
      <td>20</td>
      <td>北京</td>
   </tr>
   <tr>
      <td>李四</td>
      <td>21</td>
      <td>上海</td>
   </tr>
</table>

上述代码将会生成一个边框为1像素，每个单元格的内部边距为10像素，单元格之间的间距为0像素的表格，其中包含了一个表头和两行数据。

示例2

以下是一个跨多行和多列的表格的示例：

<table border="1" cellpadding="10" cellspacing="0">
   <tr>
      <th rowspan="2">姓名</th>
      <th colspan="2">学科</th>
   </tr>
   <tr>
      <th>数学</th>
      <th>语文</th>
   </tr>
   <tr>
      <td rowspan="2">张三</td>
      <td>90</td>
      <td>80</td>
   </tr>
   <tr>
      <td>70</td>
      <td>85</td>
   </tr>
</table>

上述代码将会生成一个边框为1像素，每个单元格的内部边距为10像素，单元格之间的间距为0像素的表格，其中包含了一个跨两行的姓名列和一个跨两列的学科列。同时，第三和第四行包含了姓名为张三的学生的数学和语文成绩。