某天，客戶丟給我好幾個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″ : 是橫行的合併(上下格合併)，後面的數字代表往後合併包含自身的兩格
實際應用參考:
提醒第一次使用的小夥伴，可以點擊左上角的標籤(HTML/CSS/JS)來切換想要查看的文件，右側是執行結果。
See the Pen 合併儲存格 by Ruby (@Rubykuo) on CodePen.
這樣就成功啦!
但是這樣醜醜的預設樣式表格，當然沒辦法滿足客戶需求，所以接下來我們來談談用來美化的CSS吧!
二、用CSS調整表格樣式
不想要表格有兩條邊框?
表格文字和邊框太近?
如何更改表格顏色?
表格在不同大小的裝置上破版了怎麼辦?
用CSS可以解決全部的問題!
讓我們先來看看CSS怎麼寫進文件裡吧!
1.CSS怎麼寫?
一般來說CSS寫法分為三種:
a. 行內樣式(Inline Styles)
在 HTML 的標籤裡使用 style 屬性
b. 內部樣式表(Internal Style Sheet)
在<head>中加入<style>元素
c. 外部樣式表(External Style Sheet)
在<head>中加入<link>標籤使用外部 CSS 文件
2.CSS應用表格實例
由於是幫客戶直接在既有的原始碼編輯器上稿，且更動範圍較小，所以暫時不討論需要另外引入文件c.外部樣式
a.用內部樣式撰寫CSS我自己平常 a. 行內樣式 b. 內部樣式 都很常用，但在表格上我更常使用 b. 內部樣式 設定class來一次控制所有同名的標籤，這樣更好管理程式碼喔!
寫法會是這樣:
See the Pen table表格架構 by Ruby (@Rubykuo) on CodePen.
b.CSS樣式調整詳細說明
雖然文件裡面有註解說明了(/* 這是註解 */)，但畢竟為了讓零基礎的小夥伴能夠完全理解，下面簡單補充一下:
“.”代表的是class
“.”後面可以自訂義任何英文字，重點是方便自己辨認。
以上面的範例來說，我先在<style></style>中定義了i_table這個class，細節設定用大括號{}包起來。接著到<table></table>標籤加上class=”i_table”來連結樣式。
最後讓我們根據一開始的問題重新梳理文件中的CSS做了什麼吧!
Q1:不想要表格有兩條邊框?
會有兩條邊框線是因為table預設border-collapse: separate;
因此利用CSS在<table></table>標籤加上border-collapse: collapse;改掉預設的設定就可以了
Q2:表格文字和邊框太近?
在表格中的單元<th></th>和<td></td>加上padding(內距)設定就可以了
Q3:如何更改表格顏色?
找到需要變色的儲存格，加上color: (想要的文字顏色); 或者 background-color:(想要的背景顏色)
Q4:表格在不同大小的裝置上破版了怎麼辦?
一般來說如果表格發生超出版面的情形，那是因為表格本身被限定寬度了!
這種時候只要將表格寬度調整成一個彈性的寬度，就不會發生這種狀況囉!
調整表格寬度請找到<table></table>，通常我會為他加上width:100%;讓他根據父層寬度縮放。
其他常見表格標籤還有:
<thead></thead>：表頭
<tbody></tbody>：表身
<tfoot></tfoot>：表尾
<caption></caption>:caption 標籤必須緊隨 table標籤之後，為表格標題。以上表格標籤能讓表格結構更加完善，有利於維護與閱讀，在列印時，能夠設定重複列印表頭或表尾，但其實如果不用也不會影響到畫面XD所以我放在最後(喂)
三、零程式基礎用工具快速生成表格
回到一開始我說的，懶惰如我，基本上幫客戶上表格資料的時候，其實不會用一格一格複製貼上比對資料的方式，而是用線上表格生成工具Tables Generator
希望這一篇對你有幫助：）
