HTML基礎教學(13)--表格的水平與垂直對齊

水平對齊
在表格中, 當你不做任何的水平對齊設定時, 它是預設靠左的, 若你想要改變對齊方式, 在 TABLE、TD、TR、COL 標籤中, 都有一個 align 的屬性, 都是用來設定水平對齊的, 它有三種值可做設定

• left：靠左對齊


• center：置中對齊


• right：靠右對齊

在 TABLE、TD、TR、COL 標籤中, 雖然都有一個 align 的屬性, 但是它的對象是不同的

當在 TABLE 標籤設定 align 屬性時, 是針對整個表格要在它所在區域的對齊位置, 跟表格的內容無關, 例如

<TABLE align="center" width="100px" border="1">
  <TR>
    <TD>abc</TD>
  </TR>
</TABLE>

在這個例子中, 我們可以看到整個表格會在頁面的正中央, 但裡面的內容仍然是靠左

若要設定某個格子內容的對齊方式, 則要在 TD 標籤中設定, 例如

<TABLE width="100px" border="1">
  <TR>
    <TD align="right">abc</TD>
    <TD>123</TD>
  </TR>
  <TR>
    <TD>xyz</TD>
    <TD>456</TD>
  </TR>
</TABLE>

這裡可以看到第一列的第一個格子內容是靠右的, 其餘都是靠左

若想要設定整列內容的對齊方式, 除了可以一個一個 TD 標籤去做設定之外, 也可以在 TR 標籤中設定, 例如

<TABLE width="100px" border="1">
  <TR align="right">
    <TD>abc</TD>
    <TD>123</TD>
  </TR>
  <TR>
    <TD>xyz</TD>
    <TD>456</TD>
  </TR>
</TABLE>

如此第一列所有的格子內容都會是靠右

若想要設定整欄內容的對齊方式, 則可以在 COL 標籤中設定, 例如

<TABLE width="100px" border="1">
  <COL/>
  <COL align="right"/>
  <TR>
    <TD>abc</TD>
    <TD>123</TD>
  </TR>
  <TR>
    <TD>xyz</TD>
    <TD>456</TD>
  </TR>
</TABLE>

如此第二欄所有的格子內容都會是靠右, 不過 Firefox 目前似乎對 COL 標籤的 align 屬性並不支援 >"<, 所以若你要考慮到 Firefox 的使用者的話, 那麼還是要一個一個 TD 去設定

垂直對齊
目前 HTML 只能對表格的內容設定垂直對齊, 語法是利用 valign 的屬性, 有下面三種值：

• top：靠上對齊


• middle：置中對齊


• bottom：靠下對齊


• baseline：靠上對齊, 但第一行的文字基線要與其他欄的文字基線對齊

主要是設定在 TD 標籤上, 也可以設在 TR 和 COL 上(同樣的, Firefox 目前似乎對 COL 標籤的 valign 屬性並不支援 >"<)

下面簡單的例子可以看出 top、middle、bottom 的效果

<TABLE height="100px" border="1">
  <TR>
    <TD>abc</TD>
    <TD valign="top">abc</TD>
    <TD valign="middle">abc</TD>
    <TD valign="bottom">abc</TD>
  </TR>
</TABLE>

我們也可以看到, 若不設 valign 時, 它預設是置中對齊的

至於 baseline 則用下面的例子來說明

<TABLE border="1" cellpadding="0">
  <TR height="200px" valign="top">
    <TD><font size="7">enjoy<BR>enjoy</font></TD>
    <TD><font size="6">enjoy<BR>enjoy</font></TD>
    <TD>webtech<BR>webtech</TD>
  </TR>
  <TR height="200px" valign="baseline">
    <TD><font size="7">enjoy<BR>enjoy</font></TD>
    <TD><font size="6">enjoy<BR>enjoy</font></TD>
    <TD>webtech<BR>webtech</TD>
  </TR>
  <TR height="100px" valign="baseline">
    <TD>enjoy<BR>enjoy</TD>
    <TD>enjoy<BR>enjoy</TD>
    <TD>webtech<BR>webtech</TD>
  </TR>
  <TR height="200px">
    <TD><font size="7">enjoy<BR>enjoy</font></TD>
    <TD valign="top"><font size="6">enjoy<BR>enjoy</font></TD>
    <TD valign="baseline">webtech<BR>webtech</TD>
  </TR>
</TABLE>

第一列中我們在 TR 上設定靠上對齊, 所以文字的上端可說是都貼著格子的上邊界
而第二列中我們在 TR 上設定對齊方式為 baseline, 此時可看到第二及第三欄有往下移, 這是因為它們的第一行文字是對齊文字基線(所謂的文字基線是指小寫英文字母中 abcdefhiklmnorstuvwxz 等字母的底端, 而 gjpqy 等字母則習慣上在撰寫時都會有往下突出到基線下方的部份)
基本上要字的大小不同時才比較容易看得出效果, 若大小都一樣時, 其實效果就跟 top 差不多, 例如第三列
第四列中, 我們在個別的 TD 中設定 valign, 第一欄不設, 第二欄設 top, 第三欄設 baseline, 若你是使用 IE, 此時可發現第三欄的文字基線位置跟第二欄不一致, 也跟第一欄的位置不一樣, 但是又有點往下移, 其實它應該是假設其他欄位都是設為 baseline 再做對齊, 所以第三欄中文字基線位置跟第二列中的位置是一樣的, 但若你是使用 Firefox, 則可以發現它沒有往下移, 它應該是實際上看有哪些欄設為 baseline, 再用這些欄來對齊, 而這個例子的第四列中只有第三欄有設為 baseline, 所以它的效果就跟 top 一樣

--gs--
{HTML基礎教學}{表格}{對齊}

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