HTML Tables

In HTML, you can create tables for your website using the <table> tag in conjunction with the <tr>, <td> and <th> tags.

The HTML tables allow displaying the data (e.g. image, text, link) in columns and rows of cells. Table rows can be grouped into a head, foot, and body sections through the <thead>, <tfoot> and <tbody> elements, respectively.

In HTML5, we can place <tfoot> either before or after <tbody> tag. They must come after any <caption>, <colgroup>, and <thead> elements.

Most of the attributes of the <table> element are not used in HTML5. If you want to style the appearance of the table, you can use CSS instead.

Spanning Multiple Rows and Columns

It is possible to extend rows and columns of a table across many other rows and columns.

Commonly, a table cell cannot pass into the space, which is below or above another cell. But, if you want to span several rows or columns in a table, you can use the colspan or rowspan attributes.

Adding Captions to Tables

You can use the <caption> element to specify a caption for tables. It should be placed immediately after the opening <table> tag. By default, the caption will be at the top of the table, but its position can be changed with the CSS caption-side property.

Syntax

The <table> tag comes in pairs. The content is written between the opening <table> and the closing </table> tags.

Example of the HTML <table> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%;">
      <tr>
        <th>Month</th>
        <th>Date</th>
      </tr>
      <tr>
        <td>January</td>
        <td>10.01.2014</td>
      </tr>
      <tr>
        <td>February</td>
        <td>10.01.2014</td>
      </tr>
    </table>
  </body>
</html>

Try it Yourself »

Result

Month	Date
January	10.01.2014
February	10.01.2014

In the given example, we use the <table> tag to create a table. Then, we use the <tr> tag to divide the table into rows. The <th> tag is used for the table header cells, where the title is written. In other words, the table row is divided into headings. The <td> tag is used for table cells where the information is written.

If you want to show the heading in one cell, you can use the colspan attribute.

Example of the HTML <table> tag with the colspan attribute:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%;">
      <tr>
        <th colspan="2">Month and Date</th>
      </tr>
      <tr>
        <td>January</td>
        <td>10.01.2014</td>
      </tr>
      <tr>
        <td>February</td>
        <td>10.01.2014</td>
      </tr>
    </table>
  </body>
</html>

Try it Yourself »

Result

Month and Date
January	10.01.2014
February	10.01.2014

The same can be done with the rows, but using the rowspan attribute.

Example of the HTML <table> tag with the rowspan attribute:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%;">
      <tr>
        <th>Month</th>
        <th>Date</th>
      </tr>
      <tr>
        <td>January</td>
        <td rowspan="2">10.01.2014</td>
      </tr>
      <tr>
        <td>February</td>
      </tr>
    </table>
  </body>
</html>