Design Code 設計密碼

表格邊框

如需在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;
  }