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;
}