HTML Table Tag Group

The Table Tag Group is a group of tags that are used to create HTML tables. HTML tables present tabular data -- much like a spreadsheet. Table tags include <table>, <thead>, <tbody>, <tfoot>, <tr>, <td>, and others.

HTML Reference

Creating a Table

Creating a table in HTML requires at least 3 tags: <table>, <tr>, and <td>.

These 3 tags represent the table, their rows, and column cells respectively.

Other tags are available to refine the appearance of the table.


Table Tags

Here is a list of table tags that are available to design tables in HTML.

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

Example

#

The <table>, <tr>, <td>, and <th> tags define the core structure of the table.
All other tags are adding enhancements by grouping, styling, and decorating the table.

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>

Code explanation

  • The <style> section defines a CSS 'tb' classname to style the table.
  • The <table>, <tr>, <td>, and <th> tags define the row and column structure of the table.
  • The <caption> tag adds a caption (title) to the table.
  • The <colgroup> and <col> tags style columns from top to bottom in the table.
  • The <thead>, <tbody> and <tfoot> tags identify and style the header, body, and footer cells.

Note: In real-world solutions, it is rare to find a table that requires all table tags.


Did you know?

Did you know?

Creating a fixed table header with CSS

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

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

With CSS you can force 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>

You may also like

 Back to Tag Groups


Guides