天天看點

CSS 表格

使用 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

Laughing Bacchus Winecellars

Yoshi Tannamuri

Canada

Magazzini Alimentari Riuniti

Giovanni Rovelli

Italy

North/South

Simon Crowther

Paris spécialités

Marie Bertrand

France

The Big Cheese

Liz Nixon

USA

Vaffeljernet

Palle Ibsen

Denmark

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

下面的例子指定了一個表格的Th和TD元素的黑色邊框:

table, th, td

{

border: 1px solid black;

}

請注意,在上面的例子中的表格有雙邊框。這是因為表和th/ td元素有獨立的邊界。

為了顯示一個表的單個邊框,使用 border-collapse屬性。

border-collapse 屬性設定表格的邊框是否被折疊成一個單一的邊框或隔開:

table

border-collapse:collapse;

table,th, td

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

下面的例子是設定100%的寬度,50像素的th元素的高度的表格:

width:100%;

th

height:50px;

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

text-align屬性設定水準對齊方式,向左,右,或中心:

td

text-align:right;

垂直對齊屬性設定垂直對齊,比如頂部,底部或中間:

vertical-align:bottom;

如需控制邊框和表格内容之間的間距,應使用td和th元素的填充屬性:

padding:15px;

下面的例子指定邊框的顔色,和th元素的文本和背景顔色:

table, td, th

border:1px solid green;

background-color:green;

color:white;

CSS 表格

制作一個個性表格

這個例子示範了如何建立一個個性的表格。

設定表格标題的位置

這個例子示範了如何定位表格标題。

上一篇: Markdown