2009年8月11日 星期二

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 那麼大,不會倒吧!

6 則留言:

  1. 在blogspot的後台好像有可以設定換行的功能,「轉換分行符號」,你可以試試看
    http://docs.google.com/File?id=df97br9b_198fwhw8cg7_b

    回覆刪除
  2. 這個選項我知道, 但是如果改了, 其它文章也會受影響吧? 至少, 所有新的文章會受影響。

    回覆刪除
  3. 我也看到了table的問題, 謝謝你已有了解答, css code可放在內文中? 還是需要加在layout中?

    兩年前開始, 學校網站上, 就用google calendar分享行事曆, 很方便呢!

    回覆刪除
  4. UCS 老師:
    css code 直接放在內文中即可

    回覆刪除
  5. 謝謝, 很好用呢! 在preview時看的和publish後看到的有些不同。

    回覆刪除
  6. 印象中 , blogspot 的 preview 不會去套 template 的 CSS , 因此 , 和 publish 後有肯定有差距。說實在的,以前的版本差更多!

    回覆刪除

 
© 2009. Design by Pocket