如何加一個表格在blogger 中?

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

相關文章:

  • 使用免費的BlueGriffon來自制一個部落格主題模版 一開始, 先介紹一下 BlueGriffon 這個免費的開源軟體. 它是一個最佳的網頁製造軟體 Dreamweaver 的免費替代軟件. 它一共有分三種版本, 免費使用, 付費單機執照, 和商用執照. 本系列將就免費的版本來介紹如何自製一個 Blogger 的主題模版.  … [繼續閱讀]
  • 移除"訂閱:文章(Atom)" 和 "訂閱:張貼留言(Atom)"字樣這二串字小小的在每篇文章或是網頁的下方, 其實是無傷大雅的.  但, 既然找到移除的方法了, 又超級簡單, 何樂而不為呢? 第一步: 到後台的[主題]→[自訂] 第二步: 在[進階]→[新增CSS]裡貼上下面這段CSS程式碼, 按下[套用至網誌]鍵就大功告成了! … [繼續閱讀]
  • 如何用部落格賺錢? 用部落格賺錢的方式千奇百怪, 有人可以靠著手寫和幫廣告商代言的功力月入數百萬. 也有人只靠著訪客來訪的流量放廣告賺錢.  對於一個部落格新手, 最開始的心願與期待, 也只想知道怎麼靠寫部落格分享自己的心得便能賺取些微薄的零用金. 本篇便是以此初衷與各位分享如何… [繼續閱讀]
  • 如何加一個表格在blogger 中? 如何加一個表格在部落格中? 有三種方法可用, 分別列述如下: 目錄索引 用HTML語法加一個表格只需要知道3個重要的標籤 (table, tr, td), 就可以自己調整下面的HTML表格的格式了. 首先一個表格有行有列. 行是橫的, 列是直的.… [繼續閱讀]
  • 主題的備份和還原 在修修改改, 添加了或多或少的CSS和HTML在主題後台裡, 如果那天想換個版面試試, 記得要先備份, 不然一旦換了主題, 再回來, 原來添加的東西就都沒了. 另外, 在修改和添加東西前, 如果沒有十足的把握, 也請先備份, 免得搞喳了, 又弄不回來, 於是只好回覆到預設, 那麼, 先前添加的… [繼續閱讀]

2 則留言:

顯示表情符號