Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

这是CSS入门教程的第13部分,将介绍更多高级的选择器,以及格式表格的一些特定方法。你将创建一个包含表格的新样例文档,然后对它进行样式排版。

信息: 表格

表格是一个矩形网格中的信息安排。一些表格相当复杂,不同的浏览器对复杂的表格将会有不同的展示结果。

当你设计你的文档时,使用一个表格来表示一系列信息的关系。因为信息的意义依然清晰,所以不同浏览器用稍微不同的方式来展示表格是没有关系的。

创建表格的时候,不要用一些非常规的方式构造特殊的可视化布局,本教程的前一页(布局)使用的技术可以更好的达成目的。

表格结构

在表格中,信息显示在一个个的单元格cell)中.

在页面横向上一条直线的单元格构成了row)。

在一些表格中,行可能被分组。表格开始的特定的行组是表头header)。表格最后的特定行组是表尾footer)。表格中主要的行就是表体body),这些表体也可能被分组。

在页面纵向上一条直线的单元格构成了column),但是在CSS表格中,列的使用是受限的。

示例

选择器那章的基于关系的选择器就是一个五行十个单元格的表格。

第一行是表头,其余四行是表体,没有表尾。

表中有两列。

本教程仅仅涵盖简单表格,其呈现结果完全可以预测。在一个简单表格里,每个单元格仅占用一行一列。你可以用CSS将一个单元格扩展到多行或者多列来构造复杂表格,但是这样的表格已超出了这个基本教程所讲述的范围。

边框

单元格没有外边距。

但是单元格有边框和内边距。默认情况下,边框被表格的border-spacing属性值间隔。你也可以通过设置表格的border-collapse属性值为collapse来完全移除间隔。

示例

这有三个表格。

左边的表格有0.5 em的边框间隔,中间的表格是0边框间隔,右边的表格是拥有collapse的边框。

Clubs Hearts
Diamonds Spades
Clubs Hearts
Diamonds Spades
Clubs Hearts
Diamonds Spades

标题

<caption>元素是用在整个表格的一个标签。默认下,它显示在表格的顶部。

可以设置<caption>caption-side属性值为bottom来将标签移到表格的底部。

想要样式化caption的文本,可以使用任何常规的文本属性。

示例

这个表格有一个在底部的标题。

#demo-table > caption {
  caption-side: bottom;
  font-style: italic;
  text-align: right;
}
Suits
Clubs Hearts
Diamonds Spades

空单元格

你可以通过为表格元素指定empty-cells属性值show来显示空单元格(就是其边框和背景)。

你也可以指定empty-cells: hide;来隐藏边框和背景,那么如果一个单元格的父元素设置了背景,背景将通过空单元格显示出来。

实例

这些表格有苍绿色的背景,其单元格有苍灰色的背景和深灰色的边框。

左边的表格,空单元格是显示的。在右边,空单元格是隐藏的。

  Hearts
Diamonds Spades
  Hearts
Diamonds Spades
细节

请查看CSS规范中的表格来获得更多关于表格的细节信息。

规范中有比该教程更进一步的信息,但它不包括浏览器可能会影响复杂表格之间的差异。

实例: 设计表格样式

  1. 创建一个新的HTML文档, doc3.html。 复制粘贴以下内容,请确保通过滚动获取全部内容:
    <!DOCTYPE html>
    <html>
      <head>
        <title>Sample document 3</title>
        <link rel="stylesheet" href="style3.css">
      </head>
      <body>
        <table id="demo-table">
          <caption>Oceans</caption>
          <thead>
            <tr>
              <th></th>
              <th>Area</th>
              <th>Mean depth</th>
            </tr>
            <tr>
              <th></th>
              <th>million km<sup>2</sup></th>
              <th>m</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>Arctic</th>
              <td>13,000</td>
              <td>1,200</td>
            </tr>
            <tr>
              <th>Atlantic</th>
              <td>87,000</td>
              <td>3,900</td>
            </tr>
            <tr>
              <th>Pacific</th>
              <td>180,000</td>
              <td>4,000</td>
            </tr>
            <tr>
              <th>Indian</th>
              <td>75,000</td>
              <td>3,900</td>
            </tr>
            <tr>
              <th>Southern</th>
              <td>20,000</td>
              <td>4,500</td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <th>Total</th>
              <td>361,000</td>
              <td></td>
            </tr>
            <tr>
              <th>Mean</th>
              <td>72,000</td>
              <td>3,800</td>
            </tr>
          </tfoot>
        </table>
      </body>
    </html>
    
  2. 创建一个新的样式表 style3.css。复制粘贴一些内容,通过滚动获取全部内容:
    /*** Style for doc3.html (Tables) ***/
    
    #demo-table {
      font: 100% sans-serif;
      background-color: #efe;
      border-collapse: collapse;
      empty-cells: show;
      border: 1px solid #7a7;
    }
    
    #demo-table > caption {
      text-align: left;
      font-weight: bold;
      font-size: 200%;
      border-bottom: .2em solid #4ca;
      margin-bottom: .5em;
    }
    
    
    /* basic shared rules */
    #demo-table th,
    #demo-table td {
      text-align: right;
      padding-right: .5em;
    }
    
    #demo-table th {
      font-weight: bold;
      padding-left: .5em;
    }
    
    
    /* header */
    #demo-table > thead > tr:first-child > th {
      text-align: center;
      color: blue;
    }
    
    #demo-table > thead > tr + tr > th {
      font-style: italic;
      color: gray;
    }
    
    /* fix size of superscript */
    #demo-table sup {
      font-size: 75%;
    }
    
    /* body */
    #demo-table td {
      background-color: #cef;
      padding:.5em .5em .5em 3em;
    }
    
    #demo-table tbody th:after {
      content: ":";
    }
    
    
    /* footer */
    #demo-table tfoot {
      font-weight: bold;
    }
    
    #demo-table tfoot th {
      color: blue;
    }
    
    #demo-table tfoot th:after {
      content: ":";
    }
    
    #demo-table > tfoot td {
      background-color: #cee;
    }
    
    #demo-table > tfoot > tr:first-child td {
      border-top: .2em solid #7a7;
    }
    
  3. 在浏览器打开文档,它将看起来像下面一样:

    Oceans

      Area Mean depth
      million km2 m
    Arctic: 13,000 1,200
    Atlantic: 87,000 3,900
    Pacific: 180,000 4,000
    Indian: 75,000 3,900
    Southern: 20,000 4,500
    Total: 361,000  
    Mean: 72,000 3,800
  4. 对比样式表里显示表格的规则来确保你理解每一条规则的效果。如果你发现你不明白某一条,注释掉,然后刷新浏览器来看看发生什么。下面是关于该表格一些注意事项:
    • 标题是放在表格边框的外面的;
    • 如果你在可选项中设置了最小点尺寸,它可能会影响km2这样的上标;
    • 有三个空单元格,其中两个显示了表格的背景色,第三个有单元格自己的背景和上边框;
    • 冒号是通过样式表来添加的。
挑战

更改样式表来使表格想下面一样显示:

  Area Mean depth
  million km2 m
Arctic: 13,000 1,200
Atlantic: 87,000 3,900
Pacific: 180,000 4,000
Indian: 75,000 3,900
Southern: 20,000 4,500
Total: 361,000  
Mean: 72,000 3,800

Oceans

查看挑战的答案。

接下来?

这是本教程关于CSS属性和值的最后一页。请查看CSS规范中的完全属性表来获得完整的属性和值的信息。

下一页将再次着眼于CSS样式表的目的和结构。

文档标签和贡献者

 此页面的贡献者: Harvesty, mengzyou, ziyunfei, teoli, Chajn, aztack
 最后编辑者: Harvesty,