blogspot 文章中的 table 亂了套

最近花了一些時間研究 google 的 blog (blogspot)，新學期的班級網站打算直接利用 blogspot 的平臺，目前已經有了雛形，剩下的就是開始塞內容。昨天準備放功課表時，才發現，如果直接將我以前做的表格 HTML 語法直接貼到 blogspot 中，哇！慘不忍睹，全亂了套。格線沒出來，格子大小失控......，最嚴重的是格子亂跑。用了那麼久的 blogspot ，從來沒在文章中貼表格，也就沒遇過這樣的問題。
格線沒出來好解決，table tag 中的 border 屬性無效，就利用 css 來設。但是格子大小亂掉、亂跑則是試了半天，沒找到問題。最後請出 google 大神，才知道原來 blogspot 預設會幫我們將按完 Entern 鍵所產生的換行字元變成 HTML 語法中的換行( <br /> )。這項功能主要是因應我們打字時的習慣，讓我們可以少打很多的 <br />。但是對於習慣利用縮排、換行來讓 HTML 語法更具結構化、更清楚的人來說，可是麻煩的開始。
以下面的表格語法來說：

<table border="1">
<tr><td>上-1</td><td>上-2</td></tr>
<tr><td>下-1</td><td>下-2</td></tr>
</table>

它可能被 blogspot 變成了：

<table border="1"><br />
<tr><td>上-1</td><td>上-2</td></tr><br />
<tr><td>下-1</td><td>下-2</td></tr><br />
</table><br />

紅色粗體的部份是 blogspot 多加上去的，如果打字時 Enter 按愈多，則會自動加上更多的 <br />。

本來應該是長這樣的：

上-1	上-2
下-1	下-2

變成這樣：

上-1	上-2
下-1	下-2

格子上下之間的距離被拉大了，因為多了 <br />，如果複雜一點的表格語法就更慘不忍睹。
解決的方法是利用 CSS 讓瀏覽器遇到表格內的 <br /> 就「視而不見」不處理。下面紅色粗體的部份就是關鍵。

<style type="text/css"> .nobrtable br {display:none} </style>

<div class="nobrtable">
<table border="1">
<tr><td>上-1</td><td>上-2</td></tr>
<tr><td>下-1</td><td>下-2</td></tr>
</table>
</div>

但是，前面的 CSS 也產生一個問題，萬一表格中的文字有需要換行時的 <br /> 也會失效。沒關係，就把它換成 "換段" 的 <p>，只要在 CSS 中將表格用的 <p> 行距設為零，即可代替原來 <br /> 的功能。所以 CSS 的部份改為：

<style type="text/css"> .nobrtable br {display:none} .nobrtable p { margin-bottom: 0px; margin-top: 0px;} </style>

多了綠色的部份語法。

另外記錄一下表格的 CSS

• 取代以前 border="1" 的 CSS，格線設為粗線 1px , 實心線
  border: 1px solid;

• 取代以前 cellpadding="0" 的 CSS，最 "薄" 的格線
  border-collapse: collapse;

下面是我班級網頁中用到的 table CSS

<style type="text/css"> .nobrtable br {display:none} .nobrtable p { margin-bottom: 0px; margin-top: 0px;} .nobrtable table {width:500px; margin:auto; border-collapse:collapse;} .nobrtable td {border:1px solid #000000; } </style>

哈！為什麼上面的 CSS 語法不利用縮排，讓它可以好看一點？
別忘了，blogspot 會很雞婆的在換行的地方 "加料" 啦！

呵！以前懶得再學 CSS，都那麼多年了才在研究，blogspot 的 templates 也是最近才開始，時間花了不少，但也總算有一點心得。未來的班級網頁結合 google 的 calendar 來發布班級行事曆，並可以抓取近一個月的行事顯示在首頁；利用 blogspot 可以預約發布文章的特性，加上以 Javascript 解析 "聯絡事項" 分類 RSS 中的第一篇文章，即可將 "每日功課" 刊登在首頁...... 。以 blogspot 當班級網頁是一項新的嘗試，如此一來，不再受限於學校主機有限的空間及其它問題。google 那麼大，不會倒吧！