乐趣区

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

jiezi

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 中文帮助文档

退出移动版