兩個 HTML 表格演示：
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML table標簽的使用(菜鳥教程 (cainiaoplus.com))</title> </head> <body> <table border="1"> <tr> <th>Item</th> <th>Amount</th> </tr> <tr> <td>Bananas</td> <td>$5</td> </tr> <tr> <td>Oranges</td> <td>$17</td> </tr> </table> <br> <table border="1"> <thead> <tr> <th colspan="2">The table header</th> </tr> </thead> <tbody> <tr> <td>The table body</td> <td>with two columns</td> </tr> </tbody> </table> </body> </html>測試看看 ?/?
IEFirefoxOperaChromeSafari
所有主流瀏覽器都支持 <table> 標簽。
<table> 標簽定義 HTML 表格
一個 HTML 表格包括 <table> 元素，一個或多個 <tr>、<th> 以及 <td> 元素。
<tr> 元素定義表格行，<th> 元素定義表頭，<td> 元素定義表格單元。
更復雜的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 元素。
在 HTML5 中，僅支持 "border" 屬性，并且只允許使用值 "1" 或 ""。
| 屬性 | 值 | 描述 |
|---|---|---|
| align | left center right | HTML5 不支持。HTML 4.01 已廢棄。 規(guī)定表格相對周圍元素的對齊方式。 |
| bgcolor | rgb(x,x,x) #xxxxxx colorname | HTML5 不支持。HTML 4.01 已廢棄。 規(guī)定表格的背景顏色。 |
| border | 1 "" | 規(guī)定表格單元是否擁有邊框。 |
| cellpadding | pixels | HTML5 不支持。規(guī)定單元邊沿與其內容之間的空白。 |
| cellspacing | pixels | HTML5 不支持。規(guī)定單元格之間的空白。 |
| frame | void above below hsides lhs rhs vsides box border | HTML5 不支持。規(guī)定外側邊框的哪個部分是可見的。 |
| rules | none groups rows cols all | HTML5 不支持。規(guī)定內側邊框的哪個部分是可見的。 |
| summary | text | HTML5 不支持。規(guī)定表格的摘要。 |
| width | pixels % | HTML5 不支持。規(guī)定表格的寬度。 |
<table> 標簽支持 HTML 的全局屬性。
<table> 標簽支持 HTML 的事件屬性。
沒有邊框的表格
本示例演示一個沒有邊框的表格。
表格中的表頭(Heading)
本示例演示如何顯示表格表頭。
帶有標題的表格
本示例演示一個帶標題 (caption) 的表格
跨行或跨列的表格單元格
本示例演示如何定義跨行或跨列的表格單元格。
表格內的標簽
本示例演示如何顯示在不同的元素內顯示元素。
單元格邊距(Cell padding)
本示例演示如何使用 Cell padding 來創(chuàng)建單元格內容與其邊框之間的空白。
單元格間距(Cell spacing)
本示例演示如何使用 Cell spacing 增加單元格之間的距離。
HTML 教程：HTML 表格
HTML DOM 參考手冊：Table 對象