HTML基礎教學(12)--表格的欄寬與列高

在沒有做任何欄寬及表格寬度設定時, 欄寬基本上是會依內容自動調整的, 例如

<TABLE border="1">
  <TR>
    <TD>A</TD>
    <TD>BBB, BBB</TD>
    <TD>C</TD>
  </TR>
  <TR>
    <TD>D</TD>
    <TD>E</TD>
    <TD>FFFFFFF, FFF</TD>
  </TR>
</TABLE>

我們可以看到, 第一欄的寬度, 由於兩列中的內容都只有一個字母, 所以寬度就是只有大約一個字母的寬度, 而第二欄中, 第一列的內容比第二列的內容要來得寬, 故欄寬是以內容較寬的那一列來做為欄寬的基準, 所以第二欄的寬度約有8個字母的寬度, 同樣的, 第三欄是第二列中的內容比較寬, 所以是用第二列的內容做為欄寬的基準

但是, 由於 TABLE 標籤在預設的情況下, 總寬最大不會超過頁面的寬度, 所以若內容太多時, 就會自動換行

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

不過前題是要有可以換行的地方, 例如中文字或空格, 若是像下面這樣, 是無法自動換行的

<TABLE border="1">
  <TR>
    <TD>WWWWWWWWWWWWWWWWWWWWWWWWW</TD>
    <TD>WWWWWWWWWWWWWWWWWWWWWWWWW</TD>
    <TD>WWWWWWWWWWWWWWWWWWWWWWWWW</TD>
    <TD>WWWWWWWWWWWWWWWWWWWWWWWWW</TD>
    <TD>WWWWWWWWWWWWWWWWWWWWWWWWW</TD>
    <TD>WWWWWWWWWWWWWWWWWWWWWWWWW</TD>
    <TD>WWWWWWWWWWWWWWWWWWWWWWWWW</TD>
    <TD>WWWWWWWWWWWWWWWWWWWWWWWWW</TD>
    <TD>WWWWWWWWWWWWWWWWWWWWWWWWW</TD>
  </TR>
</TABLE>

在 TD 標籤中, 有個 width 屬性, 可以用來設定每一欄的寬度, 例如

<TABLE border="1">
  <TR>
    <TD width="50px">A</TD>
    <TD width="100px">B</TD>
  </TR>
</TABLE>

一般來說, 若有多列時, 只需定義第一列的 TD 寬度即可, 第二列以後的 TD 會自動比照第一列的 TD 寬度, 因為一般來說, 同一欄的各 TD 寬度會是一樣的, 例如

<TABLE border="1">
  <TR>
    <TD width="50px">A</TD>
    <TD width="100px">B</TD>
  </TR>
  <TR>
    <TD>C</TD>
    <TD>D</TD>
  </TR>
</TABLE>

但若第一列有合併 TD 的狀況, 就必須在第二列的 TD 標籤上設定, 例如

<TABLE border="1">
  <TR>
    <TD colspan="2">A</TD>
    <TD width="50px">B</TD>
  </TR>
  <TR>
    <TD width="50px">C</TD>
    <TD width="100px">D</TD>
    <TD>E</TD>
  </TR>
</TABLE>

或是利用 COL 標籤來設定欄寬

<TABLE border="1">
  <COL width="50px">
  <COL width="100px">
  <COL width="50px">
  <TR>
    <TD colspan="2">A</TD>
    <TD>B</TD>
  </TR>
  <TR>
    <TD>C</TD>
    <TD>D</TD>
    <TD>E</TD>
  </TR>
</TABLE>

註：COL 標籤, 是在設定一整欄的共同屬性, 所以設定在 COL 標籤上的屬性值, 會影響到整欄

而列高, 則可以設在 TD 或 TR 標籤的 height 屬性, 同樣的, 同一列上各 TD 的高度會是一樣的, 所以我習慣上, 若要設定列高時, 會設在 TR 上, 例如

<TABLE border="1">
  <TR height="30px">
    <TD width="50px">A</TD>
    <TD width="100px">B</TD>
  </TR>
  <TR height="70px">
    <TD>C</TD>
    <TD>D</TD>
  </TR>
</TABLE>

另外, 欄寬與列高的長度單位, 也可以用百分比, 此時通常還會搭配設定整個 TABLE 的寬高, 例如

<TABLE width="100%" height="100%" border="1">
  <TR height="40%">
    <TD width="70%">A</TD>
    <TD width="30%">B</TD>
  </TR>
  <TR height="60%">
    <TD>C</TD>
    <TD>D</TD>
  </TR>
</TABLE>

這個意思是整個表格的寬度, 要等於所在區域的整個寬度, 高度也等於所在區域的整個高度, 也就是說, 若這個 TABLE 是直接放在 BODY 標籤下, 那麼這個 TABLE 就會佔滿整個頁面, 若這個 TABLE 是放在其他某個標籤下, 則 TABLE 的大小就跟該標籤的範圍一樣
--gs--
{HTML基礎教學}{表格}

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