HTML5 <table> Tag

The HTML <table> tag is used to represent tabular data — that is, information expressed via a two-dimensional data table.

Both the starting and ending tag are mandatory for this element. The parent of the <table> tag can be any element that accepts flow content.

The content permitted inside this element should be in the following order:

  1. an optional <caption> element,
  2. zero or more <colgroup> elements,
  3. an optional <thead> element,
  4. an optional <tfoot> element, either before or after one of the following:
    • zero or more <tbody> elements
    • one or more <tr> elements

The following style is applied to this element by default:

table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}

Here are some example of using this tag:

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


<!-- Table with a colgroup -->
<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>

Attributes

This element only accepts global attributes.

Examples

See the Pen HTML table Tag by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <table> element on MDN.
  2. You can also read the HTML <table> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top