HTML <table> 标签

实例

一个简单的HTML表格:

<table style="width:100%">
  <tr>
    <th>姓</th>
    <th>名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张</td>
    <td>三</td>
    <td>18</td>
  </tr>
  <tr>
    <td>李</td>
    <td>四</td>
    <td>26</td>
  </tr>
</table>
运行 »

定义和用法

<table> 标记定义HTML表格.

HTML表格由 <table> 元素和一个或多个 <tr> , <th><td> 元素组成.

<tr>元素定义表行,<th>元素定义表头,<td>元素定义表格单元格.

更复杂的HTML表格还可能包括<caption>,<col>,<colgroup>,<thead>,<tfoot>和<tbody>元素.

注意:表格不应用于页面布局!从历史上看,一些Web作者滥用HTML中的表格来控制其页面布局.但是,使用HTML表格进行布局有很多种替代方法,主要是使用CSS.


浏览器支持

Element
<table> Yes Yes Yes Yes Yes


HTML 4.01和HTML5之间的差异

HTML5中不支持"align","bgcolor","border","cellpadding","cellspacing","frame","rules","summary"和"width"属性.


属性

属性 描述
align left
center
right
HTML5不支持.
定义表格相对周围元素的对齐方式
bgcolor rgb(x,x,x)
#xxxxxx
colorname
HTML5不支持.
定义表格的背景颜色
border 1
0
HTML5不支持.
定义表格单元是否拥有边框
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中的 事件属性 .


相关页面

HTML教程: HTML表格

HTML DOM参考: Table对象

CSS教程: Table式表


默认CSS设置

大多数浏览器将使用以下默认值显示 <table> 元素:

实例

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}