Skip to main content

HTML Tables

Tables in HTML are a foundational element used exclusively to organize and present tabular data—information that is best understood in a grid of rows and columns. Tables are ideal for displaying spreadsheets, pricing matrices, financial reports, or schedules.

Tables are for Data, Not Layout

A crucial principle of modern web development is semantic HTML. Tables should never be used for general page layout (like structuring headers and sidebars). Use CSS (Flexbox or Grid) for page layout; use HTML tables only for displaying structured data.


1. Core Table Structure Tags​

Building a table requires, at minimum, three nested tags:

TagPurposeDescription
<table>The ContainerDefines the entire table structure.
<tr>Table RowDefines a single horizontal row within the table.
<th>Table HeaderDefines a header cell. Used for column titles or row labels. Renders bold/centered by default.
<td>Table DataDefines a standard data cell. Used for the content within the table.

2. Basic Table Example​

This example demonstrates the minimal required structure to create a two-column table.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Table Example</title>
</head>
<body>
  <h1>Product Stock</h1>
  <table>
    <tr>
      <th>Product Name</th>
      <th>Stock Level</th>
    </tr>
    <tr>
      <td>Widget Pro</td>
      <td>250 units</td>
    </tr>
    <tr>
      <td>Widget Lite</td>
      <td>95 units</td>
    </tr>
  </table>
</body>
</html>

3. Semantic Table Grouping​

For professional, complex, and accessible tables, you must use semantic grouping elements. These tags separate the table into logical sections, which is vital for screen readers, styling, and printing.

  • <caption>: Provides a descriptive title for the entire table. It must be the first element inside the <table> tag.
  • <thead> (Table Header): Contains the header rows (<tr> elements with <th> cells).
  • <tbody> (Table Body): Contains the main body of the table data (all data rows with <td> cells).
  • <tfoot> (Table Footer): Contains rows summarizing the data, such as totals or footnotes.

Semantic Table Example​

index.html: Employee Data with Semantic Sections
<table>
  <caption>Employee Data</caption>
  
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Department</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>001</td>
      <td>John Doe</td>
      <td>Marketing</td>
    </tr>
    <tr>
      <td>002</td>
      <td>Jane Smith</td>
      <td>Finance</td>
    </tr>
  </tbody>
  
  <tfoot>
    <tr>
       <td colspan="3">Total Employees: 3 (Data truncated for example)</td>
    </tr>
  </tfoot>
</table>

4. Advanced Column Structure Tags​

These tags are used less frequently but provide control over columns, especially for styling large tables without using complex CSS selectors.

  • <colgroup> (Column Group): Defines a group of columns within the table.
  • <col> (Column): Defines properties (like width or style) for one or more columns within a <colgroup>.
Column Group Example
<table>
  <colgroup>
        <col style="background-color: lightblue;">
        <col span="2" style="background-color: lightcoral;">
  </colgroup>
  <tr>
    <th>Name</th>
    <th>City</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
</table>

Conclusion​

HTML tables are a powerful, semantic tool for presenting grid-like data. By using the core tags (<table>, <tr>, <th>, <td>) and the semantic grouping elements (<caption>, <thead>, <tbody>, <tfoot>), you ensure your data is accessible, organized, and structurally sound for all users and devices.