HTML <table> (Table) Tag

<table>
<thead>
  <tr>
    <th>Heading</th>
    <th>Heading</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Table data</td>
    <td>Table data</td>
  </tr>
</tbody>
<tfoot>
  <tr>
    <td>Foot data</td>
    <td>Foot data</td>
  </tr>
</tfoot>
</table>

Meaning

The <table> element is used to define a table. Tables should be used to organize data.

The <table> element is a container for HTML table data, which is used to mark up tabular data. Tabular data is any data that can be systematically displayed in rows and columns.

Tables were often used for laying out web pages because tables helped fix the position of text on the page, however, this use has become an outdated. We recommend you use <div> and <span> for fixed layouts. You can still use tables for tabular data.

You might find working with an HTML table editor easier than coding tables by hand, unless you are especially adept at visualizing table row and columns using the appropriate HTML tags. It is easy to miss or drop a tag when coding tables manually, which will cause your table to be malformed.

Notes:

• HTML table includes of one <table> element and one or more <tr>, <th> and <td> elements.
• HTML table may also include <caption>, <colgroup>, <thead>, <tbody>, and <tfoot> elements.

Tip: You can omit <thead>, <tbody>, and <tfoot> elements.

Version: HTML 3.2, 4, 4.01, 5

Standard Syntax

<table>
<thead>
  <tr>
    <th>...</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>...</td>
  </tr>
</tbody>
<tfoot>
  <tr>
    <td>...</td>
  </tr>
</tfoot>
</table>

Browser Support

Status

Global Attributes

The <table> element also supports the Global Attributes in HTML.

Event Attributes

The <table> element also supports the Event Attributes in HTML.

More Examples

The following example show how to add CSS to table:

<style>
table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

table td, table th {
  border: 1px solid #E0E0E0;
  padding: 8px;
  padding: 5px 16px;
  font-weight: 400;
}

table th {
  background-color: #ddd;
  font-family: monaco;
}

table tr:nth-child(even){
  background-color: #f2f2f2;
}
</style>

By Default CSS Value(s)

Most of the browsers will display the <table> element with the following by default value(s)

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