CSS Table(表格)
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 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屬性。
下面的例子指定了一個表格的Th和TD元素的黑色邊框:
實例
table, th, td
{
border: 1px solid black;
}
請注意,在上面的例子中的表格有雙邊框。這是因為表和th/ td元素有獨立的邊界。
為了顯示一個表的單個邊框,使用 border-collapse屬性。
折疊邊框
border-collapse 屬性設置表格的邊框是否被折疊成一個單一的邊框或隔開:
實例
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
表格寬度和高度
Width和height屬性定義表格的寬度和高度。
下面的例子是設置100%的寬度,50像素的th元素的高度的表格:
實例
table
{
width:100%;
}
th
{
height:50px;
}
表格文字對齊
表格中的文本對齊和垂直對齊屬性。
text-align屬性設置水平對齊方式,像左,右,或中心:
實例
td
{
text-align:right;
}
垂直對齊屬性設置垂直對齊,比如頂部,底部或中間:
實例
td
{
height:50px;
vertical-align:bottom;
}
表格填充
如果在表的內(nèi)容中控制空格之間的邊框,應使用td和th元素的填充屬性:
實例
td
{
padding:15px;
}
表格顏色
下面的例子指定邊框的顏色,和th元素的文本和背景顏色:
實例
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
作者:大學生新聞網(wǎng) 來源:大學生新聞網(wǎng)
- CSS 盒子模型
- 所有HTML元素可以看作盒子,在CSS中,"box model"這一術語是用來設計和布局時使用。
- 03-28 關注:0
- CSS Text(文本)
- 通過CSS的Text屬性,你可以改變頁面中文本的顏色、字符間距、對齊文本、裝飾文本、對文本進行縮進等等,你可以觀察下述的一段簡單的應
- 03-27 關注:2