非常教程

HTML参考手册

标签 | Elements

table

HTML <table> 元素表示表格数据-即,通过两维数据表表示的信息。

内容类别

流量内容

允许的内容

按以下顺序:可选的<caption>元素,零个或多个<colgroup>元素,可选的<thead>元素,可以是以下任一元素:零个或多个<tbody>元素一个或多个<tr>元素可选<tfoot >元素

标记遗漏

没有,起始和结束标签都是强制性的。

允许父母

任何接受流内容的元素

允许ARIA角色

任何

DOM界面

HTMLTableElement

  1. 一个可选<caption>元素,
  2. 零个或多个<colgroup>元素,
  3. 一个可选<thead>元素,
  4. 以下任何一项:
    • 零个或多个<tbody>元素
    • 一个或多个<tr>元素
  5. 一个可选<tfoot>元素
Tag omission None, both the starting and ending tag are mandatory.   Permitted parents Any element that accepts flow content   Permitted ARIA roles Any   DOM interface [`HTMLTableElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement)   

属性

该元素包含全局属性。此页面上列出的以下属性现在已被弃用。

align此枚举属性指示如何在包含文档中对齐表。它可能有以下值:

  • left:表格显示在文档的左侧;
  • center:表格显示在文档的中心;
  • right:表格显示在文档的右侧。

用法说明

  • 不要使用此属性,因为它已被弃用。该<table>元素应该使用CSS进行样式化。设置margin-leftmargin-rightautomargin0 auto达到类似于align属性的效果。
  • 之前火狐4,火狐也支持middleabsmiddleabscenter值作为同义词center,仅在特殊模式。

bgcolor属性定义表格的背景颜色。它由sRGB中定义的6位十六进制代码组成,前缀为'#'。该属性可以与十六个预定义颜色字符串中的一个一起使用:

black = "#000000"

green = "#008000"

silver = "#C0C0C0"

lime = "#00FF00"

gray = "#808080"

olive = "#808000"

white = "#FFFFFF"

yellow = "#FFFF00"

maroon = "#800000"

navy = "#000080"

red = "#FF0000"

blue = "#0000FF"

purple = "#800080"

teal = "#008080"

fuchsia = "#FF00FF"

aqua = "#00FFFF"

使用说明:不要使用此属性,因为它已被弃用。<table>元素应该使用CSS进行样式化。使用CSS中的background-color属性创建与bgcolor属性类似的效果。

border此整数属性以像素为单位定义表格周围框架的大小。如果设置为0,则该frame属性设置为void。

使用说明:不要使用此属性,因为它已被弃用。该<table>元素应该使用CSS进行样式化。要创建类似border属性的效果borderborder-colorborder-widthborder-styleCSS属性应该被使用。

cellpadding属性定义了单元格的内容与其边框之间的空格,显示与否。如果cellpadding的长度以像素定义,则此像素大小的空间将应用于单元格内容的所有四边。如果长度是使用百分比值定义的,则内容将居中并且总的垂直空间(顶部和底部)将表示该值。总水平空间也是如此(左侧和右侧)。

使用说明:不要使用此属性,因为它已被弃用。该<table>元素应该使用CSS进行样式化。要创建类似的cellpadding属性的效果,适用于border-collapse属性的<table>元素,它的值设置为崩溃,该padding财产的<td>元素。

cellspacing属性以百分比值或像素定义两个单元格之间的空间大小。该属性在水平和垂直方向上应用到表格的顶部和第一行的单元格之间,表格和第一列的左侧,表格的右侧以及最后一列和底部表和最后一行。

使用说明:不要使用此属性,因为它已被弃用。<table>元素应该使用CSS进行样式化。要创建与cellspacing属性类似的效果,请将该属性应用于border-spacing<table>元素。如果border-collapse设置为折叠,则边框间距不起任何作用。

frame此枚举属性定义了必须显示表格周围框架的哪一侧。它可能有以下值:

above

below

hsides

vsides

lhs

rhs

border

box

void

使用说明:不要使用此属性,因为它已被弃用。该<table>元素应该使用CSS进行样式化。要创建类似于框架属性的效果,请使用border-styleborder-width属性。

rules此枚举属性定义规则(即行)应出现在表中的位置。它可以有以下值:

  • 无,表示不会显示任何规则; 它是默认值;
  • 行组(由定义的之间被显示的组,这将导致的规则<thead><tbody><tfoot>元素)和列组之间(由定义<col><colgroup>元素)仅;
  • 行,这将导致规则在行之间显示;
  • 列,这将导致规则在列之间显示;
  • 所有这些都会导致规则在行和列之间显示。

注意

  • 规则的样式依赖于浏览器,不能修改。
  • 不要使用此属性,因为它已被弃用。应该使用CSS定义和设置规则。在应用border属性到合适的<thead><tbody><tfoot><col><colgroup>元素。

summary属性定义了汇总表格内容的替代文本。通常情况下,它允许有盲人屏幕浏览网页的视障人士获取关于表格的信息。如果通过此属性添加的信息对未视觉障碍的人也有用,请考虑使用<caption>替代方法。摘要属性不是强制性的,当<caption>元素履行其职责时可以省略。

用法注意:不要使用此属性,因为它已被弃用。相反,请选择其中一种方法来添加表格的说明:

  • 在表格周围使用散文(这种方法语义较少)。
  • 在表格<caption>元素中添加说明。
  • <details>在表格的<caption>元素内添加一个元素的描述。
  • <table>元素包含在元素中,<figure>并在旁边添加散文中的描述。
  • <table>元素包含在元素中<figure>,并将元素中的描述添加为散文<figcaption>
  • 调整表格以便不需要描述(例如使用<th><thead>元素)。

width属性定义了表格的宽度。宽度可以由像素或百分比值来定义。百分比值将由放置表的容器的宽度来定义。

用法注意:不要使用此属性,因为它已被弃用。应该使用CSS定义和设置规则。改用width属性。

示例

简单的表格

<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

更多示例

<p>Simple table with header</p>
<table>
  <tr>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

<p>Table with thead, tfoot, and tbody</p>
<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
</table>

<p>Table with colgroup</p>
<table>
  <colgroup span="4"></colgroup>
  <tr>
    <th>Countries</th>
    <th>Capitals</th>
    <th>Population</th>
    <th>Language</th>
  </tr>
  <tr>
    <td>USA</td>
    <td>Washington D.C.</td>
    <td>309 million</td>
    <td>English</td>
  </tr>
  <tr>
    <td>Sweden</td>
    <td>Stockholm</td>
    <td>9 million</td>
    <td>Swedish</td>
  </tr>
</table>

<p>Table with colgroup and col</p>
<table>
  <colgroup>
    <col style="background-color: #0f0">
    <col span="2">
  </colgroup>
  <tr>
    <th>Lime</th>
    <th>Lemon</th>
    <th>Orange</th>
  </tr>
  <tr>
    <td>Green</td>
    <td>Yellow</td>
    <td>Orange</td>
  </tr>
</table>

<p>Simple table with caption</p>
<table>
  <caption>Awesome caption</caption>
  <tr>
    <td>Awesome data</td>
  </tr>
</table>

规范

规范

状态

评论

HTML Living Standard规范中'表元素'的定义。

Living Standard

HTML5该规范中'表元素'的定义。

建议

浏览器兼容性

Feature

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

Basic Support

1

(Yes)

1

(Yes)

(Yes)

(Yes)

align

1

(Yes)

1

(Yes)

(Yes)

(Yes)

bgcolor

1

(Yes)

1

(Yes)

(Yes)

(Yes)

border

1

(Yes)

1

(Yes)

(Yes)

(Yes)

cellpadding

1

(Yes)

1

(Yes)

(Yes)

(Yes)

cellspacing

1

(Yes)

1

(Yes)

(Yes)

(Yes)

frame

1

(Yes)

1

(Yes)

(Yes)

(Yes)

rules

1

(Yes)

1

(Yes)

(Yes)

(Yes)

summary

1

(Yes)

1

(Yes)

(Yes)

(Yes)

width

1

(Yes)

1

(Yes)

(Yes)

(Yes)

Feature

Android

Chrome for Android

Edge mobile

Firefox for Android

IE mobile

Opera Android

iOS Safari

Basic Support

1

1

(Yes)

1

(Yes)

(Yes)

(Yes)

align

1

1

(Yes)

1

(Yes)

(Yes)

(Yes)

bgcolor

1

1

(Yes)

1

(Yes)

(Yes)

(Yes)

border

1

1

(Yes)

1

(Yes)

(Yes)

(Yes)

cellpadding

1

1

(Yes)

1

(Yes)

(Yes)

(Yes)

cellspacing

1

1

(Yes)

1

(Yes)

(Yes)

(Yes)

frame

1

1

(Yes)

1

(Yes)

(Yes)

(Yes)

rules

1

1

(Yes)

1

(Yes)

(Yes)

(Yes)

summary

1

1

(Yes)

1

(Yes)

(Yes)

(Yes)

width

1

1

(Yes)

1

(Yes)

(Yes)

(Yes)

HTML

超文本标记语言,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。