HTML5与CSS3基础语法自学教程（二十四）-优快云博客

本文首发于【前端课湛】微信公众号。可以在微信里搜索【前端课湛】关注，第一时间看文章！

导读：本小节主要讲解 CSS 中有关表格的样式属性，其中包含了表格布局、表格标题、处理空单元格、单元格边框以及结构伪类选择器等内容。

表格布局

CSS table-layout 属性用来实现表格中单元格的布局，行和列的计算。该属性具有如下 2 个值：

auto：默认值，浏览器会使用自动表布局算法，已达到表格及其单元格的宽度被调整以适应内容。
fixed：表格或表格中列的宽度是由表格中第一行单元格的宽度决定的，后续行的单元格则不会影响表格中列的宽度。

以上两个值产生的结果可能不同，但两者之间最大的差异主要是速度上的。相对 fixed 的速度更快，而 auto 的速度稍慢，原因如下：

fixed：之所以速度快，主要原因是一旦浏览器解析了表格中第一行单元格的宽度就可以呈现整个表格，而不依赖表格中单元格的内容。
auto：表格的 width 属性的值为 auto 就会触发这种方式，无论 table-layout 属性的值是什么。这种方式之所以速度慢，主要原因在于每渲染一个新的单元格都要完成整个表格的布局。

如下示例代码展示了 table-layout 属性的用法：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>table-layout属性</title>
  <style>
    table {
      display: table;
      border-collapse: separate;
      border-spacing: 2px;
      border: 1px solid #139;
      width: 100%;
    }

    td,
    th {
      border: 2px solid #a19;
      padding: .25rem .5rem;
    }

    #example-element {
      table-layout: auto;
    }
  </style>
</head>

<body>
  <table id="example-element">
    <tbody>
      <tr>
        <th>姓名</th>
        <th>地点</th>
      </tr>
      <tr>
        <td>李雷</td>
        <td>北京</td>
      </tr>
      <tr>
        <td>韩梅梅</td>
        <td>上海</td>
      </tr>
      <tr>
        <td>露西</td>
        <td>深圳</td>
      </tr>
      <tr>
        <td>小明</td>
        <td>鹤岗</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

上述示例代码运行效果如下图所示：

02-01.png

表格标题

CSS caption-side 属性用来设置 HTML 页面中表格的 <caption> 元素显示的位置，该属性需要与 <caption> 属性配合使用。该属性的值具有如下 2 个：

top：默认值，表示表格标题显示在表格的上方。
bottom：表示表格标题显示在表格的下方。

如下示例代码展示了 caption-side 属性值为 bottom 时的情况：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>caption-side属性</title>
  <style>
    table,
    th,
    td {
      padding: 5px;
      border: 1px solid black;
    }

    table caption {
      caption-side: bottom;
    }
  </style>
</head>

<body>
  <table>
    <caption>Color names and values</caption>
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">HEX</th>
        <th scope="col">HSLa</th>
        <th scope="col">RGBa</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Teal</th>
        <td><code>#51F6F6</code></td>
        <td><code>hsla(180, 90%, 64%, 1)</code></td>
        <td><code>rgba(81, 246, 246, 1)</code></td>
      </tr>
      <tr>
        <th scope="row">Goldenrod</th>
        <td><code>#F6BC57</code></td>
        <td><code>hsla(38, 90%, 65%, 1)</code></td>
        <td><code>rgba(246, 188, 87, 1)</code></td>
      </tr>
    </tbody>
  </table>
</body>

</html>

上述示例代码运行效果如下图所示：

02-02.png

处理空单元格

CSS empty-cells 属性用来设置 HTML 页面的表格中没有可见内容的单元格的边框和背景是显示还是隐藏。该属性的值具有如下 2 个：

show：默认值，边框和背景正常渲染，与普通元素一样。
hide：边框和背景被隐藏。

如下示例代码展示了 empty-cells 属性的用法：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>empty-cells属性</title>
  <style>
    table {
      display: table;
      border-collapse: separate;
      border-spacing: 2px;
      border: 1px solid #139;
      width: 100%;
    }

    td,
    th {
      border: 2px solid #a19;
      padding: .25rem .5rem;
    }

    #example-element {
      empty-cells: show;
    }
  </style>
</head>

<body>
  <table id="example-element">
    <tbody>
      <tr>
        <th>姓名</th>
        <th>地点</th>
      </tr>
      <tr>
        <td>李雷</td>
        <td>北京</td>
      </tr>
      <tr>
        <td>韩梅梅</td>
        <td>上海</td>
      </tr>
      <tr>
        <td>露西</td>
        <td>深圳</td>
      </tr>
      <tr>
        <td>小明</td>
        <td></td>
      </tr>
    </tbody>
  </table>
</body>

</html>

上述示例代码运行效果如下图所示：

02-03.png

注意：empty-cells 属性只有在 border-collapse 属性值为 separate 时才有效。

单元格边框

CSS border-collapse 属性用来设置 HTML 页面中表格的边框是分离的还是合并的，该属性具有如下 2 个值：

separate：默认值，每个单元格拥有独立的边框。
collapse：相邻的单元格共用同一条边框。

当 border-callapse 属性值为 separate 时称为分隔（separated）模式，是 HTML 表格的传统模式。这种模式下，相邻单元格都拥有不同的边框。边框之间的距离是通过 CSS 的 border-spacing 属性来进行设置。

CSS border-spacing 属性用来设置 HTML 页面中表格的相邻单元格边框之间的距离。该属性的值设置具有如下 2 种方式：

单值：同时设置单元格之间在水平方向和垂直方向的距离。
双值：第一个值用来设置相邻两列的单元格之间的水平方向的距离，第二个值用来设置相邻两行的单元格之间的垂直方向的距离。

如下示例代码展示了 border-callapse 属性值为 separate 时，border-spacing 属性的用法：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>border-spacing属性</title>
  <style>
    table {
      display: table;
      border: 1px solid #139;
      width: 100%;
    }

    td,
    th {
      border: 2px solid #a19;
      padding: .25rem .5rem;
    }

    #example-element {
      border-collapse: separate;
      border-spacing: 5px;
    }
  </style>
</head>

<body>
  <table id="example-element">
    <tbody>
      <tr>
        <th>姓名</th>
        <th>地点</th>
      </tr>
      <tr>
        <td>李雷</td>
        <td>北京</td>
      </tr>
      <tr>
        <td>韩梅梅</td>
        <td>上海</td>
      </tr>
      <tr>
        <td>露西</td>
        <td>深圳</td>
      </tr>
      <tr>
        <td>小明</td>
        <td>鹤岗</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

上述示例代码运行效果如下图所示：