表格邊框

如需在 CSS 中設(shè)置表格邊框，請(qǐng)使用 border 屬性。

下面的例子為 table、th 以及 td 設(shè)置了藍(lán)色邊框：

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

親自試一試

請(qǐng)注意，上例中的表格具有雙線條邊框。這是由于 table、th 以及 td 元素都有獨(dú)立的邊框。

如果需要把表格顯示為單線條邊框，請(qǐng)使用 border-collapse 屬性。

折疊邊框

border-collapse 屬性設(shè)置是否將表格邊框折疊為單一邊框：

table
  {
  border-collapse:collapse;
  }

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

親自試一試

表格寬度和高度

通過 width 和 height 屬性定義表格的寬度和高度。

下面的例子將表格寬度設(shè)置為 100%，同時(shí)將 th 元素的高度設(shè)置為 50px：

table
  {
  width:100%;
  }

th
  {
  height:50px;
  }

親自試一試

表格文本對(duì)齊

text-align 和 vertical-align 屬性設(shè)置表格中文本的對(duì)齊方式。

text-align 屬性設(shè)置水平對(duì)齊方式，比如左對(duì)齊、右對(duì)齊或者居中：

td
  {
  text-align:right;
  }

親自試一試

vertical-align 屬性設(shè)置垂直對(duì)齊方式，比如頂部對(duì)齊、底部對(duì)齊或居中對(duì)齊：

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

親自試一試

表格內(nèi)邊距

如需控制表格中內(nèi)容與邊框的距離，請(qǐng)為 td 和 th 元素設(shè)置 padding 屬性：

td
  {
  padding:15px;
  }

親自試一試

表格顏色

下面的例子設(shè)置邊框的顏色，以及 th 元素的文本和背景顏色：

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

th
  {
  background-color:green;
  color:white;
  }

親自試一試

CSS Table 屬性