html表格框線HTML table widthhtml table排版html表格設計html表格產生器html表格製作html表格美化

HTML <table> 表格- HTML 語法教學Tutorial - Fooish 程式技術

文章推薦指數： 80 %
投票人數：10人

HTML

標籤(tag) 用來建立表格，也就是用來呈現二維的資料表資訊。

標籤做為表格的容器(container)，裡面有不同用途的標籤像是, ... HTML語法教學HTML編輯器什麼是HTML標籤HTMLDOCTYPEHTMLHTML全域屬性HTML註解HTMLHTML網頁標題HTML<meta>元資訊HTML<style>CSSHTML<link>HTML<script>JSHTML<noscript>HTML<base>HTML<body>HTML<p>段落HTML<br>換行HTML空白字元HTML<img>圖片HTML<a>超連結HTML<h1>-<h6>標題HTML項目列表清單HTML<table>表格HTML<form>表單HTML<input>表單元件HTML<textarea>HTML<select>下拉式選單HTML<button>表單按鈕HTML<label>HTML<fieldset><legend>HTML<div>HTML<span>HTML<strong>強調重要性HTML<em>對內容著重強調HTML<mark>突顯高亮文字HTML<hr>水平分隔線HTML<iframe>內嵌框架HTML<frame>框架HTML<embed>嵌入HTML<object>嵌入HTML<blockquote>區塊引用文字HTML<q>行內引用文字HTML<pre>預先格式化HTML<code>程式碼HTML<ins>插入的文字HTML<del>刪除的文字HTML<center>置中什麼是HTML5HTML<video>影片播放HTML<audio>音樂播放HTML語意結構區塊HTML<nav>導航連結區塊HTML<article>內容獨立完整的區塊HTML<section>群組區塊HTML<aside>側邊欄HTML<main>網頁主要區塊HTML<header>標頭/標題區塊HTML<footer>結尾/頁尾區塊HTML<datalist>輸入資料選擇清單HTML<figure><figcaption>HTML<hgroup>多級別標題群組HTML<canvas>繪圖畫布HTML<picture>響應式圖片HTML<output>HTML表格(table)HTML<table>標籤(tag)用來建立表格，也就是用來呈現二維的資料表資訊。<br><br><table>標籤做為表格的容器(container)，裡面有不同用途的標籤像是<tr>,<td>組成一個完整的表格。<br><br><table>中的標籤按照以下順序，組成一個表格：一個選擇性的(optional)<caption>標籤，用來表示表格的標題一個或多個選擇性的<colgroup>標籤，用來分組表格的直行(column)以進行格式化一個選擇性的<thead>標籤，用來表示表格中不同直行(column)的標題一個在以下的標籤之前或之後選擇性的<tfoot>標籤，用來對表格中不同直行(column)做分組，來指定不同分組內容的頁腳或標題一個或多個選擇性的<tbody>標籤，做為表格主要內容的容器一個或多個必要的<tr>標籤，用來定義表格的橫列(row)一個或多個必要的<td>(或<th>)標籤，用來表示表格中每一直行(cloumn)的單元格(cell)<table>表格,<tr>橫列,<td>直行<table>,<tr>和<td>是HTML表格中最常見到也一定會用到的三個標籤，<table>用來包著整個表格的結構和內容，<tr>(tablerow)用來定義表格有幾個橫列(row)，<tr>裡面有<td>(tabledata)用來定義表格有幾個直行(cloumn)，至於<td>裡面就是放實際單元格的資料。<br><br>舉個例子：<table> <tr> <td>國家</td> <td>首都</td> <td>人口</td> <td>語言</td> </tr> <tr> <td>USA</td> <td>WashingtonD.C.</td> <td>309million</td> <td>English</td> </tr> <tr> <td>Sweden</td> <td>Stockholm</td> <td>9million</td> <td>Swedish</td> </tr> </table> 上面的例子實際顯示在網頁畫面中會長得像這樣子：國家首都人口語言USAWashingtonD.C.309millionEnglishSwedenStockholm9millionSwedish這是一個3x4大小的表格，HTML中有3個<tr>即表示這表格有3列，而每個<tr>裡面都有4個<td>即表示這表格有4行！有注意到嗎？每個<tr>裡面的<td>數量要一樣喔，因為這樣才會組成一個格子狀的表格嘛！<th>欄位標題<th>(tableheader)用來表示表格欄位的標題，<th>可以用來替代<td>使用，用來在語意上更明確的聲明這一格是一個標題。<br><br>例子：<table> <tr> <th>國家</th> <th>首都</th> <th>人口</th> <th>語言</th> </tr> <tr> <td>USA</td> <td>WashingtonD.C.</td> <td>309million</td> <td>English</td> </tr> <tr> <td>Sweden</td> <td>Stockholm</td> <td>9million</td> <td>Swedish</td> </tr> </table> 顯示如下：國家首都人口語言USAWashingtonD.C.309millionEnglishSwedenStockholm9millionSwedish表格標題在瀏覽器預設樣式中會顯示成粗體字。<br><br>合併儲存格:colspan和rowspan屬性(attributes)合併表格可以利用<td>和<th>標籤上的colspan和rowspan屬性，colspan是用來水平合併多行(column)的儲存格，rowspan則用來垂直合併多列(row)的儲存格。<br><br>rowspan-垂直合併儲存格語法：<tdrowspan="要合併幾個橫列"> rowspan範例：<table> <tr> <th>項目</th> <th>金額</th> <th>總金額</th> </tr> <tr> <td>iPhone11</td> <td>$24,900</td> <tdrowspan="2">$31,390</td> </tr> <tr> <td>AirPods</td> <td>$6,490</td> </tr> </table> 顯示結果：項目金額總金額iPhone11$24,900$31,390AirPods$6,490上方例子中，rowspan="2"表示從這一列開始往下合併至下一列(共2列)。<br><br>所以說，你rowspan合併幾列，後面幾列的<tr>中同樣位置的<td>就要省略不寫。<br><br>rowspan="0"是特殊語法，意思是儲存格從這一列開始合併到最後一列的意思。<br><br>例如：<table> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <tdrowspan="0">6</td> <td>7</td> <td>8</td> </tr> <tr> <td>9</td> <td>11</td> <td>12</td> </tr> <tr> <td>13</td> <td>15</td> <td>16</td> </tr> </table> 結果：1234567891112131516colspan-水平合併儲存格語法：<tdcolspan="要合併幾個直行"> colspan範例：<table> <tr> <th>項目</th> <th>金額</th> </tr> <tr> <td>iPhone11</td> <td>$24,900</td> </tr> <tr> <td>AirPods</td> <td>$6,490</td> </tr> <tr> <tdcolspan="2">總金額:$31,390</td> </tr> </table> 顯示結果：項目金額iPhone11$24,900AirPods$6,490總金額:$31,390上方例子中，colspan="2"表示從這一行開始往右合併至下一行(共2行)。<br><br>所以說，你colspan合併幾行，該儲存格緊接著的同一列<tr>後面的幾個<td>就要省略不寫。<br><br><thead>表格表頭區塊,<tbody>表格主要內容區塊,<tfoot>表格頁腳區塊<thead>(tableheader),<tbody>(tablebody)和<tfoot>(tablefooter)主要用來增強表格HTML的語意性(semantic)，分別用來明確區分表格中的不同目的區塊，其中thead是說明這一個區塊的內容是表格欄位標題；<tbody>是說明這一個區塊是放表格的主要內容；<tfoot>則是說明這一個區塊裡面放的是表格的頁腳內容。<br><br>使用範例：<table> <thead> <tr> <th>項目</th> <th>金額</th> </tr> </thead> <tbody> <tr> <td>iPhone11</td> <td>$24,900</td> </tr> <tr> <td>AirPods</td> <td>$6,490</td> </tr> <tr> <td>iPadPro</td> <td>$25,900</td> </tr> </tbody> <tfoot> <tr> <th>總金額</th> <td>$57,290</td> </tr> </tfoot> </table> 顯示結果：項目金額iPhone11$24,900AirPods$6,490iPadPro$25,900總金額$57,290其中用<thead>聲明「項目」和「金額」是屬於表格的標題，<tbody>裡面是表格的內容，<tfoot>裡面的「總金額」是表格的結尾頁腳。<br><br><caption>表格的標題<caption>放在<table>中最前面的第一個標籤，用來說明表格的標題，而一個表格只能有一個標題。<br><br>範例：<table> <caption>存錢計畫</caption> <tr> <th>日期</th> <th>金額</th> </tr> <tr> <td>2020-01-01</td> <td>$500</td> </tr> <tr> <td>2020-01-12</td> <td>$800</td> </tr> <tr> <td>2020-02-22</td> <td>$600</td> </tr> </table> 顯示結果：存錢計畫日期金額2020-01-01$5002020-01-12$8002020-02-22$600<colgroup>,<col>表格直行分組<colgroup>(columngroups)標籤是用來對表格中的直行(column)做分組，可以方便對每個分組直行中的所有儲存格進行統一的格式和樣式設定。<br><br><colgroup>標籤上有一個span屬性，用來指定這一個分組橫跨了幾個直行，span預設值是1。<br><br>用法範例：<table> <colgroupspan="2"style="background-color:gray;"></colgroup> <colgroupstyle="background-color:green;"></colgroup> <tr> <th>Item</th> <th>Price</th> <th>Quantity</th> </tr> <tr> <td>iPhone11</td> <td>$24,900</td> <td>2</td> </tr> <tr> <td>AirPods</td> <td>$6,490</td> <td>1</td> </tr> </table> 顯示結果：ItemPriceQuantityiPhone11$24,9002AirPods$6,4901上面的例子中，我們用兩個colgroup來做表格直行的分組，第一組colgroupspan2表示將第一行和第二行分為第一組，第二組colgroup(預設span1)表示將第三行分為一組。<br><br>接下來你可以在<colgroup>標籤上面設定class屬性或像是style屬性，就可以一次直接對分組中所有的儲存格設定樣式，用colgroup的好處就是你不用在每一個<td>上面一一設定class或style。<br><br><colgroup>標籤的位置是放在<caption>標籤(如果有)後面，或其他任何的表格標籤前面(像是<thead>,<tbody>,<tfoot>或<tr>等表格標籤)。<br><br><colgroup>標籤裡面還可以有<col>標籤，可以用來在每個colgroup分組中再繼續做分組設定。<br><br><col>標籤上同樣有一個span屬性，用來指定這一個分組橫跨了幾個直行，span預設值是1。<br><br>而且如果colgroup裡面有col，colgroup標籤上就不能再設定span囉。<br><br>用法範例：<!--CSS樣式設定--> <style> .gray-bg{ background-color:gray; } .green-bg{ background-color:green; } </style> <!--表格colgroup設定--> <table class=" table table-bordered"> <colgroup> <colspan> <colspan> </colspan></colspan> </colgroup> <tr> <th>Item</th> <th>Price</th> <th>Quantity</th> </tr> <tr> <td>iPhone11</td> <td>$24,900</td> <td>2</td> </tr> <tr> <td>AirPods</td> <td>$6,490</td> <td>1</td> </tr> </table> <col>是個空元素不需要closingtag。<br><br>顯示結果：ItemPriceQuantityiPhone11$24,9002AirPods$6,4901比較複雜的多個colgroup和多個col的例子：<table class=" table table-bordered"> <colgroup> <colspan> <colspan> </colspan></colspan> </colgroup> <colgroupstyle> <tr> <th>Item</th> <th>Price</th> <th>Quantity</th> <th>Memo</th> </tr> <tr> <td>iPhone11</td> <td>$24,900</td> <td>2</td> <td>NA</td> </tr> <tr> <td>AirPods</td> <td>$6,490</td> <td>1</td> <td>NA</td> </tr> </colgroupstyle> </table> 顯示結果：ItemPriceQuantityMemoiPhone11$24,9002NAAirPods$6,4901NA

請為這篇文章評分？

延伸文章資訊