如何加一個表格在blogger 中? ~ 天馬行空

如何加一個表格在部落格中? 有三種方法可用, 分別列述如下:

用HTML語法加一個表格

只需要知道3個重要的標籤 (table, tr, td), 就可以自己調整下面的HTML表格的格式了.

首先一個表格有行有列. 行是橫的, 列是直的.
<tr>標籤是用來指定行</tr>
<td>標籤是用來指定列</td>

所以如果你的表格是要每行要有5列, 那就是在每行裡要有5個列的標籤.
例如:
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
就會是長成這樣.

記住, 一定要有<table>做開頭和</table>做結尾. 在中間加入行<tr>和列<td>的頭尾標籤即可.

其他幾個設定就是表格的框邊的設定了. 如果不想要有框, 只要把border 設成0即可.

border-radius: 10px 50px; 調整表格的4個角的尖或圓
inset 是讓框框看起來是凹進去的
outset 則是讓框框看起來是浮起來的
還可以試 ridge, groove, 或是改變表格的底色:

background-color: #ffffcc; 設定表格的底色

這是特色框區塊, 參考上面的第四種table的程式碼. 利用了 border-radius 和 background-color 及 groove 來設計這個特色框區塊.

這裡附上顏色代碼, 你可以在這裡選想要用的顏色來取代顏色號碼.

這是測試欄位內容 1	這是測試欄位內容2	這是測試欄位內容3
這是測試欄位內容 1	這是測試欄位內容2	這是測試欄位內容3
這是測試欄位內容 1	這是測試欄位內容2	這是測試欄位內容3
這是測試欄位內容 1	這是測試欄位內容2	這是測試欄位內容3

用Word加一個表格

如果不想自己寫HTML的表格, 另一個方法便是利用Microsoft Word, 在Word上製作一個表格, 並把內容都先寫好, 然後存成HTML的檔案, 再把HTML程式碼貼到文章裡即可, 詳情請參考: 用Word在部落格中加一個表格.

這個方法做出來的表格可以完整的呈現你在Word上選取的表格格式與顏色, 唯一的缺點是, 它背後的程式碼很多, 如果要事後修改, 或是添加資料, 要稍微花點時間找到調整的地方.

用Google Docs加一個表格

這個是我最推薦, 也是做起來最簡單方便的做法. 先在Google Docs裡製作一個表格, 並把內容都填寫好, 然後到[檔案]→[發布到網路], 把內崁的程式碼貼入要放表格的位置即可.

更好的是, 隨時可在Google Docs裡添加或是修改內容, 部落格不用另外再行調整. 所以是最省時最方便的做法了. 詳情請看如何在Blogger上加入Word or Excel 文件.

Google Docs做出的表格也許不如Word的華麗, 但簡單大方, 而且內崁程式碼只有短短兩行, 修改起來比Word的表格要容易太多了, 直接在Google Docs上的表格進行修改, 都不用再重貼程式碼了. 大推!!

由Google Docs做出的表格範例如下:

參考網站: Wibibi網頁設計教學, CSS 邊框設定

或者

請我喝杯咖啡吧!
本篇文章包含贊助內容，當您單擊某些鏈接時，我可能會獲得奬勵。