布局
这是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;
}
|
空单元格
你可以通过为表格元素指定empty-cells属性值show来显示空单元格（就是其边框和背景）。
你也可以指定empty-cells: hide;来隐藏边框和背景，那么如果一个单元格的父元素设置了背景，背景将通过空单元格显示出来。
这些表格有苍绿色的背景，其单元格有苍灰色的背景和深灰色的边框。
左边的表格，空单元格是显示的。在右边，空单元格是隐藏的。
|
|
实例: 设计表格样式
- 创建一个新的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
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 - 对比样式表里显示表格的规则来确保你理解每一条规则的效果。如果你发现你不明白某一条，注释掉，然后刷新浏览器来看看发生什么。下面是关于该表格一些注意事项：
- 标题是放在表格边框的外面的;
- 如果你在可选项中设置了最小点尺寸，它可能会影响km2这样的上标;
- 有三个空单元格，其中两个显示了表格的背景色，第三个有单元格自己的背景和上边框;
- 冒号是通过样式表来添加的。
更改样式表来使表格想下面一样显示：
Oceans |
查看挑战的答案。
接下来?
Go to Next Section:
媒体这是本教程关于CSS属性和值的最后一页。请查看CSS规范中的完全属性表来获得完整的属性和值的信息。
下一页将再次着眼于CSS样式表的目的和结构。