• google plus

How to Create an HTML Table

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.

Related Video

Author: Nat Dunn

Nat Dunn founded Webucator in 2003 to combine his passion for technical training with his business expertise and to help companies benefit from both. His previous experience was in sales, business and technical training, and management. Nat has an MBA from Harvard Business School and a BA in International Relations from Pomona College.

About Webucator

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, XML, Windows, Java, Adobe, HTML5, JavaScript, Angular, and much more. Check out our complete course catalog.