HTML-table-标签-的详细用法

HTML <table> 标签功能

绘制表格使用；如果是做后台管理的用户列表等类似 Excel 功能，这个标签是最佳的选择

• <table> 标签定义 HTML 表格
• 一个 HTML 表格包括 <table> 元素，一个或多个 <tr>、<th> 以及 <td> 元素。
• <tr> 元素定义表格行
• <th> 元素定义表头
• <td> 元素定义表格单元

更复杂的 HTML 表格也可能包括

• <caption>
• <col>
• <colgroup>
• <thead>
• <tfoot>
• <tbody>

HTML <table> 标签用法

一个简单的 HTML 表格，包含两列两行：

<table border="1">
    <tr>
        <th> 网站名 </th>
        <th> 网址 </th>
    </tr>
    <tr>
        <td> 阿西河前端教程 </td>
        <td>www.axihe.com</td>
    </tr>
</table>

---

HTML <table> 标签演示

网站名	网址
阿西河前端教程	www.axihe.com

---

浏览器支持

所有主流浏览器都支持 <table> 标签。

---

注意事项

虽然现在 DIV+CSS 布局非常流行，是取代 table 布局的好选择；

但是遇到 table 相关的东西，还是使用 table 标签更佳，请根据实际场景进行选择

---

HTML4 与 HTML5 之间的差异

在 HTML5 中，仅支持 “border” 属性，并且只允许使用值 “1” 或 “”。

---

属性

属性	值	描述
align	left<br/>center<br/>right	HTML5 不支持。HTML4 已废弃。规定表格相对周围元素的对齐方式。
bgcolor	rgb(x,x,x)<br/>#xxxxxx<br/>colorname	HTML5 不支持。HTML4 已废弃。规定表格的背景颜色。
border	1<br/>””	规定表格单元是否拥有边框。
cellpadding	pixels	HTML5 不支持。规定单元边沿与其内容之间的空白。
cellspacing	pixels	HTML5 不支持。规定单元格之间的空白。
frame	void<br/>above<br/>below<br/>hsides<br/>lhs<br/>rhs<br/>vsides<br/>box<br/>border	HTML5 不支持。规定外侧边框的哪个部分是可见的。
rules	none<br/>groups<br/>rows<br/>cols<br/>all	HTML5 不支持。规定内侧边框的哪个部分是可见的。
summary	text	HTML5 不支持。规定表格的摘要。
width	pixels<br/>%	HTML5 不支持。规定表格的宽度。

全局属性

<table> 标签支持 HTML 全局属性。

---

事件属性

<table> 标签支持 HTML 事件属性

---

本文参考 HTML 中文帮助文档