path: root/files/zh-cn/web/html/element/table/index.html

---
title: <table>
slug: Web/HTML/Element/table
tags:
  - CSS
  - HTML
  - Web
  - table
  - 元素
  - 参考
  - 表格
  - 表格数据
translation_of: Web/HTML/Element/table
---
<div>{{HTMLRef}}</div>

<p><strong>HTML</strong>的 <strong><code>table</code> </strong>元素表示表格数据 — 即通过二维数据表表示的信息。</p>

<div>{{EmbedInteractiveExample("pages/tabbed/table.html","tabbed-standard")}}</div>

<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories">内容分类</a></th>
   <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content">流动内容</a></td>
  </tr>
  <tr>
   <th scope="row">允许的内容</th>
   <td>
    <div class="content-models">
    <div id="table-mdls">按照这个顺序：
    <ul>
     <li>一个可选的 {{HTMLElement("caption")}} 元素</li>
     <li>零个或多个的 {{HTMLElement("colgroup")}} 元素</li>
     <li>一个可选的 {{HTMLElement("thead")}} 元素</li>
     <li>下列任意一个：
      <ul>
       <li>零个或多个 {{HTMLElement("tbody")}}</li>
       <li>零个或多个 {{HTMLElement("tr")}}</li>
      </ul>
     </li>
     <li>一个可选的 {{HTMLElement("tfoot")}} 元素</li>
    </ul>
    </div>
    </div>
   </td>
  </tr>
  <tr>
   <th scope="row">标签省略</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">允许的父元素</th>
   <td>任何支持<a href="/en-US/docs/HTML/Content_categories#Flow_content">流内容</a>的元素</td>
  </tr>
  <tr>
   <th scope="row">允许的 ARIA 角色</th>
   <td>Any</td>
  </tr>
  <tr>
   <th scope="row">DOM 接口</th>
   <td>{{domxref("HTMLTableElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="属性"> 属性</h2>

<p><span style="line-height: 21px;">表格标签支持</span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">全局属性</a><span style="line-height: 21px;">。下面列出的属性现在已经弃用（请使用 CSS 代替）。</span></p>

<dl>
 <dt>{{htmlattrdef("align")}} {{Deprecated_inline}}</dt>
 <dd> 这个枚举属性指定了包含在文档中的表格必须如何对齐。有如下值：
 <ul>
  <li><span>left</span>，表格将在文档左侧显示；</li>
  <li><span>center，</span> 表格将在文档中央显示；</li>
  <li><span>right</span>， 表格将在文档右侧显示；</li>
 </ul>

 <div class="note"><strong>小贴士：</strong>

 <ul>
  <li><strong>不要使用这个属性</strong>，它已经不赞成被使用。  {{HTMLElement("table")}} 元素应该使用<a href="/en-US/docs/CSS" title="CSS">CSS</a> 制定样式。设置 {{cssxref("margin-left")}} 、{{cssxref("margin-right")}} 为 <code>auto</code> ( 或者 {{cssxref("margin")}} <code>设置为 0 auto</code>) 来实现类似于 align 属性的效果。</li>
  <li>Firefox 4 之前的版本，在 quirks mode  模式下它还支持 <code>middle，</code> <code>absmiddle</code> <code>和近似于 center 的 abscenter</code> <em>。</em></li>
 </ul>
 </div>
 </dd>
</dl>

<dl>
 <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt>
 <dd>这个属性定义了表格的背景颜色。 它是一个 6 位的十六进制编码，定义于 <a class="external" href="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>，需要加上'#'作为前缀。 当然也可以使用下面已经被预先定义的字符串，来表示常用的 16 种颜色：
 <table>
  <tbody>
   <tr>
    <td style="width: 24px; background-color: black;"></td>
    <td><span>black</span> = "#000000"</td>
    <td style="width: 24px; background-color: green;"></td>
    <td><span>green</span> = "#008000"</td>
   </tr>
   <tr>
    <td style="width: 24px; background-color: silver;"></td>
    <td><span>silver</span> = "#C0C0C0"</td>
    <td style="width: 24px; background-color: lime;"></td>
    <td><span>lime</span> = "#00FF00"</td>
   </tr>
   <tr>
    <td style="width: 24px; background-color: gray;"></td>
    <td><span>gray</span> = "#808080"</td>
    <td style="width: 24px; background-color: olive;"></td>
    <td><span>olive</span> = "#808000"</td>
   </tr>
   <tr>
    <td style="width: 24px; background-color: white;"></td>
    <td><span>white</span> = "#FFFFFF"</td>
    <td style="width: 24px; background-color: yellow;"></td>
    <td><span>yellow</span> = "#FFFF00"</td>
   </tr>
   <tr>
    <td style="width: 24px; background-color: maroon;"></td>
    <td><span>maroon</span> = "#800000"</td>
    <td style="width: 24px; background-color: navy;"></td>
    <td><span>navy</span> = "#000080"</td>
   </tr>
   <tr>
    <td style="width: 24px; background-color: red;"></td>
    <td><span>red</span> = "#FF0000"</td>
    <td style="width: 24px; background-color: blue;"></td>
    <td><span>blue</span> = "#0000FF"</td>
   </tr>
   <tr>
    <td style="width: 24px; background-color: purple;"></td>
    <td><span>purple</span> = "#800080"</td>
    <td style="width: 24px; background-color: teal;"></td>
    <td><span>teal</span> = "#008080"</td>
   </tr>
   <tr>
    <td style="width: 24px; background-color: fuchsia;"></td>
    <td><span>fuchsia</span> = "#FF00FF"</td>
    <td style="width: 24px; background-color: aqua;"></td>
    <td><span>aqua</span> = "#00FFFF"</td>
   </tr>
  </tbody>
 </table>

 <div class="note"><strong>小贴士：</strong>不要使用这个属性，该属性已废弃，{{HTMLElement("table")}} 元素应当使用 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 定制样式。 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 中的 {{cssxref("background-color")}} 属性能够和 bgcolor 属性达到一样的效果。</div>
 </dd>
</dl>

<dl>
 <dt>{{htmlattrdef("border")}} {{Deprecated_inline}}</dt>
 <dd>这个整型元素使用像素，定义了表格边框的大小。 如果设置为 0，这意味着{{htmlattrxref("frame", "table")}} 属性被设置为空。如果设置为 1，表示表格具有 1px 大小的边框。
 <div class="note"><strong>小贴士：</strong>不要使用这个属性，该属性已废弃，{{HTMLElement("table")}} 元素应当使用 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 定制样式。 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 属性 {{cssxref("border")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}} 和 {{cssxref("border-style")}} 可实现相同效果。</div>
 </dd>
</dl>

<dl>
 <dt>{{htmlattrdef("cellpadding")}} {{Deprecated_inline}}</dt>
 <dd>这个属性定义了表格单元的内容和边框之间的空间。如果它是一个像素长度单位，这个像素将被应用到所有的四个侧边；如果它是一个百分比的长度单位，内容将被作为中心，总的垂直（上和下）长度将代表这个百分比。这同样适用于总的水平（左和右）空间。
 <div class="note"><strong>小贴士：不要使用这个属性</strong>，因为它已经被废弃。 {{HTMLElement("table")}} 元素应该使用<a href="/en-US/docs/CSS" title="CSS"> CSS</a> 定制样式。 在{{HTMLElement("table")}} 元素上使用 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 属性值为 collapse 的 {{cssxref("border-collapse")}} 属性，在 {{HTMLElement("td")}} 元素上使用属性 {{cssxref("padding")}}，以达到类似于 cellpadding 的效果。</div>
 </dd>
</dl>

<dl>
 <dt>{{htmlattrdef("cellspacing")}} {{Deprecated_inline}}</dt>
 <dd>这个属性（使用百分比或像素）定义了两个单元格之间空间的大小（从水平和垂直方向上），包括了表格的顶部与第一行的单元格，表的左边与第一列单元格，表的右边与最后一列的单元格，表的底部与最后一行单元格之间的空间。
 <div class="note"><strong>小贴士：不要使用这个属性，因为它已经被废弃。</strong> {{HTMLElement("table")}} 元素应该使用 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 定制样式。在<span style="line-height: 1.5;"> {{HTMLElement("table")}} 元素上</span>使用 CSS 的属性 {{cssxref("border-spacing")}}<span style="line-height: 1.5;"> </span>，以达到类似于 cellspacing 的效果。</div>
 </dd>
</dl>

<dl>
 <dt>{{htmlattrdef("frame")}} {{Deprecated_inline}}</dt>
 <dd>这个枚举属性定义了包围在表格周围的框架的哪个边必须显示。它可能有下列值：
 <table style="width: 668px;">
  <tbody>
   <tr>
    <td style="width: 24px; background-color: rgb(224, 224, 224);"></td>
    <td><span>above</span></td>
    <td style="width: 24px; background-color: rgb(224, 224, 224);"></td>
    <td><span>below</span></td>
   </tr>
   <tr>
    <td style="width: 24px; background-color: rgb(224, 224, 224);"></td>
    <td><span>hsides</span></td>
    <td style="width: 24px; background-color: rgb(224, 224, 224);"></td>
    <td><span>vsides</span></td>
   </tr>
   <tr>
    <td style="width: 24px; background-color: rgb(224, 224, 224);"></td>
    <td><span>lhs</span></td>
    <td style="width: 24px; background-color: rgb(224, 224, 224);"></td>
    <td><span>rhs</span></td>
   </tr>
   <tr>
    <td style="width: 24px; background-color: rgb(224, 224, 224);"></td>
    <td><span>border</span></td>
    <td style="width: 24px; background-color: rgb(224, 224, 224);"></td>
    <td><span>box</span></td>
   </tr>
   <tr>
    <td style="width: 24px; background-color: rgb(224, 224, 224);"></td>
    <td><span>void</span></td>
   </tr>
  </tbody>
 </table>

 <div class="note"><strong>小贴士：不要使用这个属性，因为它已经被废弃。</strong> {{HTMLElement("table")}} 元素应该使用 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 定制样式。在<span style="line-height: 1.5;"> {{HTMLElement("table")}} 元素上</span>使用 CSS 的属性 {{cssxref(" border-style ")}}<span style="line-height: 1.5;"> 和 </span> {{cssxref("border-width")}} ，以达到类似于 frame 的效果。</div>
 </dd>
</dl>

<dl>
 <dt>{{htmlattrdef("rules")}} {{Deprecated_inline()}}</dt>
 <dd>这个枚举属性定义了在一个表格中规则的显示位置。它可以有以下值：:
 <ul>
  <li><span>none</span>, 这表明没有规格将被显示；这是默认的值；</li>
  <li><span>groups</span>, 这将使规则只显示在行组（row groups，通过 {{HTMLElement("thead")}} ， {{HTMLElement("tbody")}} 和 {{HTMLElement("tfoot")}} 元素定义）和列组（ column groups，通过{{HTMLElement("col")}} 和 {{HTMLElement("colgroup")}} 元素定义）之间</li>
  <li><span>rows</span>, 这将使规则在行之间显示；</li>
  <li><span>columns</span>, 这将使规则在列之间显示；</li>
  <li>
   <p><span>all</span>, 这将使规则在列和行之间显示；</p>
  </li>
 </ul>

 <div class="note">
 <p><strong>小贴士： </strong></p>

 <ul>
  <li>规则的样式是依赖浏览器的（browser-dependant），并且 不能被修改。</li>
  <li><strong>不要使用这个属性，因为它已经被废弃。</strong>规则应该使用 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 定义和设计样式。使用 {{cssxref("border")}} 属性，在适当的 {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("col")}} 或 {{HTMLElement("colgroup")}} 元素上。</li>
 </ul>
 </div>
 </dd>
 <dt>{{htmlattrdef("summary")}} {{Deprecated_inline}}</dt>
 <dd>该属性定义了一个替代文本，当表格无法在用户代理中显示的时候用来描述表格。通常，它被用来为残障人士提供可用性，比如，盲人使用盲文屏幕（Braille screen）浏览网页，从中获取信息。如果要想对于非视力受限的人来说也可以提供作用，考虑使用 {{HTMLElement("caption")}} 代替。summary 属性不是强制性的，当一个 {{HTMLElement("caption")}} 发挥它应有的作用时，可以省略 summary 属性。
 <div class="note"><strong>小贴士：</strong> <strong>不要使用这个属性，因为它已经被废弃。</strong> 作为替代，选择其中一种方法为表格添加描述：
 <ul>
  <li>Use prose around the table (this method is less semantic).</li>
  <li>在表格的 {{HTMLElement("caption")}} 元素中添加描述。</li>
  <li>在表格的 {{HTMLElement("caption")}} 元素中，添加一个带有描述的 {{HTMLElement("details")}} 元素。</li>
  <li>将 {{HTMLElement("table")}} 元素包含在一个{{HTMLElement("figure")}} 元素中，并且在旁边添加散文（prose ）描述。</li>
  <li>将 {{HTMLElement("table")}} 元素包含在一个{{HTMLElement("figure")}} 元素中，并且在 {{HTMLElement("thead")}} 元素中添加散文（prose ）描述。</li>
  <li>调整表格，以便不需要这样的描述 (比如，使用 {{HTMLElement("th")}} 和 {{HTMLElement("thead")}} 元素)。</li>
 </ul>
 </div>
 </dd>
 <dt>{{htmlattrdef("width")}} {{Deprecated_inline}}</dt>
 <dd>该属性定义了表格的宽度。宽度可能是一个像素或者是一个百分比值，宽度的百分比值将被定义为表格容器的宽度。
 <div class="note"><strong>小贴士：</strong> <strong>不要使用这个属性，因为它已经被废弃。</strong>规则应该使用 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 定义和设计样式。使用 {{cssxref("width")}} 属性代替。</div>
 </dd>
</dl>

<h2 id="示例">示例</h2>

<h3 id="简单的表格">简单的表格</h3>

<pre class="brush: html" style="font-size: 12px;">&lt;table&gt;
  &lt;tr&gt;
    &lt;td&gt;John&lt;/td&gt;
    &lt;td&gt;Doe&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Jane&lt;/td&gt;
    &lt;td&gt;Doe&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
</pre>

<p>{{EmbedLiveSample('简单的表格', '100%', '100', '', 'Web/HTML/Element/table')}}</p>

<h3 id="更多例子">更多例子</h3>

<pre class="brush: html">&lt;p&gt;Simple table with header&lt;/p&gt;
&lt;table&gt;
  &lt;tr&gt;
    &lt;th&gt;First name&lt;/th&gt;
    &lt;th&gt;Last name&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;John&lt;/td&gt;
    &lt;td&gt;Doe&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Jane&lt;/td&gt;
    &lt;td&gt;Doe&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;

&lt;p&gt;Table with thead, tfoot, and tbody&lt;/p&gt;
&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Header content 1&lt;/th&gt;
      &lt;th&gt;Header content 2&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tfoot&gt;
    &lt;tr&gt;
      &lt;td&gt;Footer content 1&lt;/td&gt;
      &lt;td&gt;Footer content 2&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tfoot&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;Body content 1&lt;/td&gt;
      &lt;td&gt;Body content 2&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;

&lt;p&gt;Table with colgroup&lt;/p&gt;
&lt;table&gt;
  &lt;colgroup span="4" class="columns"&gt;&lt;/colgroup&gt;
  &lt;tr&gt;
    &lt;th&gt;Countries&lt;/th&gt;
    &lt;th&gt;Capitals&lt;/th&gt;
    &lt;th&gt;Population&lt;/th&gt;
    &lt;th&gt;Language&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;USA&lt;/td&gt;
    &lt;td&gt;Washington D.C.&lt;/td&gt;
    &lt;td&gt;309 million&lt;/td&gt;
    &lt;td&gt;English&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Sweden&lt;/td&gt;
    &lt;td&gt;Stockholm&lt;/td&gt;
    &lt;td&gt;9 million&lt;/td&gt;
    &lt;td&gt;Swedish&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;

&lt;p&gt;Table with colgroup and col&lt;/p&gt;
&lt;table&gt;
  &lt;colgroup&gt;
    &lt;col class="column1"&gt;
    &lt;col class="columns2plus3" span="2"&gt;
  &lt;/colgroup&gt;
  &lt;tr&gt;
    &lt;th&gt;Lime&lt;/th&gt;
    &lt;th&gt;Lemon&lt;/th&gt;
    &lt;th&gt;Orange&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Green&lt;/td&gt;
    &lt;td&gt;Yellow&lt;/td&gt;
    &lt;td&gt;Orange&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;

&lt;p&gt;Simple table with caption&lt;/p&gt;
&lt;table&gt;
  &lt;caption&gt;Awesome caption&lt;/caption&gt;
  &lt;tr&gt;
    &lt;td&gt;Awesome data&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
</pre>

<div class="hidden">
<pre class="brush: css">table
{
border-collapse: collapse;
border-spacing: 0px;
}
table, th, td
{
padding: 5px;
border: 1px solid black;
}</pre>
</div>

<p>{{EmbedLiveSample('更多例子', '100%', '700', '', 'Web/HTML/Element/table')}}</p>

<h2 id="Accessibility_concerns">Accessibility concerns</h2>

<h3 id="Captions">Captions</h3>

<p>By supplying a {{HTMLElement("caption")}} element whose value clearly and concisely describes the table's purpose, it helps the people decide if they need to read the rest of the table content or skip over it.</p>

<p>This helps people navigating with the aid of assistive technology such as a screen reader, people experiencing low vision conditions, and people with cognitive concerns.</p>

<ul>
 <li><a href="/en-US/docs/Learn/HTML/Tables/Advanced#Adding_a_caption_to_your_table_with_&lt;caption>">MDN Adding a caption to your table with &lt;caption&gt;</a></li>
 <li><a href="https://www.w3.org/WAI/tutorials/tables/caption-summary/">Caption &amp; Summary • Tables • W3C WAI Web Accessibility Tutorials</a></li>
</ul>

<h3 id="Scoping_rows_and_columns">Scoping rows and columns</h3>

<p>The {{htmlattrxref("scope", "th")}} attribute on header elements is redundant in simple contexts, because scope is inferred. However, some assistive technologies may fail to draw correct inferences, so specifying header scope may improve user experiences. In complex tables, scope can be specified so as to provide necessary information about the cells related to a header.</p>

<h4 id="Example">Example</h4>

<pre class="brush: html">&lt;table&gt;
  &lt;caption&gt;Color names and values&lt;/caption&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;th scope="col"&gt;Name&lt;/th&gt;
      &lt;th scope="col"&gt;HEX&lt;/th&gt;
      &lt;th scope="col"&gt;HSLa&lt;/th&gt;
      &lt;th scope="col"&gt;RGBa&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th scope="row"&gt;Teal&lt;/th&gt;
      &lt;td&gt;&lt;code&gt;#51F6F6&lt;/code&gt;&lt;/td&gt;
      &lt;td&gt;&lt;code&gt;hsla(180, 90%, 64%, 1)&lt;/code&gt;&lt;/td&gt;
      &lt;td&gt;&lt;code&gt;rgba(81, 246, 246, 1)&lt;/code&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th scope="row"&gt;Goldenrod&lt;/th&gt;
      &lt;td&gt;&lt;code&gt;#F6BC57&lt;/code&gt;&lt;/td&gt;
      &lt;td&gt;&lt;code&gt;hsla(38, 90%, 65%, 1)&lt;/code&gt;&lt;/td&gt;
      &lt;td&gt;&lt;code&gt;rgba(246, 188, 87, 1)&lt;/code&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
</pre>

<p>Providing a declaration of <code>scope="col"</code> on a {{HTMLElement("th")}} element will help describe that the cell is at the top of a column. Providing a declaration of <code>scope="row"</code> on a {{HTMLElement("td")}} element will help describe that the cell is the first in a row.</p>

<ul>
 <li><a href="/en-US/docs/Learn/HTML/Tables/Advanced#Tables_for_visually_impaired_users">MDN Tables for visually impaired users</a></li>
 <li><a href="https://www.w3.org/WAI/tutorials/tables/two-headers/">Tables with two headers • Tables • W3C WAI Web Accessibility Tutorials</a></li>
 <li><a href="https://www.w3.org/WAI/tutorials/tables/irregular/">Tables with irregular headers • Tables • W3C WAI Web Accessibility Tutorials</a></li>
 <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H63.html">H63: Using the scope attribute to associate header cells and data cells in data tables | W3C Techniques for WCAG 2.0</a></li>
</ul>

<h3 id="Complicated_tables">Complicated tables</h3>

<p>Assistive technology such as screen readers may have difficulty parsing tables that are so complex that header cells can’t be associated in a strictly horizontal or vertical way. This is typically indicated by the presence of the {{htmlattrxref("colspan", "td")}} and {{htmlattrxref("rowspan", "td")}} attributes.</p>

<p>Ideally, consider alternate ways to present the table's content, including breaking it apart into a collection of smaller, related tables that don't have to rely on using the <code>colspan</code> and <code>rowspan</code> attributes. In addition to helping people who use assistive technology understand the table's content, this may also benefit people with cognitive concerns who may have difficulty understanding the associations the table layout is describing.</p>

<p>If the table cannot be broken apart, use a combination of the {{htmlattrxref("id")}} and {{htmlattrxref("headers", "td")}} attributes to programmatically associate each table cell with the header(s) the cell is associated with.</p>

<ul>
 <li><a href="/en-US/docs/Learn/HTML/Tables/Advanced#Tables_for_visually_impaired_users">MDN Tables for visually impaired users</a></li>
 <li><a href="https://www.w3.org/WAI/tutorials/tables/multi-level/">Tables with multi-level headers • Tables • W3C WAI Web Accessibility Tutorials</a></li>
 <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H43.html">H43: Using id and headers attributes to associate data cells with header cells in data tables | Techniques for W3C WCAG 2.0</a></li>
 <li><a href="http://www.coding-dude.com/wp/html5/bar-chart-html/">Creating a bar chart from a HTML table</a></li>
</ul>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG','tables.html#the-table-element','table element')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C','tabular-data.html#the-table-element','table element')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>



<p>{{Compat("html.elements.table")}}</p>

<h2 id="相关">相关</h2>

<ul>
 <li>其它表格相关的 HTML 元素: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li>
 <li>可能特别有用的关于设定表格元素样式的 CSS 属性：
  <ul>
   <li>{{cssxref("width")}} 控制表格的宽度；</li>
   <li>{{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-collapse")}}, {{cssxref("border-spacing")}} 控制单元格边框，规则和框架方面；</li>
   <li>{{cssxref("margin")}} 和{{cssxref("padding")}} 设定特定的单元格内容样式；</li>
   <li>{{cssxref("text-align")}} 和{{cssxref("vertical-align")}} 定义文本和单元格内容的对齐方式。</li>
  </ul>
 </li>
</ul>