1. 程式人生 > >9、CSS 表格樣式

9、CSS 表格樣式

vertica 表格樣式 bsp right nbsp 表格 距離 blue back

表格邊框

如需在 CSS 中設置表格邊框,請使用 border 屬性。

下面的例子為 table、th 以及 td 設置了藍色邊框:

table, th, td
  {
  border: 1px solid blue;
  }

折疊邊框

border-collapse 屬性設置是否將表格邊框折疊為單一邊框:

table
  {
  border-collapse:collapse;
  }

table,th, td
  {
  border: 1px solid black;
  }

表格內邊距

如需控制表格中內容與邊框的距離,請為 td 和 th 元素設置 padding 屬性:

td
  {
  padding:15px;
  }

表格文本對齊

text-align 和 vertical-align 屬性設置表格中文本的對齊方式

text-align 屬性設置水平對齊方式,比如左對齊、右對齊或者居中:

td
  {
  text-align:right;
  }

vertical-align 屬性設置垂直對齊方式,比如頂部對齊、底部對齊或居中對齊:

td
  {
  height:50px;
  vertical-align:bottom;
  }

表格顏色

下面的例子設置邊框的顏色,以及 th 元素的文本和背景顏色:

table, td, th
  
{ border:1px solid green; } th { background-color:green; color:white; }

9、CSS 表格樣式