MDN Web Docs

<table>: The Table element

Reference

The HTML <table> element represents tabular data --- that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.

Attributes

This element supports the global attributes as well as the following element-specific attributes:

align: String.

This enumerated attribute indicates how the table must be aligned inside the containing document.

Do not use this attribute. The <table> element should be styled using CSS.

  • left

    The table is displayed on the left side of the document.

  • center

    The table is displayed in the center of the document.

  • right

    The table is displayed on the right side of the document.

bgcolor: String

This attribute defines the background color of a table. It consists of a 6-digit hexadecimal code prefixed by '#'. This attribute may be used with one of sixteen predefined color strings:

  • 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"

Do not use this attribute. The <table> element should be styled using CSS.

border: Number

This integer attribute defines, in pixels, the size of the frame surrounding the table. If set to 0, the frame attribute is set to void.

Do not use this attribute. The <table> element should be styled using CSS.

cellpadding: Number

This attribute defines the space between the content of a cell and its border, displayed or not. If the cellpadding's length is defined in pixels, this pixel-sized space will be applied to all four sides of the cell\'s content. If the length is defined using a percentage value, the content will be centered and the total vertical space (top and bottom) will represent this value. The same is true for the total horizontal space (left and right).

Do not use this attribute. The <table> element should be styled using CSS.

cellspacing: Number

This attribute defines the size of the space between two cells in a percentage value or pixels. The attribute is applied both horizontally and vertically, to the space 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.

Do not use this attribute. The <table> element should be styled using CSS.

frame: String

This attribute defines which side of the frame surrounding the table must be displayed.

Do not use this attribute. The <table> element should be styled using CSS.

  • above

  • below

  • hsides

  • vsides

  • lhs

  • rhs

  • border

  • box

  • void

rules: String

This enumerated attribute defines where rules, i.e. lines, should appear in a table.

Do not use this attribute. The <table> element should be styled using CSS.

  • none

    No rules will be displayed. This is the default value.

  • groups

    This will cause 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

    This will cause the rules to be displayed between rows.

  • columns

    This will cause the rules to be displayed between columns.

  • all

    This will cause the rules to be displayed between rows and columns.

summary: String

This attribute defines an alternative text that summarizes the content of the table. Typically, it allows visually impaired people who are browsing the web with a Braille screen, to acquire information about the table. If the information added by this attribute is also useful to people who are not visually impaired, consider using the <caption> instead. The summary attribute is not mandatory and may be omitted when a <caption> element fulfills its role.

Do not use this attribute. Instead, choose one of these methods to add a description of a table:

  • Use prose around the table (this method is less semantic).
  • Add a description in the table's <caption> element.
  • Add a description 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 a description is not needed (e.g. use <th> and <thead> elements).

width: String

This attribute defines the width of the table. The width may be defined by pixels or a percentage value. A percentage value will be defined by the width of the container in which the table is placed.

Do not use this attribute. The <table> element should be styled using CSS.

Accessibility concerns

Captions

By supplying a <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.

Scoping rows and columns

Although the scope attribute is obsolete in HTML5, many screen readers rely on the attribute to programmatically replicate the visual associations a person not using a screen reader may be able to infer about a cell\'s position.

Example

<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 <th> element will help describe that the cell is at the top of a column. Providing a declaration of scope="row" on a <td> element will help describe that the cell is the first in a row.

Complicated tables

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 colspan and rowspan 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 id and headers attributes to programmatically associate each table cell with the header(s) the cell is associated with.

Examples

HTML

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

Complex example

HTML

<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>

Result

DesktopMobile
ChromeEdgeChromeEdge
video3Yes?No

See also