How to Create an HTML Table

  • google plus

In Brief...

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

Instructions

  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.

Related Video

Related Training

Author: Nat Dunn

Nat Dunn founded Webucator in 2003 to combine his passion for web development with his business expertise and to help companies benefit from both.

Discuss