HTML Tables: A Tutorial (With Examples) For Beginners To Create Their First Table

Sharing is caring!

Last Updated on

Tables are used in HTML documents (web pages) to present tabular data.

Using Tables

  • A table is defined using the <table> element, and contains a number of table cells ( <td>, for “table data” ) which are organized into table rows ( <tr>). The markup (HTML code) for a table is always based on rows, never columns.
  • Table cells which act as column headers or row headers should use the <th> (table header) element.
  • Table cells can be merged using the colspan and rowspan attributes.
  • Tables can be broken into sections using the following elements:
  • <thead> — Table header
  • <tbody> — Table body
  • <tfoot> — Table footer
  • A caption can be added to a table using the <caption> element.
  • You can use <col> and <colgroup> to define table columns for styling. However, there are a number of limitations with this practice.
  • Table Code Sample: Simple Table

    <table>
     <tr>
      <th>Name</th>
      <th>Favorite Color</th>
     </tr>
     <tr>
      <td>Bob</td>
      <td>Yellow</td>
     </tr>
     <tr>
      <td>Michelle</td>
      <td>Purple</td>
     </tr>
    </table>
    
    NameFavorite Color
    Bob
    Yellow
    Michelle
    Purple

    Table Code Sample: Complex Table

    <table>
     <caption>A complex table</caption>
     <thead>
      <tr>
       <th colspan="3">Invoice #123456789</th>
       <th>14 January 2025
      </tr>
      <tr>
       <td colspan="2">
        <strong>Pay to:</strong><br>
        Acme Billing Co.<br>
        123 Main St.<br>
        Cityville, NA 12345
       </td>
       <td colspan="2">
        <strong>Customer:</strong><br>
        John Smith<br>
        321 Willow Way<br>
        Southeast Northwestershire, MA 54321
       </td>
      </tr>
     </thead>
     <tbody>
      <tr>
       <th>Name / Description</th>
       <th>Qty.</th>
       <th>@</th>
       <th>Cost</th>
      </tr>
      <tr>
       <td>Paperclips</td>
       <td>1000</td>
       <td>0.01</td>
       <td>10.00</td>
      </tr>
      <tr>
       <td>Staples (box)</td>
       <td>100</td>
       <td>1.00</td>
       <td>100.00</td>
      </tr>
     </tbody>
     <tfoot>
      <tr>
       <th colspan="3">Subtotal</th>
       <td> 110.00</td>
      </tr>
      <tr>
       <th colspan="2">Tax</th>
       <td> 8% </td>
       <td>8.80</td>
      </tr>
      <tr>
       <th colspan="3">Grand Total</th>
       <td>$ 118.80</td>
      </tr>
     </tfoot>
    </table>
    
    A complex table
    Invoice #12345678914 January 2025
    Pay to:
    Acme Billing Co.
    123 Main St.
    Cityville, NA 12345
    Customer:
    John Smith
    321 Willow Way
    Southeast Northwestershire, MA 54321
    Name / DescriptionQty.@Cost
    Paperclips
    1000
    0.01
    10.00
    Staples (box)
    100
    1.00
    100.00
    Subtotal
    110.00
    Tax
    8%
    8.80
    Grand Total
    $ 118.80

    About Table-Based Layout

    It was common in the early days of the web to use tables as a layout device. Before the advent of modern standards-based browsers, this was the easiest way to make sure that page elements were arranged properly on the screen.

    This design pattern is now considered very bad. It is bad for the user experience, bad for SEO, and bad for developers who have to maintain pages.

    You should not use table-based layout under any circumstances. Instead, check out our CSS Tutorials to start learning about modern web site layout.

    However, that doesn't mean you should avoid tables — tables should be used whenever you need to present information in a tabular format.

    Adam is a technical writer who specializes in developer documentation and tutorials.