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 center right	HTML5 不支持。HTML4 已废弃。 规定表格相对周围元素的对齐方式。
bgcolor	rgb(x,x,x) #xxxxxx colorname	HTML5 不支持。HTML4 已废弃。 规定表格的背景颜色。
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 事件属性

---