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.

Take our Introduction to HTML Training course for free.

See the Course Outline and Register

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

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.

Categories

Courses

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