Appearance

CSS3教程 - 12 表格样式 ​

在 HTML5教程 中的 表格 章节已经介绍了表格的使用，其中一些样式通过 HTML 属性是无法设置的，需要通过 CSS 来实现。

下面就来介绍一下使用 CSS 如何设置表格的样式。


首先准备一份表格，将样式相关的属性都去掉，代码如下：

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

  <body>
    <table>
      <caption>
        学生成绩
      </caption>

      <thead>
        <tr>
          <th>姓名</th>
          <th>课程</th>
          <th>成绩</th>
        </tr>
      </thead>

      <tbody>
        <!-- 第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 -->
          <td colspan="3">总计：3人</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

因为没有样式，也没有边框，所以显示如下：

12.1 边框 ​

下面给表格添加边框：

html
<style>
  table {
    width: 600px;
    border: 1px black solid;
  }
</style>
  • 设置表格的宽度，并添加了 1px 的边框。

显示如下：


可以看到只是表格外面添加了边框，每个单元格并没有边框。

要设置单元格边框，需要针对 <td> 去设置，如下：

css
<style>
  table {
    width: 600px;
    border: 1px black solid;  /* 设置表格边框 */
  }

  td {
    border: 1px black solid;  /* 设置单元格边框 */
  }
</style>

显示如下：


每个单元格设置了边框，但是单元格之间存在间隙，显示并不是我们想要的，我们可以去掉单元格的间隙：

css
<style>
  table {
    width: 600px;
    border: 1px black solid;  /* 设置表格边框 */
    border-spacing: 0;  /* 设置单元格间距为0 */
  }

  td {
    border: 1px black solid;  /* 设置单元格边框 */
  }
</style>
  • 上面通过 border-spacing: 0; 设置单元格间距为 0。

显示如下：


但是单元格间距为 0，是两个单元格的边框合并到一起了，其实边框是变成了 2px，所以这不是好的方法，可以通过 border-collapse 属性合并单元格边框：

html
<style>
  table {
    width: 600px;
    border: 1px black solid;  /* 设置表格边框 */
    border-collapse: collapse;  /* 合并单元格边框 */
  }

  td {
    border: 1px black solid;  /* 设置单元格边框 */
  }
</style>
  • 上面通过 border-collapse: collapse; 合并单元格边框。

显示如下：

12.2 内容对齐方式 ​

表格中的内容，可以通过 vertical-align 设置垂直对齐方式，通过 text-align 设置水平对齐方式。

举个栗子：

html
<style>
  table {
    width: 600px;
    border: 1px black solid;
    border-collapse: collapse; 
  }

  td {
    vertical-align: middle;  /* 垂直居中 */
    text-align: center;  /* 水平居中 */

    height: 40px; /* 设置单元格高度 */
    border: 1px black solid;  
  }
</style>
  • vertical-align 设置垂直对齐方式，取值有：top、middle（默认）、bottom、baseline （基线对齐）。
  • text-align 设置水平对齐方式，取值有：left（默认）、right 、center 。

显示如下：

12.3 背景颜色 ​

背景颜色其实没什么好说的，但是有时候为了表格数据的可读性，会将偶数行和奇数行设置不同的背景颜色。

那么可以通过 CSS 选择器选择奇数行或偶数行，然后设置背景颜色，如下：

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

    <style>
      table {
        width: 600px;
        border: 1px black solid;
        border-collapse: collapse;
      }

      tbody tr:nth-child(odd) {    /* 设置奇数行背景颜色 */
        background-color: #CCCCCC;
      }

      td {
        vertical-align: middle; /* 垂直居中 */
        text-align: center; /* 水平居中 */
        border: 1px black solid; /* 设置单元格边框 */
      }
    </style>
  </head>

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

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

      <!-- 表格主体 -->
      <tbody>
        <tr>
          <td>张三</td><td>男</td><td>35</td><td>本科</td>
        </tr>
        <tr>
          <td>李四</td><td>女</td><td>24</td><td>硕士</td>
        </tr>
        <tr>
          <td>王五</td><td>男</td><td>42</td><td>大专</td>
        </tr>
        <tr>
          <td>赵六</td><td>女</td><td>45</td><td>博士</td>
        </tr>
        <tr>
          <td>陈七</td><td>男</td><td>67</td><td>博士</td>
        </tr>
      </tbody>

      <!-- 表格脚注 -->
      <tfoot>
        <tr>
          <td>总计：4人</td><td></td><td></td><td></td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>
  • 上面通过 tbody tr:nth-child(odd) 设置 tbody 中的奇数行 <tr> 的背景颜色，使用 tbody tr:nth-child(2n+1) 选择器也可以选中奇数行，使用 tr:nth-child(even) 可以选择偶数行。

显示如下：

12.4 元素垂直居中 ​

之前让一个元素在一个元素中居中，介绍了几种方式。

下面介绍一种让一个元素在另一个元素中垂直居中的方式，直接看代码：

html
<!DOCTYPE html>
<html>
  <head>
    <style>
      .outer {
        width: 300px;
        height: 300px;
        background-color: skyblue;
        display: table-cell;  /* 设置为单元格 */
        vertical-align: middle;  /* 内容垂直居中 */
        text-align: center;  /* 内容水平居中 */
      }

      .inner {
        width: 100px;
        height: 100px;
        background-color: lightpink;
      }
    </style>
  </head>

  <body>
    <div class="outer">
      <span>For技术栈</span>
      <div class="inner"></div>
    </div>
  </body>
</html>
  • 首先设置父元素的显示类型为 table-cell，设置为单元格，然后设置父元素的水平和垂直居中方式；
  • 这样行内元素的子元素就可以居中了，但是块元素只能在垂直方向上居中，无法水平居中，要水平居中还是要使用 margin auto 。

显示如下：

内容未完......
查看完整内容 →