HTML <table> Tag

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

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

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

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

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

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

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.

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

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, they allow you to create comprehensive HTML tables.

Here is a list of table tags

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

• Our HTML tr Tag Reference
• Our HTML th Tag Reference
• Our HTML td Tag Reference
• Our CSS Tables Tutorial