某天，客戶丟給我好幾個word表格讓我放進文章裡面。大概長這樣: 無論是老手或者新手，看到表格應該下意識會想皺眉頭，對於新手是因為和html標籤不熟不知道該從何下手(相信我，直接在編輯器裡面複製貼上通常會很醜)；對老手來說切表格很容易，但是因為要一格一格對資料太麻煩了，每次都對到眼花。 所以如果是幫客戶上資料，我都是靠偷吃步幫我簡化整個流程哈哈這邊先不詳述，工具我放在文末。 建議你跟著我先簡單認識一下表格是怎麼切出來的，才能應付各種狀況喔! 一、HTML常見表格結構 1.HTML表格基礎結構 其實表格的架構很簡單: <table class="i_table"> <tr class="i_th"> <th class="i_td">我是表頭</th> <th class="i_td">預設粗體</th> </tr> <tr> <td class="i_td">內容1</td> <td class="i_td">內容2</td> </tr> <tr> <td class="i_td">內容3</td> <td class="i_td">內容4</td> </tr> </table> 乾淨無汙染的編輯器裡面編譯出來的結果會是長這樣(為了方便觀看範例已經用CSS設定基礎邊框): 排列順序是由左至右，由上至下。你可以發現完成一個最簡單的表格其實只需要認識這四個標籤! <table></table>：表格 <tr></tr>：表格中的橫列（包含一或多個<th> 或 <td>元素） <th></th>：表格中的單元，通常在第一行(表頭)，預設為 粗體字型、置中對齊 <td></td>：表格中的單元，儲存格，預設為 置左對齊 2.合併儲存格 再讓我們複習一次，表格的排列順序是由左至右，由上至下。因此合併表格也是按照相同的邏輯順序。 在單元儲存格裡面加入以下兩種設定:a. colspan="2" : 是直列的合併(左右格合併)，後面的數字代表往後合併包含自身的兩格b. rowspan="2" : 是橫行的合併(上下格合併)，後面的數字代表往後合併包含自身的兩格 實際應用參考: codepen是一個方便線上練習coding的地方! 讓你不用下載程式碼編輯器就可以直接實際操作看到結果，有興趣深入了解的小夥伴可以參考coding菜鳥必備 線上程式編輯器codepen 提醒第一次使用的小夥伴，可以點擊左上角的標籤(HTML/CSS/JS)來切換想要查看的文件，右側是執行結果。 See the Pen 合併儲存格 by Ruby (@Rubykuo) on CodePen. 這樣就成功啦! 但是這樣醜醜的預設樣式表格，當然沒辦法滿足客戶需求，所以接下來我們來談談用來美化的CSS吧! 二、用CSS調整表格樣式...

Tables Generator讓懶人成為第一名工具！表格生成器 如何使用工具來幫助網站建立一個漂亮的表格呢？建議你可以試試這一個方便的線上工具！使用方式非常簡單，而且就算不懂程式也沒關係！一步一步帶你了解怎麼使用這個網頁工具，快來看看這是怎麼操作的吧！ 一、操作方式說明 Step1.進入先將最上面的標籤切換到HTML Step2.將其中的文件整理統一文件格式(word/Excel)例如:刪除多餘的空白鍵 Step3.複製整個文件的表格到欄位中（不需要一格一格的貼！） 如果文件比較大，也可以使用匯入csv文件的方式！非常方便！ Step4.編輯樣式 A.還原新增表格、刪除表格、上一步等 B.調整表格樣式，文字寬度、字形、大小、顏色等 C.表格面板與文字編輯 D.產生方案並複制 值得一提的是選擇，右上角的主題可以快速預設的表格樣式，超級方便的 Step5.計算原始碼 機器生成的原始碼限定了字形和寬度，一般我需要將網站默認的字體系列和字體大小設置刪除，另外將<table>標籤設置為寬度100% 最後就可以生成原始碼並複制（圖標D）貼到網站後台編輯器裡成功美美的表格啦！ 快去試試看吧！https://www.tablesgenerator.com/ 二、使用表格生成器的優缺點 優點： 介面簡潔且直覺，基本上會用excel或word都可以輕鬆操作 一鍵獲取表格原始碼 調整款式可以直接查看預覽結果 有預設的表格樣式可以選擇！ 缺點： 自動生成的原始碼很容易因為反覆蓋的樣式修改而產生過多多餘的類和样式，導致原始碼冗長、較難閱讀與維護 如果想要深入了解表格是怎麼被寫出來的可以看零基礎也能懂的 HTML表格