HTML 表格 · W3School HTML & CSS 教程

# HTML 表格 **你可以使用 HTML 創建表格。** ## 實例 [表格](/tiy/t.asp?f=html_tables) ``` <html> <body> <p>每個表格由 table 標簽開始。</p> <p>每個表格行由 tr 標簽開始。</p> <p>每個表格數據由 td 標簽開始。</p> <h4>一列：</h4> <table border="1"> <tr> <td>100</td> </tr> </table> <h4>一行三列：</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> <h4>兩行三列：</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html> ``` [表格邊框](/tiy/t.asp?f=html_table_borders) ``` <html> <body> <h4>帶有普通的邊框：</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>帶有粗的邊框：</h4> <table border="8"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>帶有很粗的邊框：</h4> <table border="15"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html> ``` （[可以在本頁底端找到更多實例](#more_examples)。） ## 表格表格由 <table> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。 ``` <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> ``` 在瀏覽器顯示如下： <table border="1" style="margin-top:15px;"> <tbody> <tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr> <tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr> </tbody> </table> ## 表格和邊框屬性如果不定義邊框屬性，表格將不顯示邊框。有時這很有用，但是大多數時候，我們希望顯示邊框。使用邊框屬性來顯示一個帶有邊框的表格： ``` <table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table> ``` ## 表格的表頭表格的表頭使用 <th> 標簽進行定義。大多數瀏覽器會把表頭顯示為粗體居中的文本： ``` <table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> ``` 在瀏覽器顯示如下： <table border="1" style="margin-top:15px;"> <tbody> <tr><th>Heading</th><th>Another Heading</th></tr> <tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr> <tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr> </tbody> </table> ## 表格中的空單元格在一些瀏覽器中，沒有內容的表格單元顯示得不太好。如果某個單元格是空的（沒有內容），瀏覽器可能無法顯示出這個單元格的邊框。 ``` <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td></td> <td>row 2, cell 2</td> </tr> </table> ``` 瀏覽器可能會這樣顯示： ![表格中的空單元格](https://box.kancloud.cn/2015-12-13_566d21aa69490.gif) 注意：這個空的單元格的邊框沒有被顯示出來。為了避免這種情況，在空單元格中添加一個空格占位符，就可以將邊框顯示出來。 ``` <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td> </td> <td>row 2, cell 2</td> </tr> </table> ``` 在瀏覽器中顯示如下： <table border="1" style="margin-top:15px;"> <tbody> <tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr> <tr><td>row 2, cell 2</td></tr> </tbody> </table> ## <a id="more_examples">更多實例</a> [沒有邊框的表格](/tiy/t.asp?f=html_tables2) ``` <html> <body> <h4>這個表格沒有邊框：</h4> <table> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> <h4>這個表格也沒有邊框：</h4> <table border="0"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html> ``` [表格中的表頭(Heading)](/tiy/t.asp?f=html_table_headers) ``` <html> <body> <h4>表頭：</h4> <table border="1"> <tr> <th>姓名</th> <th>電話</th> <th>電話</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>垂直的表頭：</h4> <table border="1"> <tr> <th>姓名</th> <td>Bill Gates</td> </tr> <tr> <th>電話</th> <td>555 77 854</td> </tr> <tr> <th>電話</th> <td>555 77 855</td> </tr> </table> </body> </html> ``` [空單元格](/tiy/t.asp?f=html_table_nbsp) ``` <html> <body> <table border="1"> <tr> <td>Some text</td> <td>Some text</td> </tr> <tr> <td></td> <td>Some text</td> </tr> </table> <p>正如您看到的，其中一個單元沒有邊框。這是因為它是空的。在該單元中插入一個空格后，仍然沒有邊框。</p> <p>我們的技巧是在單元中插入一個 no-breaking 空格。</p> <p>no-breaking 空格是一個字符實體。如果您不清楚什么是字符實體，請閱讀關于字符實體的章節。</p> <p>no-breaking 空格由和號開始 ("&")，然后是字符"nbsp"，并以分號結尾(";")。</p> </body> </html> ``` [帶有標題的表格](/tiy/t.asp?f=html_tables3) ``` <html> <body> <h4>這個表格有一個標題，以及粗邊框：</h4> <table border="6"> <caption>我的標題</caption> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> ``` [跨行或跨列的表格單元格](/tiy/t.asp?f=html_table_span) ``` <html> <body> <h4>橫跨兩列的單元格：</h4> <table border="1"> <tr> <th>姓名</th> <th colspan="2">電話</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>橫跨兩行的單元格：</h4> <table border="1"> <tr> <th>姓名</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">電話</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html> ``` [表格內的標簽](/tiy/t.asp?f=html_table_elements) ``` <html> <body> <table border="1"> <tr> <td> <p>這是一個段落。</p> <p>這是另一個段落。</p> </td> <td>這個單元包含一個表格： <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>這個單元包含一個列表： <ul> <li>蘋果</li> <li>香蕉</li> <li>菠蘿</li> </ul> </td> <td>HELLO</td> </tr> </table> </body> </html> ``` [單元格邊距(Cell padding)](/tiy/t.asp?f=html_table_cellpadding) ``` <html> <body> <h4>沒有 cellpadding：</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>帶有 cellpadding：</h4> <table border="1" cellpadding="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html> ``` [單元格間距(Cell spacing)](/tiy/t.asp?f=html_table_cellspacing) ``` <html> <body> <h4>沒有 cellspacing：</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>帶有 cellspacing：</h4> <table border="1" cellspacing="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html> ``` [向表格添加背景顏色或背景圖像](/tiy/t.asp?f=html_table_background) ``` <html> <body> <h4>背景顏色：</h4> <table border="1" bgcolor="red"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>背景圖像：</h4> <table border="1" background="/i/eg_bg_07.gif"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html> ``` [向表格單元添加背景顏色或者背景圖像](/tiy/t.asp?f=html_table_cellbackground) ``` <html> <body> <h4>單元背景：</h4> <table border="1"> <tr> <td bgcolor="red">First</td> <td>Row</td> </tr> <tr> <td background="/i/eg_bg_07.gif"> Second</td> <td>Row</td> </tr> </table> </body> </html> ``` [在表格單元中排列內容](/tiy/t.asp?f=html_table_align) ``` <html> <body> <table width="400" border="1"> <tr> <th align="left">消費項目....</th> <th align="right">一月</th> <th align="right">二月</th> </tr> <tr> <td align="left">衣服</td> <td align="right">$241.10</td> <td align="right">$50.20</td> </tr> <tr> <td align="left">化妝品</td> <td align="right">$30.00</td> <td align="right">$44.45</td> </tr> <tr> <td align="left">食物</td> <td align="right">$730.40</td> <td align="right">$650.00</td> </tr> <tr> <th align="left">總計</th> <th align="right">$1001.50</th> <th align="right">$744.65</th> </tr> </table> </body> </html> ``` [框架(frame)屬性](/tiy/t.asp?f=html_table_frame) ``` <html> <body> <p><b>注釋：</b>frame 屬性無法在 Internet Explorer 中正確地顯示。</p> <p>Table with frame="box":</p> <table frame="box"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p>Table with frame="above":</p> <table frame="above"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p>Table with frame="below":</p> <table frame="below"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p>Table with frame="hsides":</p> <table frame="hsides"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p>Table with frame="vsides":</p> <table frame="vsides"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> </body> </html> ``` ## 表格標簽 | 表格 | 描述 | | --- | --- | | [`<table>`](/tags/tag_table.asp) | 定義表格 | | [`<caption>`](/tags/tag_caption.asp) | 定義表格標題。 | | [`<th>`](/tags/tag_th.asp) | 定義表格的表頭。 | | [`<tr>`](/tags/tag_tr.asp) | 定義表格的行。 | | [`<td>`](/tags/tag_td.asp) | 定義表格單元。 | | [`<thead>`](/tags/tag_thead.asp) | 定義表格的頁眉。 | | [`<tbody>`](/tags/tag_tbody.asp) | 定義表格的主體。 | | [`<tfoot>`](/tags/tag_tfoot.asp) | 定義表格的頁腳。 | | [`<col>`](/tags/tag_col.asp) | 定義用于表格列的屬性。 | | [`<colgroup>`](/tags/tag_colgroup.asp) | 定義表格列的組。 |