How to Create an HTML Table

See HTML: Tips and Tricks for similar articles.

HTML tables are created with the <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>, and <caption> tags.

  1. Start by typing <table></table> to create the shell for the table.
  2. Tables can optionally be broken into a head, body and foot, using the <thead>, <tbody>, and <tfoot> tags, like this:
    <table>
      <thead><!--row will go here--></thead><tbody><!--row will go here--></tbody><tfoot><!--row will go here--></tfoot>
    </table>
  3. The table rows go within the <thead>, <tbody>, and <tfoot> tags if they exist or directly within the <table> tag if they don't.

    Option 1

    <table>
      <thead>
        <tr><!--cells will go here--></tr>
      </thead>
      <tbody>
        <tr><!--cells will go here--></tr>
      </tbody>
      <tfoot>
        <tr><!--cells will go here--></tr>
      </tfoot>
    </table>

    Option 2

    <table>
        <tr><!--cells will go here--></tr><tr><!--cells will go here--></tr>
    </table>
  4. There are two types of table cells: headers and data, which go in <th> and <td> tags, respectively:
    <table>
      <thead>
        <tr>
          <th>Header</th>
          <th>Header</th>
          <th>Header</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
        </tr>
      </tfoot>
    </table>
  5. If you like, you can add a caption with the </caption> tag:
    <table>
      <caption>Caption Goes Here</caption>
      <thead>
        <tr>
          <th>Header</th>
          <th>Header</th>
          <th>Header</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
        </tr>
      </tfoot>
    </table>

At this point, you have a very basic table that looks like this (without the blue border): Basic HTML Table

You'll probably want to style it with borders, backgrounds, spacing and margins. All that should be done with CSS as the HTML attributes for formatting tables are all deprecated.