HTML基礎教學(9)--表格基本語法

當我們在網頁上顯示資訊時, 表格是一個很好用的工具, 除了可以將它當做一般的表格來使用之外, 它經常被拿來當做排版的一個工具

我們先來認識一下表格標籤語法, 它主要由 TABLE、TR、TD 三種標籤所組成, 底下是一個最基本的表格語法

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

各標籤主要功用
TABLE：定義一個表格的範圍
TR：定義一個橫列
TD：定義一個格子
註：TABLE 標籤的 border 屬性是在設定框線的粗細, 不指定時預設是沒有框線, 後續會做更詳細的介紹
在 TABLE 標籤裡可以有多個 TR 標籤, 來定義多列, 而在 TR 標籤中也可以有多個 TD 標籤, 來定義該列(TR)中要有幾個格子, 也就是要有幾欄的意思, 上例中就是在定義一個只有一列且只有一個格子的表格, 所以若希望定義一個三列二欄的表格, 其語法就會如下

<TABLE border="1">
  <TR>
    <TD>1</TD>
    <TD>2</TD>
  </TR>
  <TR>
    <TD>3</TD>
    <TD>4</TD>
  </TR>
  <TR>
    <TD>5</TD>
    <TD>6</TD>
  </TR>
</TABLE>

除了這種一般的表格之外, 我們也常有合併格子的需求, 此時就要利用到 TD 標籤的 colspan 與 rowspan 這兩個屬性
colspan：往右合併格子
rowspan：往下合併格子
註：span 有跨越的意思, col 一般為 column (欄)的縮寫, 所以 colspan 為跨欄的合併；而 row 是橫列的意思, 所以 rowspan 是跨列的合併
這兩個屬性的值即是代表要多少個格子合併在一起, 而被合併的 TD 標籤就不用再寫了, 這要特別注意

若我們要將上例中的 1 和 2 這兩個格子合併在一起, 則語法變成如下

<TABLE border="1">
  <TR>
    <TD colspan="2">1與2合併</TD>
  </TR>
  <TR>
    <TD>3</TD>
    <TD>4</TD>
  </TR>
  <TR>
    <TD>5</TD>
    <TD>6</TD>
  </TR>
</TABLE>

原本內容為 2 的格子, 就不要再寫了, 所以在第一個 TR 標籤內只會有一個標籤

若改成 1 和 3 這兩個格子合併在一起, 則語法變成如下

<TABLE border="1">
  <TR>
    <TD rowspan="2">1與3合併</TD>
    <TD>2</TD>
  </TR>
  <TR>
    <TD>4</TD>
  </TR>
  <TR>
    <TD>5</TD>
    <TD>6</TD>
  </TR>
</TABLE>

同樣的, 原本內容為 3 的格子, 就不要再寫了, 所以在第二個 TR 標籤內只會有一個標籤

下面舉個較複雜的例子

<TABLE border="1">
  <TR>
    <TD>01</TD>
    <TD>02</TD>
    <TD>03</TD>
    <TD rowspan="2">04<BR>09</TD>
    <TD rowspan="5">05<BR>10<BR>15<BR>20<BR>25</TD>
  </TR>
  <TR>
    <TD>06</TD>
    <TD colspan="2" rowspan="3">07 08<BR>12 13<BR>17 18</TD>
  </TR>
  <TR>
    <TD>11</TD>
    <TD rowspan="2">14<BR>19</TD>
  </TR>
  <TR>
    <TD>6</TD>
  </TR>
  <TR>
    <TD colspan="2">21 22</TD>
    <TD colspan="2">23 24</TD>
  </TR>
  <TR>
    <TD colspan="5">26 27 28 29 30</TD>
  </TR>
</TABLE>

比較特別的是第二個 TR 標籤裡的第二個 TD 標籤, 它同時指定了 colspan 與 rowspan 這兩個屬性, 值分別為 2 和 3, 其結果表示有 6 個格子要合併在一起(2X3=6)

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

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