上一篇：CSS 列表樣式(ul) 下一篇：CSS 盒子模型

CSS Table(表格)

使用 CSS 可以使 HTML 表格更美觀。

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Berglunds snabbk?p	Christina Berglund	Sweden
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
K?niglich Essen	Philip Cramer	Germany
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy
North/South	Simon Crowther	UK
Paris spécialités	Marie Bertrand	France
The Big Cheese	Liz Nixon	USA
Vaffeljernet	Palle Ibsen	Denmark

表格邊框

指定CSS表格邊框，使用border屬性。

下面的例子指定了一個(gè)表格的Th和TD元素的黑色邊框：

實(shí)例

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

運(yùn)行代碼 ?

請注意，在上面的例子中的表格有雙邊框。這是因?yàn)楸砗蛅h/ td元素有獨(dú)立的邊界。

為了顯示一個(gè)表的單個(gè)邊框，使用 border-collapse屬性。

折疊邊框

border-collapse 屬性設(shè)置表格的邊框是否被折疊成一個(gè)單一的邊框或隔開：

實(shí)例

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

運(yùn)行代碼 ?

表格寬度和高度

Width和height屬性定義表格的寬度和高度。

下面的例子是設(shè)置100％的寬度，50像素的th元素的高度的表格：

實(shí)例

table { width:100%; } th { height:50px; }

運(yùn)行代碼 ?

表格文字對齊

表格中的文本對齊和垂直對齊屬性。

text-align屬性設(shè)置水平對齊方式，向左，右，或中心：

實(shí)例

td { text-align:right; }

運(yùn)行代碼 ?

垂直對齊屬性設(shè)置垂直對齊，比如頂部，底部或中間：

實(shí)例

td { height:50px; vertical-align:bottom; }

運(yùn)行代碼 ?

表格填充

如果在表的內(nèi)容中控制空格之間的邊框，應(yīng)使用td和th元素的填充屬性：

實(shí)例

td { padding:15px; }

運(yùn)行代碼 ?

表格顏色

下面的例子指定邊框的顏色，和th元素的文本和背景顏色：

實(shí)例

table, td, th { border:1px solid green; } th { background-color:green; color:white; }

運(yùn)行代碼 ?

中文字幕一区二区人妻电影,亚洲av无码一区二区乱子伦as ,亚洲精品无码永久在线观看,亚洲成aⅴ人片久青草影院按摩,亚洲黑人巨大videos

CSS Table(表格)

表格邊框

實(shí)例

折疊邊框

實(shí)例

表格寬度和高度

實(shí)例

表格文字對齊

實(shí)例

實(shí)例

表格填充

實(shí)例

表格顏色

實(shí)例

更多實(shí)例