两个 HTML 表格演示：
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML table标签的使用(基础教程网 nhooo.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 已废弃。 规定表格相对周围元素的对齐方式。 |
| bgcolor | rgb(x,x,x) #xxxxxx colorname | HTML5 不支持。HTML 4.01 已废弃。 规定表格的背景颜色。 |
| border | 1 "" | 规定表格单元是否拥有边框。 |
| cellpadding | pixels | HTML5 不支持。规定单元边沿与其内容之间的空白。 |
| cellspacing | pixels | HTML5 不支持。规定单元格之间的空白。 |
| frame | void above below hsides lhs rhs vsides box border | HTML5 不支持。规定外侧边框的哪个部分是可见的。 |
| rules | none groups rows cols all | HTML5 不支持。规定内侧边框的哪个部分是可见的。 |
| summary | text | HTML5 不支持。规定表格的摘要。 |
| width | pixels % | HTML5 不支持。规定表格的宽度。 |
<table> 标签支持 HTML 的全局属性。
<table> 标签支持 HTML 的事件属性。
没有边框的表格
本示例演示一个没有边框的表格。
表格中的表头(Heading)
本示例演示如何显示表格表头。
带有标题的表格
本示例演示一个带标题 (caption) 的表格
跨行或跨列的表格单元格
本示例演示如何定义跨行或跨列的表格单元格。
表格内的标签
本示例演示如何显示在不同的元素内显示元素。
单元格边距(Cell padding)
本示例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。
单元格间距(Cell spacing)
本示例演示如何使用 Cell spacing 增加单元格之间的距离。
HTML 教程：HTML 表格
HTML DOM 参考手册：Table 对象