關於CSS表格與列表

標籤：狀態   pos   數字   bottom   實現   div   指定   合并   長度   

一、表格樣式

表格有五種專屬樣式，樣式表如下：

屬性	值	說明	CSS 版本
border-collapse	邊框樣式	相鄰儲存格的邊框樣式	2
border-spacing	長度值	相鄰儲存格邊框的間距	2
caption-side	位置名稱	表格標題的位置	2
empty-cells	顯示值	空儲存格是否顯示邊框	2
table-layout	配置樣式	指定表格的配置樣式	2

1、border-collapse

值	說明	CSS 版本
separate	預設值，儲存格邊框獨立	2
collapse	儲存格相鄰邊框被合并	2

table {border-collapse: collapse;}

解釋：儲存格相鄰的邊框被合并。

2、border-spacing

值	說明	CSS 版本
長度值	0 表示間距，其他使用 CSS 長度值	2

table {border-spacing:10px;}

解釋：border-collapse: separate;的狀態下才有效。因為要設定間距，不能合并。

3、caption-side

值	說明	CSS 版本
top	預設值，標題在上方	2
bottom	標題在下方	2

table {caption-side: bottom;}解釋：設定表格標題。

4、empty-cells

值	說明	CSS 版本
show	預設值，顯示邊框	2
hide	不顯示邊框	2

table {empty-cells: hide;}解釋：儲存格內容為空白是隱藏邊框。

5、table-layout

值	說明	CSS 版本
auto	預設值，內容過長時，展開整個儲存格	2
fixed	內容過長時，不展開整個儲存格	2

table {table-layout: fixed;}解釋：內容過長後，不會展開整個儲存格。

二、列表樣式

列表有四種專屬樣式，樣式表如下：

屬性	值	說明	CSS 版本
list-style-type	類型值	列表中的標記類型	1/2
list-style-image	none或url	映像作為列表標記	1
list-style-position	位置值	排列的相對位置	1
list-style	簡寫屬性	列表的簡寫形式	1

1、list-style-type

值	說明	CSS 版本
none	沒有標記	1
disc	實心圓	1
circle	空心圓	1
square	實心方塊	1
decimal	阿拉伯數字	1
lower-roman	小寫羅馬數字	1
upper-roman	大寫羅馬數字	1
lower-alpha	小寫英文字母	1
upper-roman	大寫英文字母	1

ul {list-style-type: square;}

解釋：列表首碼的標記類型，這裡是 CSS1 版本的。CSS2 版本還包含比如日文、亞美尼亞數字、希臘文等首碼。有興趣的可以參考 CSS 手冊。

2、list-type-position

值	說明	CSS 版本
outside	預設值，標記位於內容框外部	1
inside	標記位於內容框內部	1

ul {width: 120px;list-style-position: inside;}

解釋：標記位於內容框的內部。

3、list-type-image

值	說明	CSS 版本
none	不使用映像	1
url	通過 url 使用映像	1

ul {list-style-image: url(bullet.png);}

解釋：使用圖片作為首碼的標記。

4、list-style

ul {list-style: lower-alpha inside url(bullet.png);}解釋：簡寫形式。

三、其他功能

在中儲存格，我們可以使用 text-align 屬性水平對齊，但是垂直對齊就無法操作了。CSS 提供了 vertical-align 屬性用於垂直對齊。

值	說明	CSS 版本
baseline	內容對象與基準對齊	1
top	內容對象與頂端對齊	1
middle	內容對象與中部對齊	1
bottom	內容對象與底部對齊	1

table tr td {vertical-align: bottom;}

解釋：將儲存格內的內容對象實現垂直對齊。

值	說明	CSS 版本
sub	垂直對齊文本的下標	1
super	垂直對齊文本的上標	1
長度值	設定上下的位移量，可以是負值	1
百分比	同上	1

b {vertical-align: super;}解釋：文本上下標設定。

div span {vertical-align: -200px;}

解釋：負值往下，正值往上。如果預設基準在上面，用負數。如果預設基準在下面，用正值。

關於CSS表格與列表