Appearance

HTML5教程 - 11 表格 ​

在 HTML 中，表格一般用于按照行和列的方式显示数据。

11.1 表格的完整结构 ​

一个表格完整的结构，通常包括下面几个部分：表格标题、表格头部、表格主题、表格脚注

在 HTML 中，表格不同的部分使用不同的标签，对应关系如下：

  • 表格标题、头部、主体、脚注分别对应不同的标签：<caption> 、<thead>、<tbody> 、<tfoot> ；
  • 表格头部、主体、脚注部分内部是一行一行，对应 <tr> 标签，行中嵌套列，对应 <th> （头部部分）和 td 标签（主体和脚注部分）；
  • 表格的标题、头部、脚注都是可以省略的，不影响表格的显示。

下面就以上面的表格，使用 HTML 来编写：

html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>表格</title>
  </head>

  <body>
    <table>
      <!-- 表格标题 -->
      <caption>
        员工信息
      </caption>

      <!-- 表格头部 -->
      <thead>
        <!-- 行 -->
        <tr>
          <!-- 列 -->
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>学历</th>
        </tr>
      </thead>

      <!-- 表格主体 -->
      <tbody>
        <!-- 第1行数据 -->
        <tr>
          <!-- 列 -->
          <td>张三</td>
          <td>男</td>
          <td>35</td>
          <td>本科</td>
        </tr>
        <!-- 第2行数据 -->
        <tr>
          <td>李四</td>
          <td>女</td>
          <td>24</td>
          <td>硕士</td>
        </tr>
        <!-- 第3行数据 -->
        <tr>
          <td>王五</td>
          <td>男</td>
          <td>42</td>
          <td>大专</td>
        </tr>
      </tbody>

      <!-- 表格脚注 -->
      <tfoot>
        <!-- 行 -->
        <tr>
          <!-- 列 -->
          <td>总计：3人</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>
  • 表格的头部、主体和脚注部分，都是行，然后行中嵌套列，也就是最小的单元格部分。

显示如下：

11.2 表格常用属性 ​

1 边框 ​

在上面的表格没有边框，可以通过 <table> 标签的 border 属性来添加边框。

html
<table border="1">
  • border="1" 表示 1 像素。

显示如下：

可以看到，设置 boder 为 1，改变的是每个单元格的边框和表格整体外部的边框，每个单元格之间是有间隙的。

如果将 border 设置大于1，那么只改变表格整体外部的边框，每个单元格的边框还是 1，例如将 boder 的值改为 10 ：

html
<table border="10">

显示如下：

所以通过 boder 属性是无法改变单元格边框的，得通过 CSS 来调整。

2 宽度 ​

可以通过 <table> 标签的 width 属性来设置表格的整体宽度。

html
<table border="1" width="600">
  • width="600" 表示表格的整个宽度是 600 像素。

显示如下：

3 高度 ​

可以通过 <table> 标签的 height 属性来设置表格的整体高度。

html
<table border="1" width="600" height="300">
  • height="300" 设置的是表格整体的高度最少为 300 像素，但是不会调整表格头部和脚注的高度，剩余到高度归为主体部分。说高度最少为300像素，待会后面讲 thead 的高度再说。

显示如下：

4 单元格间距 ​

上面设置边框以后，会看到每个单元格之间存在间距，可以通过 <table> 标签的 cellspacing 属性来设置表格的单元格间距。

html
<table border="1" width="600" cellspacing="0">
  • cellspacing="0" 设置的是单元格间距为 0，那么每个单元格会靠在一起，但是需要注意，单元格的间隙为0，不是将边框合并。

所以显示如下，单元格的边框靠在了一起：

如果要合并边框，那么需要 CSS 来设置了。

11.3 thead属性 ​

1 高度 ​

<thead> 标签上，设置 border、width、cellspacing 都是不生效的，但支持设置 height。

举个栗子：

html
<table border="1" width="600" height="300" cellspacing="0">
      <!-- 其他：略 -->
  
      <!-- 表格头部设置高度 -->
      <thead height="300">
        
      <!-- 其他：略 -->

显示如下：

上面设置了表格头部高度为 300，表格的高度也是 300，那么表格的头部确实是 300 像素，那么表格的整体高度肯定是大于 300 的，也就是说变为最少 300 像素了。

2 对齐方式 ​

表格头部的内容的对齐方式默认是水平居中和垂直居中。

可以通过如下属性修改水平方向和垂直方向的对齐方式：

  • align：修改水平方向的对齐方式，可以设置为：left、center、right ，对应左、中、右；
  • valign：修改垂直方向的对齐方式，可以设置为：top、middle、bottom，对应上、中、下；

举个栗子：

html
<!-- 设置水平居右，垂直居下 -->
<thead height="100" align="right" valign="bottom">
  • 上面设置头部对齐方式为水平居右，垂直居下。

显示如下：

11.4 tfoot属性 ​

tfoot 的属性和 thead 的属性是一样的，支持 height、align、valign，但是默认的水平对齐方式是居左对齐。

html
<tfoot height="50" align="center" valign="middle">
  • 上面设置水平对齐方式为居中，垂直居中。

显示如下：

11.5 tbody属性 ​

tbody 的标签也支持设置 height、align、valign。

举个栗子：

html
<table border="1" width="600" height="300" cellspacing="0">
  <thead height="100">
  <!-- 其他：略 -->
  
  <!-- 重点，看这里！！！ -->
  <tbody height="50" align="center" valign="middle">
    
  <!-- 其他：略 -->
  <tfoot height="50" align="center" valign="middle">
  • 上面设置了 tbody 高度 50，内容水平和垂直居中。

显示如下：

虽然设置了 tbody 部分的高度是50，但是没有生效，因为设置了表格的整体高度最少为 300，头部高度为100，脚注部分高度为50，那么剩余的高度 300 - 100 - 50 = 150 的高度都是属于 tbody 的，只有设置 tbody 的高度大于 150 ，才能看出效果。

当然，如果不设置表格的整体高度，那么设置了 tbody 的高度为 50 也是不生效的，因为显示中间三行数据，也是要超过50像素的，所以只有设置超过数据显示的高度，才有效果。

11.6 tr属性 ​

<tr> 标签是行，也支持设置 height、align、valign 属性。

举个栗子：

html
<table border="1" width="600" cellspacing="0">
  <tbody>
        <!-- 第1行数据 -->
        <tr height="100" align="center" valign="middle">
  • 上面设置了第一行数据的高度、内容水平和垂直居中。

显示如下：

11.7 th和td属性 ​

<th> 和 <td> 标签都是单元格，只是 <th> 是表格头部中单元格。

<th> 和 <td> 标签支持设置 width、 height、align、valign 属性。

如果给<th> 和 <td> 标签支持设置 width 或 height ，将会改变所在那一列或一行的宽度和高度。

举个栗子：

html
<table border="1" width="600" cellspacing="0">
      <!-- 表格标题，略 -->
      <!-- 表格头部，略 -->
  
      <!-- 表格主体 -->
      <tbody>
        <!-- 第1行数据 -->
        <tr height="50" align="center" valign="middle">
          <!-- 列 -->
          <td width="100" height="100" align="right" valign="bottom">张三</td>
  • 上面设置了 <td> 的宽度和高度，那么将改变所在行的高度、所在列的宽度；当然对齐方式只改变单元格自己。
  • 修改表格头部的 <th> 效果也是一样的。

显示如下：


如果给同一行的多个 <td> 设置高度，那么最大值生效；

如果给同一列的多个 <td> 设置宽度，那么最大值生效；

html
<table border="1" width="600" cellspacing="0">
      <!-- 表格标题，略 -->
      <!-- 表格头部，略 -->

      <!-- 表格主体 -->
      <tbody>
        <!-- 第1行数据 -->
        <tr height="50" align="center" valign="middle">
          <!-- 列 -->
          <td width="100" height="100" align="right" valign="bottom">张三</td>
          <td height="200">男</td>
          <td>35</td>
          <td>本科</td>
        </tr>
        <!-- 第2行数据 -->
        <tr>
          <td width="200">李四</td>
          <td>女</td>
          <td>24</td>
          <td>硕士</td>
        </tr>
        <!-- 略 -->
  • 上面对 张三 所在的 <td> 设置了高度 100，但是在同一行第二列也设置了高度 200，那么将使用最大值 200；
  • 对 张三 所在的 <td> 设置了宽度 100，但是在同一列第二行也设置了宽度 200，那么将使用最大值 200；

显示如下：


上面对表格的各种显示效果进行了设置，例如边框、宽、高等，但是在实际的开发中，这些都不会使用的，对表格样式的各种调整，都是通过 CSS 来控制的。这里学习的属性了解一下，后面学习 CSS 吧。

11.8 跨行与跨列 ​

实现下面这个单元格：

  • 上面的表格 张三 和 李四 的姓名需要跨 3 行，最后一行的总计，需要跨 3 列。

实现思路：

通过 <td> 标签的 rowspan 属性设置跨行， colspan 属性设置跨列。

所以实现上面的代码如下：

html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>表格</title>
  </head>

  <body>
    <table border="1" cellspacing="0">
      <caption>
        学生成绩
      </caption>

      <thead>
        <tr>
          <th width="200">姓名</th>
          <th width="200">课程</th>
          <th width="200">成绩</th>
        </tr>
      </thead>

      <tbody align="center" valign="middle">
        <!-- 第1行数据 -->
        <tr>
          <!-- 设置跨3行 -->
          <td rowspan="3">张三</td>
          <td>语文</td>
          <td>100</td>
        </tr>

        <tr>
          <!-- 这里被跨行了，所以这一行只有2个td -->
          <td>数学</td>
          <td>96</td>
        </tr>

        <tr>
          <!-- 这里被跨行了，所以这一行只有2个td -->
          <td>英语</td>
          <td>98</td>
        </tr>

        <tr>
          <!-- 设置跨3行 -->
          <td rowspan="3">李四</td>
          <td>语文</td>
          <td>95</td>
        </tr>

        <tr>
          <!-- 这里被跨行了，所以这一行只有2个td -->
          <td>数学</td>
          <td>100</td>
        </tr>

        <tr>
          <!-- 这里被跨行了，所以这一行只有2个td -->
          <td>英语</td>
          <td>99</td>
        </tr>
      </tbody>

      <!-- 表格脚注 -->
      <tfoot>
        <tr>
          <!-- 设置跨3列 -->
          <td colspan="3">总计：3人</td>
          <!-- 这里被跨列了，所以只有一个td -->
        </tr>
      </tfoot>
    </table>
  </body>
</html>
  • 按照前面实现思路的图，设置指定的 <tb> 跨行和跨列，然后删除被跨行和跨列占用位置的 <tb> 即可。

显示如下：


这个章节介绍了太多表格相关的属性，其中关于表格样式的设置太多了，实际开发中都是通过 CSS 来设置的，这里了解一下即可。