HTML基礎教學(10)--表格的內邊界與外邊界

在 TABLE 標籤中, 有二個兩邊界有關的屬性
cellpadding：內邊界
cellspacing：外邊界
假設有一個表格語法如下

<TABLE border="1">
  <TR>
    <TD>內容</TD>
    <TD>內容</TD>
  </TR>
  <TR>
    <TD>內容</TD>
    <TD>內容</TD>
  </TR>
</TABLE>

您可以點上面的按鈕觀看結果, 它是一個像田字的表格, 但再仔細看, 其實也可以看出它其實是一個大口中包了四個小口

在外框線與內框線之間的距離, 以及內框線與內框線之間的距離, 即是外邊界, 而內框線與內容的距離即是內邊界
這裡將它誇張加大來看看

<TABLE border="1" cellpadding="50" cellspacing="100">
  <TR>
    <TD>內容</TD>
    <TD>內容</TD>
  </TR>
  <TR>
    <TD>內容</TD>
    <TD>內容</TD>
  </TR>
</TABLE>

我們將外邊界設為 100px , 內邊界設為 50px, 如此就能再明顯看出它所設定的效果

再以圖來說明

內部藍框與外部紅框之間的距離, 以及藍框之間的距離, 也就是粉紅色箭頭所指的位置, 即是 cellspacing 所設定的距離
而藍框與其裡面的內容之間的距離, 也就是綠色箭頭所指的位置, 即是 cellpadding 所設定的距離

一般來說, 若沒有指定這兩個屬性時, 它的預設值都是 2 (px), 你可以依自己的喜好或需要來調整這兩個值

--gs--
{HTML基礎教學}{HTML 表格語法}

沒找到你要的東西嗎？歡迎留下你的問題！若是我知道的，我會盡力的回答。