表格

最新推荐文章于 2025-06-04 19:36:40 发布

转载最新推荐文章于 2025-06-04 19:36:40 发布 · 292 阅读

Web前端专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何使用CSS设计表格，包括表格的基本结构、样式设置及如何处理空单元格等内容。了解如何利用CSS属性如border-collapse和empty-cells来优化表格显示效果。

信息: 表格

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

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

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

表格结构

在表格中，信息显示在一个个的单元格（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

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

Clubs	Hearts
Diamonds	Spades

空单元格

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

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

实例

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

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

Hearts
Diamonds

Hearts
Diamonds

细节

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

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

Hearts
Diamonds

Hearts
Diamonds

实例: 设计表格样式

创建一个新的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>

创建一个新的样式表 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;
}
“`
在浏览器打开文档，它将看起来像下面一样：

Oceans