HTML基礎教學(11)--表格的框線

之前有提到過, 表格的框線是利用 TABLE 標籤的 border 屬性來做設定, 屬性值代表框線的粗細, 不過是設定最外框的粗細, 例如

<TABLE border="5">
  <TR>
    <TD>A</TD>
    <TD>B</TD>
  </TR>
  <TR>
    <TD>C</TD>
    <TD>D</TD>
  </TR>
</TABLE>

另外, 有時候我們可能會遇到一點怪事, 尤其當 HTML 內容是由資料庫內容所組成的, 來看看下面的例子(請點按鈕觀看結果)

<TABLE border="1">
  <TR>
    <TD>A</TD>
    <TD>B</TD>
  </TR>
  <TR>
    <TD>C</TD>
    <TD></TD>
  </TR>
</TABLE>

咦~~!!, 怎麼有一個內框不見了, 沒有顯示出來, 其實這是因為當 TD 標籤內沒有內容時, TD 的框就會消失, 我也不清楚 HTML 為何要這樣設計 >"<, 不過沒關係, 我們可以用一些技巧來讓框線出現, 就是放個空格給它, 讓它實際上有內容, 且呈現給使用者看時又好像只空的, 不過這個空格不是單純的空格, 例如下面這樣還是沒有用的

<TABLE border="1">
  <TR>
    <TD>A</TD>
    <TD>B</TD>
  </TR>
  <TR>
    <TD>C</TD>
    <TD> </TD>
  </TR>
</TABLE>

一個按 SPACE 按鈕所打出來的空格 " " , 對於 HTML 而言不見得會把它真的當成空格, 例如在網頁內打上

在這之後有五個空格     在這之前有五個空格

執行的結果其實相當於只有一個空格, 這樣的設計我想應該是為了方便於原始檔在撰寫時的排版, 那麼若真的想在執行結果中呈現出五個空格, 那該怎麼做呢, 此時就要用到空格的替代編碼 &nbsp; , 在 HTML 中, &nbsp; 就是空格的意思, 這種編碼叫做 HTML編碼, 通常是為了一些特殊的字元, 例如用鍵盤打不出來的字元, 或是與 HTML 有衝突的字元, 這個我們以後再找機會詳談
所以剛剛的例子就要變成是

在這之後有五個空格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在這之前有五個空格

如此才行
同理, 在 TD 中也要用 &nbsp; 它才會認定它真的有內容

<TABLE border="1">
  <TR>
    <TD>A</TD>
    <TD>B</TD>
  </TR>
  <TR>
    <TD>C</TD>
    <TD>&nbsp;</TD>
  </TR>
</TABLE>

--gs--
{HTML基礎教學}{表格框線的變化}{HTML編碼}

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