HTML <table> 標簽 · W3School HTML 參考手冊

# HTML <table> 標簽 ## 實例一個簡單的 HTML 表格，包含兩行兩列： ``` <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> ``` ## 瀏覽器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | 所有瀏覽器都支持 <table> 標簽。 ## 定義和用法 <table> 標簽定義 HTML 表格。簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。 tr 元素定義表格行，th 元素定義表頭，td 元素定義表格單元。更復雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。 ## HTML 與 XHTML 之間的差異在 HTML 4.01 中，table 元素的 "align" 和 "bgcolor" 屬性是不被贊成使用的。在 XHTML 1.0 Strict DTD，table 元素的 "align" 和 "bgcolor" 屬性是不被支持的。 ## 可選的屬性 | 屬性 | 值 | 描述 | | --- | --- | --- | | [align](/tags/att_table_align.asp "HTML <table> 標簽的 align 屬性") | `left` `center` `right` | 不贊成使用。請使用樣式代替。規定表格相對周圍元素的對齊方式。 | | [bgcolor](/tags/att_table_bgcolor.asp "HTML <table> 標簽的 bgcolor 屬性") | _rgb(x,x,x)_ _#xxxxxx_ _colorname_ |不贊成使用。請使用樣式代替。規定表格的背景顏色。 | | [border](/tags/att_table_border.asp "HTML <table> 標簽的 border 屬性") | _pixels_ | 規定表格邊框的寬度。 | | [cellpadding](/tags/att_table_cellpadding.asp "HTML <table> 標簽的 cellpadding 屬性") | _pixels_ _%_ | 規定單元邊沿與其內容之間的空白。 | | [cellspacing](/tags/att_table_cellspacing.asp "HTML <table> 標簽的 cellspacing 屬性") | _pixels_ _%_ | 規定單元格之間的空白。 | | [frame](/tags/att_table_frame.asp "HTML <table> 標簽的 frame 屬性") | `void` `above` `below` `hsides` `lhs` `rhs` `vsides` `box` `border` | 規定外側邊框的哪個部分是可見的。 | | [rules](/tags/att_table_rules.asp "HTML <table> 標簽的 rules 屬性") | `none` `groups` `rows` `cols` `all` | 規定內側邊框的哪個部分是可見的。 | | [summary](/tags/att_table_summary.asp "HTML <table> 標簽的 summary 屬性") | _text_ | 規定表格的摘要。 | | [width](/tags/att_table_width.asp "HTML <table> 標簽的 width 屬性") | _%_ _pixels_ | 規定表格的寬度。 | ## 全局屬性 <table> 標簽支持 [HTML 中的全局屬性](/tags/html_ref_standardattributes.asp)。 ## 事件屬性 <table> 標簽支持 [HTML 中的事件屬性](/tags/html_ref_eventattributes.asp)。 ## TIY 實例 [表格](/tiy/t.asp?f=html_tables) 這個例子演示如何在 HTML 文檔中創建表格。 ``` <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> ``` [沒有邊框的表格](/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> ``` [表格中的標題(Headings)](/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) 本例演示一個帶標題 (caption) 的表格 ``` <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) 本例演示如何向一個或者更多表格單元添加背景 ``` #### 單元背景： First | Row | Second | Row | ``` [在表格單元中排列內容](/tiy/t.asp?f=html_table_align) 本例演示如何使用 "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) 本例演示如何使用 "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> ``` ## 相關頁面 HTML DOM 參考手冊：[Table 對象](/jsref/dom_obj_table.asp "HTML DOM Table 對象")