CSS Links & Tables

Link

Links can be styled differently depending on what state they are in.

CSS超链接除了可以设定基本的性质，如：颜色、背景色，还可以根据他们所处的状态来样式化。

四种链接状态分别是:

• a:link - a normal, unvisited link 还没有访问
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it 鼠标划过
• a:active - a link the moment it is clicked 鼠标点击

order rules: 需遵守的顺序规则

• a:hover MUST come after a:link and a:visited
• a:active MUST come after a:hover

Tips：个性化link简单做法，当鼠标划过link时， 改变字体大小 font-size、字体系统 font-family、背景颜色 background-color

Table

Table Border

Note: Both the <table> and the <th> / <td> elements have separate borders.

给表格设置边框的时候，注意表格和单元格都有独立的边框。

The border-collapse property sets whether the table borders are collapsed into a single border or separated.

该性质指定是否合并表格和单元格的边框。合并，如下例：

table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}

Table Text Alignment

The text-align property sets the horizontal alignment, like left, right, or center

该性质设定表格中文本的水平对齐方式。

By default, the text in <th> elements are center-aligned and the text in <td> elements are left-aligned.

默认地，表头元素是中心对齐，单元格里的元素为左对齐。

The vertical-align property sets the vertical alignment, like top, bottom, or middle

该性质设定表格中文本的垂直对齐方式。

By default, the vertical alignment of text in a table is middle (for both <th> and <td> elements).

默认地，表格中文本是垂直居中对齐。

Table Padding

使用padding在 和 元素上设定单元格里内边距。

Caption Side

Specify the placement of a table caption，指定表格标题的位置。

取值：

• top 默认值，在表格上方，水平居中
• bottom

Note:IE8 supports the caption-side property only if a !DOCTYPE is specified.