HTML Tables Made Easy: A Complete Beginner's Guide to Table Tags and Layout

INTRODUCTION

HTML tables are used to display data in a structured, grid-like format. They consist of rows and columns, making them useful for organizing information such as schedules, reports, and comparisons.

A table in HTML is created using the <table> element. It is the container element for table and consists of rows, columns, column-groups and caption.

In HTML, <thead>, <tbody>, and <tfoot> are used to structure tables, improving readability, accessibility, and styling. All these elements are optional. It Separates table into headers, main content, and footer.

The HTML table's children in order are listed below:

1. <caption> element
2. <colgroup> elements
3. <thead> elements
4. <tbody> elements
5. <tfoot> elements

Table Caption

The <caption> element in HTML is used to add a title or description to a table. It helps provide context about the table's data, improving accessibility and clarity.

When <caption> element is used it should be the first child of table. This tag is placed immediately after the <table> tag.

The location of the caption can be defined using the CSS caption-side property. The allowed values for this property are the top and bottom. The default value is top.

<table>
    <caption>Monthly Sales Report</caption>
    <tr>
        <th>Month</th>
        <th>Sales ($)</th>
    </tr>
    <tr>
        <td>January</td>
        <td>10,000</td>
    </tr>
    <tr>
        <td>February</td>
        <td>12,000</td>
    </tr>
</table>

Table Row And Column

The <tr> element in HTML is used to create row. One row is created for every <tr> - </tr> pair. Multiple rows can be created by adding <tr> - </tr> pair.

The <td> element in HTML is used to create column. The number of columns in a row corresponds to the number of <td> - </td> pair. One column is created for every <td> - </td> pair.

The Below Example will make it clear.

<table>
    <tr>
        <td>Apple</td>
        <td>$1</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Banana</td>
        <td>$0.5</td>
        <td>100</td>
    </tr>
    <tr>
        <td>strawberry</td>
        <td>$1.5</td>
        <td>20</td>
    </tr>
</table>

Table Header

In the above example, you can understand the data but it would be great if you can add some description about the data. This is done by using Headers which describes the column or row.

In HTML, you use the <th> (table header) element inside a <tr> (table row) to create a header row in a table. Header can be created for column or row. Headers are typically bold and centered by default.

The below example will make it clear.

<table>
    <tr>
        <th>Fruit</td>
        <th>Price</td>
        <th>Quantity</td>
    </tr>
    <tr>
        <td>Apple</td>
        <td>$1</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Banana</td>
        <td>$0.5</td>
        <td>100</td>
    </tr>
</table>

<table>
    <tr>
        <th scope="row">Name</th>
        <td>John Doe</td>
    </tr>
    <tr>
        <th scope="row">Age</th>
        <td>30</td>
    </tr>
    <tr>
        <th scope="row">Country</th>
        <td>USA</td>
    </tr>
</table>

Table Sections - thead, tbody, tfoot

In HTML, <thead>, <tbody>, and <tfoot> are used to structure tables, improving readability, accessibility, and styling. All these elements are optional. It Separates table into headers, main content and footer.

Table <thead> Element

In HTML, <thead> is used for the header content of a table. It generally contains one or more table rows created using the <tr> element. The column headers are created using the <th> element

The <thead> element does not create any visual difference on its own but can be modified by using CSS. Its main purpose is to create a semantic element which helps to identify the information to assistive technologies like screen readers and search engines.

<table>
  <thead>
    <tr>
        <th>Fruit</td>
        <th>Price</td>
        <th>Quantity</td>
    </tr>
  </thead>
    <tr>
        <td>Apple</td>
        <td>$1</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Banana</td>
        <td>$0.5</td>
        <td>100</td>
    </tr>
</table>

Table <tbody> Element

In HTML, <tbody> is used for the main content of a table. This element should come after any <caption>, <colgroup>, and <thead> elements.

You can use multiple <tbody> elements within a table, as long as they appear consecutively. This helps organize large tables by dividing rows into sections, allowing each section to be formatted independently if needed.

<table>
  <thead>
    <tr>
        <th>Fruit</td>
        <th>Price</td>
        <th>Quantity</td>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Apple</td>
        <td>$1</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Banana</td>
        <td>$0.5</td>
        <td>100</td>
    </tr>
  </tbody>    
</table>

Table <tfoot> Element

In HTML, <tfoot> is used for the footer content, typically containing summary information like totals, calculations or additional notes.

This element should be placed after any <caption>, <colgroup>, <thead>, <tbody> elements.

<table>
  <thead>
    <tr>
        <th>Fruit</td>
        <th>Price</td>
        <th>Quantity</td>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Apple</td>
        <td>$1</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Banana</td>
        <td>$0.5</td>
        <td>100</td>
    </tr>
  </tbody> 
  <tfoot>
    <tr>
        <td>Total Cost</td>
        <td colspan="2">$100</td>
        
    </tr>
  </tfoot>   
</table>

Table colgroup Element

In HTML, <colgroup> element is used to group columns in a table. It allows you to apply formatting to entire columns rather than styling individual <td> or <th> cells.

This element should appear after any <caption> element (if used), but before any <thead>, <tbody>, <tfoot>, and <tr> elements. The only permitted child of this element is <col> element.

The <colgroup> element supports a limited number of CSS properties. The properties supported by this element are background, border, visibility and width.

<table>
  <colgroup>
    <col span="1" style="background-color: greenyellow;">
    <col span="2" style="background-color: lightblue;">
  </colgroup>
  <thead>
    <tr>
        <th>Fruit</td>
        <th>Price</td>
        <th>Quantity</td>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Apple</td>
        <td>$1</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Banana</td>
        <td>$0.5</td>
        <td>100</td>
    </tr>
  </tbody>    
</table>

Frequently Asked Questions (FAQ)

<table border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Row 1 Col 1</td>
    <td>Row 1 Col 2</td>
    <td>Row 1 Col 3</td>
  </tr>
  <tr>
    <td>Row 2 Col 1</td>
    <td>Row 2 Col 2</td>
    <td>Row 2 Col 3</td>
  </tr>
</table>

<table border="1">
  <tr>
    <td>Main Table - Cell 1</td>
    <td>
      <!-- Nested Table inside a cell -->
      <table border="1">
        <tr>
          <td>Nested Row 1</td>
          <td>Nested Row 1</td>
        </tr>
        <tr>
          <td>Nested Row 2</td>
          <td>Nested Row 2</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<style>
  .table-container {
    display: flex;
    
  }
</style>

<div class="table-container">
  <table>
    <caption>Table 1</caption>
    <tr><th>Name</th><td>Alice</td></tr>
    <tr><th>Age</th><td>25</td></tr>
  </table>

  <table>
    <caption>Table 2</caption>
    <tr><th>City</th><td>New York</td></tr>
    <tr><th>Country</th><td>USA</td></tr>
  </table>
</div>

<style>
  .grid-tables {
    display: grid;
    grid-template-columns: 1fr 1fr;
    
  }

</style>

<div class="grid-tables">
  <table>
    <tr><th>Column 1</th><td>Data A</td></tr>
  </table>
  <table>
    <tr><th>Column 2</th><td>Data B</td></tr>
  </table>
</div>