iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 18
1
Modern Web

For 前端小幼苗的圖解筆記系列 第 18

[HTML] 圖解 Table 結構

雖說目前網頁排版已經不太會用表格來做,但偶有簡易的資料表要呈現時,還是會使用到 <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/


上一篇
[CSS] Flex 觀念與應用
下一篇
[CSS] RWD 網格系統
系列文
For 前端小幼苗的圖解筆記30

尚未有邦友留言

立即登入留言