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.


Related Articles

  1. How to Ask Good Technical Questions
  2. How to Properly Nest Lists in HTML
  3. How to Install and Use Visual Studio Code for Class
  4. How to Open HTML Files in Your Browser from Visual Studio Code
  5. How to Create a Simple HTML Document
  6. How to Work with Empty and Container Tags in HTML
  7. How to Mark Up a Citation in HTML
  8. How to Create an HTML Table (this article)
  9. How to Force a Refresh of favicon.ico