| 内容分类 | 流动内容 |
|---|---|
| 允许的内容 |
按照这个顺序：
|
| 标签省略 | {{no_tag_omission}} |
| 允许的父元素 | 任何支持流内容的元素 |
| 允许的 ARIA 角色 | Any |
| DOM 接口 | {{domxref("HTMLTableElement")}} |
表格标签支持全局属性。下面列出的属性现在已经弃用（请使用 CSS 代替）。
auto ( 或者 {{cssxref("margin")}} 设置为 0 auto) 来实现类似于 align 属性的效果。middle， absmiddle 和近似于 center 的 abscenter 。| 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" |
| above | below | ||
| hsides | vsides | ||
| lhs | rhs | ||
| border | box | ||
| void |
all, 这将使规则在列和行之间显示；
小贴士：
<table>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</table>
{{EmbedLiveSample('简单的表格', '100%', '100', '', 'Web/HTML/Element/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>
<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>
table
{
border-collapse: collapse;
border-spacing: 0px;
}
table, th, td
{
padding: 5px;
border: 1px solid black;
}
{{EmbedLiveSample('更多例子', '100%', '700', '', 'Web/HTML/Element/table')}}
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.
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.
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.
<table>
<caption>Color names and values</caption>
<tbody>
<tr>
<th scope="col">Name</th>
<th scope="col">HEX</th>
<th scope="col">HSLa</th>
<th scope="col">RGBa</th>
</tr>
<tr>
<th scope="row">Teal</th>
<td><code>#51F6F6</code></td>
<td><code>hsla(180, 90%, 64%, 1)</code></td>
<td><code>rgba(81, 246, 246, 1)</code></td>
</tr>
<tr>
<th scope="row">Goldenrod</th>
<td><code>#F6BC57</code></td>
<td><code>hsla(38, 90%, 65%, 1)</code></td>
<td><code>rgba(246, 188, 87, 1)</code></td>
</tr>
</tbody>
</table>
Providing a declaration of scope="col" on a {{HTMLElement("th")}} element will help describe that the cell is at the top of a column. Providing a declaration of scope="row" on a {{HTMLElement("td")}} element will help describe that the cell is the first in a row.
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.
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 colspan and rowspan 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.
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.
| Specification | Status | Comment |
|---|---|---|
| {{SpecName('HTML WHATWG','tables.html#the-table-element','table element')}} | {{Spec2('HTML WHATWG')}} | |
| {{SpecName('HTML5 W3C','tabular-data.html#the-table-element','table element')}} | {{Spec2('HTML5 W3C')}} |
{{Compat("html.elements.table")}}