如何加一個表格在blogger 中?

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

相關文章:

  • 為什麼 Google 不到我的網站? 就在你覺得差不多什麼都弄好了, 文章登了幾篇, 分類也分了, 版面也挑好了, 幾個好用的小工具也加了, 還放了網頁瀏覽計數器, 最棒的, 廣告也加了. 但, 發現一件令人百思不解的事 -- 為什麼在谷哥上找不到我的部落格或是我的文章? 這, 不是大幅降低我的陌生訪客的流量嗎?? (突然有… [繼續閱讀]
  • 申請 Google Blogger Blogger是Google提供的免費部落格, 可以用Google帳號直接登入申請屬於你的免費Blogger. 也就是說只要你有gmail, 你就已經擁有一個Google Blogger了. 本篇教您輕鬆的申請一個Blogger 帳號到成功的發布第一篇文章. … [繼續閱讀]
  • 用 InfinityFree 免費的虛擬主機來安裝 WordPress大家都知道Wordpress本身是一個免費可以公開下載的架站應用程式. 主要使用的語言是PHP和MySQL. 當然啦, 使用者不需要懂PHP和MySQL.Wordpress因為它的簡單好用, 多樣化且美觀大方的主題模版及許多免費的資源(外掛程式)可供下載, 目前被普遍廣泛的使用, 堪稱是最… [繼續閱讀]
  • 如何讓手機上的影片自動調整符合手機營幕尺寸?一個好的主題模版本身的設定就應該是會自動將文章裡的youtube影片為不同尺寸的營幕做調整, 然而有時候偏偏會喜歡上一個不會自動將影片做調整的主題模版, 這時, 真有一種"恨鐵不成鋼"的感覺, 對這個主題無法捨棄, 可偏偏發文的影片在手機上看就會被硬生生的卡斷只剩一半.今天人手一機的時代下, 真的不… [繼續閱讀]
  • 讓Blogger的圖片自動符合手機營幕尺寸一個好的主題模版本身的設定就應該是會自動將文章裡的圖片為不同尺寸的營幕做調整, 然而有時候偏偏會喜歡上一個不會自動將圖片做調整的主題模版, 這時, 真有一種"恨鐵不成鋼"的感覺, 對這個主題無法捨棄, 可偏偏發文的圖片在手機上看就會被硬生生的卡斷只剩一半.今天人手一機的時代下, 真的不能做個網站只有… [繼續閱讀]

2 則留言:

顯示表情符號