HTML <table> Tag

The <table> tag creates an HTML table, which is a tabular display of data, arranged in rows and columns. Tables are highly configurable with captions, headers, footers, column and row spans, and more.

HTML Tag

Example

#

A <table> with two columns, a styled heading, and three data rows.

First name Last name
Denice Hobermann
Paulo Cornell
Jane Hollander
<style>
  table.tb { border-collapse: collapse; width:300px; }
  .tb th, .tb td { padding: 5px; border: solid 1px #777; }
  .tb th { background-color: lightblue;}
</style>

<table class="tb">
  <tr>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  <tr>
    <td>Denice</td>
    <td>Hobermann</td>
  </tr>
  <tr>
    <td>Paulo</td>
    <td>Cornell</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Hollander</td>
  </tr>
</table>

Using <table>

The <table> tag is used to display tabular data, much like a spreadsheet.

By default, tables have no lines. Our examples use CSS to add lines and some basic styling.

A <table> can have any of these elements:

  • <caption> - table caption or title
  • <colgroup> - container for multiple col elements
  • <col> - used for styling one or more columns
  • <thead> - semantic element to group table header rows
  • <tbody> - semantic element to group table body rows
  • <tfoot> - semantic element to group table footer rows
  • <tr> - creates a table row
  • <th> - creates a table heading
  • <td> - creates a table cell

Tip: At a minimum, to create a table you need these 3 tags: <table>, <tr>, and <td>.

More Examples

A <table> with all the trimmings: <thead>, <tbody>, <tfoot>, <tr>, <th>, and <td> elements.
Each element is custom styled with CSS.

First name Last name Email City Country
Tim Hallman thall@aa.com Dallas USA
Jelle van Loenen jelle@loenen.org Arnhem Netherlands
Jose Lopez lopez@argtech.ph Manila Philippines
Jeroen Harmsma jharm@gmail.com The Hague Netherlands
Sunil Gupta sunil@traf.in Mumbai India
Henry Wong henry@google.com San Francisco USA
Cindy Velasquez cindy@alicante.mx Mexico City Mexico
Total Rows: 7
<style>
 table.tbl { width:100%; border-collapse: collapse; }
 .tbl th, .tbl td { padding:3px; border: 1px solid #999; }
 .tbl thead, .tbl tfoot { background-color:darkslategray; color: white; }
 .tbl tbody { font-style: italic;}
</style>

<table class="tbl">
 <thead>
  <tr>
    <th>First name</th>
    <th>Last name</th>
    <th>Email</th>
    <th>City</th>
    <th>Country</th>
  </tr>
 </thead>

 <tbody>
  <tr>
    <td>Tim</td>
    <td>Hallman</td>
    <td>thall@aa.com</td>
    <td>Dallas</td>
    <td>USA</td>
  </tr>
  <tr>
    <td>Jelle</td>
    <td>van Loenen</td>
    <td>jelle@loenen.org</td>
    <td>Arnhem</td>
    <td>Netherlands</td>
  </tr> <tr>
    <td>Jose</td>
    <td>Lopez</td>
    <td>lopez@argtech.ph</td>
    <td>Manila</td>
    <td>Philippines</td>
  </tr>
  <tr>
    <td>Jeroen</td>
    <td>Harmsma</td>
    <td>jharm@gmail.com</td>
    <td>The Hague</td>
    <td>Netherlands</td>
  </tr>
  <tr>
    <td>Sunil</td>
    <td>Gupta</td>
    <td>sunil@traf.in</td>
    <td>Mumbai</td>
    <td>India</td>
  </tr>
  <tr>
    <td>Henry</td>
    <td>Wong</td>
    <td>henry@google.com</td>
    <td>San Francisco</td>
    <td>USA</td>
  </tr>
  <tr>
    <td>Cindy</td>
    <td>Velasquez</td>
    <td>cindy@alicante.mx</td>
    <td>Mexico City</td>
    <td>Mexico</td>
  </tr>
 </tbody>

 <tfoot>
  <tr>
   <td colspan="5">
    Total Rows: 7
   </td>
  </tr>   
 </tfoot>

</table>

Note: By default, tables have no borders. In most cases, styling with CSS is required.


Attributes for <table>

The <table> element has no attributes, but it does accept global attributes.
The following are commonly used.

Attribute Value Description
id    identifier Defines a unique identifier for the table.
class    classnames Sets one or more CSS classes to be applied to the table.
style    CSS-styles Sets the style for the table.
data-*    value Defines additional data that can be used by JavaScript.
hidden    hidden Specifies whether the table is hidden.
title    text Sets a title that displays as a tooltip.

For additional global attributes see our global attributes list.


Obsolete Attributes

Do not use the attributes listed below.  They are no longer valid on tables in HTML5.

Attribute Description Alternative
align Aligns the content in the table. CSS text-align
bgcolor Defines the background color for the table. CSS background-color
border Defines the border thickness around the table. CSS border
cellpadding Defines space between cells and their borders. CSS border-collapse on table, with
CSS padding on td cells.
cellspacing Defines the the space between the cells. CSS border-spacing on table
frame Defines on which side a border should be displayed. CSS border
rules Defines which table lines should be drawn. CSS border
summary Defines alternative text that summarize table. caption element
width Sets the width of the table. CSS width

Did you know?

Did you know?

Fixed table headers with CSS

By default, table headers behave like regular rows and scroll up and down with the entire table.

A fixed header, i.e. a non-scrolling header, is useful for tables with many rows.

A <table> with custom HTML and CSS.
It forces the header to stay in place while scrolling through the rows.

First Name
First Name
Last Name
Last Name
City
City
Maria Smith Los Angeles
John Decker New Jersey
Brian Anderson Sao Paulo
Harold Derek Cairo
Paola Howard Paris
Andrea James Sydney
Kevin Spoelstra The Hague
Merci Gasol Florence
Kenny Williams Hong Kong
<style>
  section.fixed {
    position: relative;
    border: 1px solid #000;
    padding-top: 37px;
    background: #087676;
  }
  .fixed .wrap {
    overflow-y: auto;
    height: 190px;
  }
  .fixed table {
    border-spacing: 0;
    width: 100%;
  }
  .fixed td + td {
    border-left: 1px solid #000;
  }
  .fixed td, .fixed th {
    border-bottom: 1px solid #000;
    background: #f3fbfc;
    color: #000;
    padding: 10px 25px;
  }
  .fixed th {
    height: 0;
    line-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    color: transparent;
    border: none;
    white-space: nowrap;
  }
  .fixed th div{
    position: absolute;
    color: #fff;
    padding: 9px 25px;
    top: 0;
    margin-left: -25px;
    line-height: normal;
    border-left: 1px solid #fff;
  }
  .fixed th:first-child div{
    border: none;
  }
</style>

<section class="fixed">
  <div class="wrap">
    <table>
      <thead>
        <tr>
          <th>
            First Name
            <div>First Name</div>
          </th>
          <th>
            Last Name
            <div>Last Name</div>
          </th>
          <th>
            City
            <div>City</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Maria</td>
          <td>Smith</td>
          <td>Los Angeles</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Decker</td>
          <td>New Jersey</td>
        </tr>
        <tr>
          <td>Brian</td>
          <td>Anderson</td>
          <td>Sao Paulo</td>
        </tr>
        <tr>
          <td>Harold</td>
          <td>Derek</td>
          <td>Cairo</td>
        </tr>
        <tr>
          <td>Paola</td>
          <td>Howard</td>
          <td>Paris</td>
        </tr>
        <tr>
          <td>Andrea</td>
          <td>James</td>
          <td>Sydney</td>
        </tr>
        <tr>
          <td>Kevin</td>
          <td>Spoelstra</td>
          <td>The Hague</td>
        </tr>
        <tr>
          <td>Merci</td>
          <td>Gasol</td>
          <td>Florence</td>
        </tr>
        <tr>
          <td>Kenny</td>
          <td>Williams</td>
          <td>Hong Kong</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

Table Tags

The <table> tag is part of a group of tags that are used to create HTML tables. This group is referred to as the Table tag group. Together, these tags allow you to create comprehensive HTML tables.

Here is a list of table tags

Element Description
<table> Creates a table that contains elements listed below
<caption> Creates a caption above or under a table
<colgroup> Creates a container for col elements
<col> Creates a style for one or more columns in a table
<thead> Creates a table header that can style all header cells
<tbody> Creates a table body that can style all data cells
<tfoot> Creates table footer that can style all footer cells
<tr> Creates a table row that contains table cells
<th> Creates a table header cell
<td> Creates a table data cell

Browser support

Here is when <table> support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

Guides