CSS表格

CSS 表格,是一種表格屬性,用來改變表格樣式。

CSS 表格屬性,摺疊框線,表格寬度和高度,表格文本對齊,表格內邊距,表格顏色,

CSS 表格屬性

CSS 表格屬性可以幫助您極大地改善表格的外觀。
表格框線
如需在 CSS 中設定表格框線,請使用 border 屬性。
下面的例子為 table、th 以及 td 設定了藍色框線:
table, th, td
{
border: 1px solid blue;
}
請注意,上例中的表格具有雙線條框線。這是由於 table、th 以及 td 元素都有獨立的框線。
如果需要把表格顯示為單線條框線,請使用 border-collapse 屬性。

摺疊框線

border-collapse 屬性設定是否將表格框線摺疊為單一框線:
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}

表格寬度和高度

通過 width 和 height 屬性定義表格的寬度和高度。
下面的例子將表格寬度設定為 100%,同時將 th 元素的高度設定為 50px:
table
{
width:100%;
}
th
{
height:50px;
}

表格文本對齊

text-align 和 vertical-align 屬性設定表格中文本的對齊方式。
text-align 屬性設定水平對齊方式,比如左對齊、右對齊或者居中:
td
{
text-align:right;
}
vertical-align 屬性設定垂直對齊方式,比如頂部對齊、底部對齊或居中對齊:
td
{
height:50px;
vertical-align:bottom;
}

表格內邊距

如需控制表格中內容與框線的距離,請為 td 和 th 元素設定 padding 屬性:
td
{
padding:15px;
}

表格顏色

下面的例子設定框線的顏色,以及 th 元素的文本和背景顏色:
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}

相關詞條

熱門詞條

聯絡我們