如何加一個表格在blogger 中?

Views

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

    用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>
    就會是長成這樣.
    12345
    記住, 一定要有<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邊框設定


    3q 或者  如果覺得這篇有用, 那就請我喝杯咖啡吧!請我喝杯咖啡吧!
    本篇文章包含贊助內容,當您單擊某些鏈接時,我可能會獲得奬勵。

    2 則留言:

    顯示表情符號