雖說目前網頁排版已經不太會用表格來做，但偶有簡易的資料表要呈現時，還是會使用到 <table>呀！
不知道有沒有人跟我一樣常被 HTML Table 的 <tr> <td> <th> 搞得霧煞煞呢？尤其是合併儲存格的時候，沒辦法看著 code 精準塞到想要的位置去。
哎唷威呀~今天上班切個小表格，各種失憶偷懶，使用線上 Table generator 手刀完成，想想這樣母湯～還是複習一下手刻 html table 好了～

Table 基本結構

圖解

結構：

• 第一層（最外層）：表格<table>
• 第二層：區塊
  • <caption> 表格名稱（非必填）
  • <thead> 表頭
  • <thead> 表格主體（內容）
  • <tfoot> 表尾
• 第三層－列：<tr>
• 第四層－單列中的欄（儲存格）：
  • <th>：資料欄位名稱
  • <td>：放資料

<table>
    <caption>Title</caption>
	<thead>
		<tr>
			<th>A</th>
			<th>B</th>
			<th>C</th>
			<th>D</th>
		</tr>
		
	</thead>
	<tbody>
		<tr>
			<th>1</th>
			<td>1-2</td>
			<td>1-3</td>
			<td>1-4</td>
		</tr>
		<tr>
			<th>2</th>
			<td>2-2</td>
			<td>2-3</td>
			<td>2-4</td>
		</tr>
		<tr>
			<th>3</th>
			<td>3-2</td>
			<td>3-3</td>     
			<td>3-4</td>
		</tr>
		<tr>
			<th>4</th>
			<td>4-2</td>
			<td>4-3</td>
			<td>4-4</td>
		</tr>
	</tbody>
	<tfoot>
		
	</tfoot>
</table>

啊～不想記這麼多tag~最最最最低要求的表格生成？

• <Table>　表格
  • <tr>　列
    • <td>　儲存格

<table>
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
    <tr>
        <td>4-1</td>
        <td>4-2</td>
        <td>4-3</td>
        <td>4-4</td>
    </tr>
</table>

合併儲存格

<table>
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td rowspan="2">2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
    <!--<td>3-3</td>   消失了-->   
        <td>3-4</td>
    </tr>
    <tr>
        <td>4-1</td>
        <td>4-2</td>
        <td>4-3</td>
        <td>4-4</td>
    </tr>
</table>

記法：
想將2-3與3-3合併 =>

• 格3-3要消失
• 格2-3的 td 補上rowspan=2 (跨2格)

以上~還對表格不熟的小幼苗們請自己練習看看吧！

個人 Blog: https://eudora.cc/