CSS Styling - Tables

Table Borders

    用border這個property可以指定邊界

    範例

• table, th, td
• {
•     border: 1px solid black;
• }
• 將table,th,td這三個HTML的元素設定其邊界為1px,實心黑線
• 原W3School的Demo

Collapse Borders

    border-collapse這個property用來讓邊界合成一個

    範例

• table
• {
•     border-collapse:collapse;
• }
• table,th, td
• {
•     border: 1px solid black;
• }
• 先設定table這個element的邊界合成一個
• 在設定table,th,td這三個element的border為1px 實心黑線
• table這個element會合成
• table
• {
•     border-collapse:collapse;
•     border: 1px solid black;
• }
• 原W3School的Demo

Table Height and Width

    一個table的高度與寬度是由height跟width這兩個property決定的

    範例

• table 
• {
•     width:100%;
• }
• th
• {
•     height:50px;
• }
• 將table的寬設定為整個畫面寬度的100%
• 而th的高度為50px
• 原W3School的Demo

Table Text Alignment

   table內文字對齊的設定需要靠 text-align and vertical-align 這兩個propertes

    範例1

• td
  {
      text-align:right;
  }
• 對於td這個element,設定其文字對其方向為靠右
• 原W3School的Demo

    範例2

• td
  {
      height:50px;
      vertical-align:bottom;
  }
• 設定td這個元素內的文字垂直對其方向為向下 //還可以設定為top,middle
• 原W3School的Demo

Table Padding

    padding這個property就是設定離四個邊的距離

    範例

• td
  {
      padding:15px;
  }
• 在td這個element內的文字會離四個邊有15px的距離
• 原W3School的Demo

Table Color

    直接看底下的範例!

    範例

• table, td, th
  {
      border:1px solid green;
  }
  th
  {
      background-color:green;
      color:white;
  }
• 將table,td,th這三個elements的邊設定為1px粗的實心綠線
• th的背景顏色為綠色,th裡面的文字為白色
• 原W3School的Demo