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 <table> tag comes in pairs. The content must be written between the opening <table> and the closing </table> tags.

Example

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

Result

Month Date
January 10.01.2014
February 10.01.2014

In the given example the <table> tag is used for creating the table.

The <tr> tag is used in order to divide the table into rows. Table rows may be grouped into a head, foot, and body sections (via the thead, tfoot and tbody elements respectively).

The <th> tag is used for the table header cells, where the title is written. That is to say that the table row is divided into headings.

The <td> tag is used for the table cells where the information is written, which is shown inside the table.

If you want to see the heading in one, use the colspan attribute.

Example

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

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

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

Result

Month Date
January 10.01.2014
February