Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

翻译正在进行中。

总结

HTML中table标签 (<table>) 用来展示多行的数据。

小贴士: CSS 创建之前, HTML <table> 元素常常被用于布局页面 . 这种用法在 HTML 4之后不被推荐使用, 并且 <table>元素 不应该 被用于此目的.

使用语境

内容类别 内容流
被许可的 内容
按照这个顺序:
  • 一个可选的 <caption> 标题元素,
  • 大于等于0个的 <colgroup> 列元素,
  • 一个可选的 <thead> 表头元素,
  • 以下二选一:
    • 一个 <tfoot> 表尾元素, 后续为:
      • 大于等于零个<tbody> 元素,
      • 或者一个或多个<tr> 元素, 
    • 第二个可选项紧跟着的是一个可选的<tfoot> 元素:
      • 零个 或者 非零个 <tbody> 元素,
      • 或者一个或多个 <tr> 元素
可以省略的标签 无, 开始标签和结束标签都是强制要求的
被许可的父元素 任何支持内容流的元素
规范文档 HTML5, section 4.9.1 (HTML4.01, section 11.2.1)

属性

表格标签支持 全局属性. 列在这个页面的其他属性有可能会被弃用.

align
 这个枚举属性指定了表格在包含文档中必须如何对齐。有如下值:
  • left, 表格将在文档左侧显示;
  • center, 在文档中央显示;
  • right, 在文档右侧显示.
小贴士: 
  • 不要使用这个属性, 它已经被不赞成使用。  <table> 元素应该使用CSS 制定样式. 为了给出与 align 属性相似的效果,  CSS 布局应该这样应用, 像 margin-leftmargin-right set to auto ( or margin to 0 auto) 来居中.
  • 早期的 Firefox 4, Firefox 也被支持, in quirks mode only, the values middle, absmiddle, and abscenter as synonyms of center
bgcolor
这个属性定义了表格及其内容的背景颜色。 它是一个6位的十六进制编码,定义于 sRGB,需要加上'#'作为前缀。 当然也可以使用下面已经被预先定义的字符串,来表示常用的16种颜色:
  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 元素会被设置为空.
Usage note: Do not use this attribute, as it has been deprecated and the <table> element should be styled using CSS. To give an effect similar to the border attribute, the CSS properties border, border-color, border-width and border-style should be used.
cellpadding
This attribute defines the space between the content of a cell and the border, displayed or not, of it. If it is a pixel length, this pixel-sized space will be applied on all four sides; if it is a percentage length, the content will be centered and the total vertical space (top and bottom) will represent this percentage. The same is true for the total horizontal space (left and right).
Usage note: Do not use this attribute, as it has been deprecated and the <table> element should be styled using CSS. To give an effect similar to the border attribute, use the CSS property border-collapse with the value collapse on the  <table> element itself, and the property padding on the <td>.
cellspacing
This attribute defines the size, in percentage or in pixels, of the space between two cells (both horizontally and vertically), between the top of the table and the cells of the first row, the left of the table and the first column, the right of the table and the last column and the bottom of the table and the last row.
Usage note: Do not use this attribute, as it has been deprecated and the <table> element should be styled using CSS. To give an effect similar to the cellspacing attribute, use the CSS property border-spacing on the <table> element itself.
frame
This enumerated attribute defines which side of the frame surrounding the table must be displayed. It may have the following values:
  above   below
  hsides   vsides
  lhs   rhs
  border   box
  void
Usage note: Do not use this attribute, as it has been deprecated and the <table> element should be styled using CSS. To give an effect similar to the frame attribute, use the CSS properties border-style and border-width.
rules
This enumerated attribute defines where rules, i.e. lines, should appear in a table. It can have the following values:
  • none, which indicates the no rules will be displayed; it is the default value;
  • groups, which will make the rules to be displayed between row groups (defined by the <thead>, <tbody> and <tfoot> elements) and between column groups (defined by the <col> and <colgroup> elements) only;
  • rows, which will make the rules to be displayed between rows;
  • columns, which will make the rules to be displayed between columns;
  • all, which wil make the rules to be displayed between rows and columns.
Note:
  • The styling of the rules is browser-dependant and cannot be modified.
  • Do not use this attribute, as it has been deprecated and the rules should be defined and styled using CSS. Use the CSS property border on the adequate <thead>, <tbody>, <tfoot>, <col> or <colgroup> elements.
summary
This attribute defines an alternative text use to describe the table in user-agent unable to display it. Typically, it contents a description of it to allow visually impaired people, like blind people browsing the web using Braille screen, to get the information in it. If the information added in this attribute may also be useful for non-visually impaired people, consider using the <caption> instead. The summary attribute is not mandatory and may be omitted when a <caption> element fulfills its role.
Usage Note: Do not use this attribute, as it has been deprecated. Instead, use one of these way of describing a table:
  • In prose, surrounding the table (this is the less semantic-conveying way of doing it).
  • In the table's <caption> element.
  • In a <details> element, inside the table's <caption> element.
  • Include the <table> element in a <figure> element and add the description in prose next to it.
  • Include the <table> element in a <figure> element and add the description in prose inside a <figcaption> element.
  • Adjust the table so that such description is no more needed, by using <th> and <thead> elements for example.
width
This attribute defines the width of the table. It may either be a pixel length or a percentage value, representing the percentage of the width of its container that the table should use.
Usage Note: Do not use this attribute, as it has been deprecated and the rules should be defined and styled using CSS. Use the CSS property width instead.

DOM interface

This element implements the HTMLTableElement interface.

Examples

Simple Table

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

More Examples

<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>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
</table>

<p>Table with colgroup</p>
<table>
  <colgroup span="4" class="columns"></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 class="column1">
    <col class="columns2plus3" 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>

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 4.0 7.0 1.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1) 6.0 6.0 1.0

There is an Internet Explorer 9 rendering bug involving <table> and :hover; see the "Browser compatibility" section of the :hover article for details.

See also

文档标签和贡献者

标签: 
 此页面的贡献者: studentytj, PandaadnaP, Simcookies, zhe13, hexiaoming, FredWe
 最后编辑者: studentytj,