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

親自試一試

CSS Table 屬性

屬性 描述

border-collapse	設置是否把表格邊框合并為單一的邊框。
border-spacing	設置分隔單元格邊框的距離。
caption-side	設置表格標題的位置。
empty-cells	設置是否顯示表格中的空單元格。
table-layout	設置顯示單元、行和列的算法。

親自試一試 - 更多實例

制作一個漂亮的表格

本例演示如何創造一個漂亮的表格。

顯示表格中的空單元

本例演示是否顯示表格中的空單元。

設置表格邊框之間的空白

本例演示如何設置單元格邊框之間的距離。

設置表格標題的位置

本例演示如何定位表格的標題。

from:?http://www.w3school.com.cn/css/css_table.asp

總結

以上是生活随笔為你收集整理的CSS 表格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。