From Basics to Pro: Everything You Need to Know About HTML Tables

Tables are one of the oldest and most useful elements in HTML. While they were once misused for website layouts, today they serve their true purpose: organizing and presenting tabular data in a clear, structured way. Whether you’re displaying a price list, a timetable, or statistical data, HTML tables are the go-to solution.

What is an HTML Table?

An HTML table is a structured arrangement of data in rows and columns, much like a spreadsheet. Each piece of data sits inside a cell, and all cells together form the table.

Basic Table Structure

Here’s the simplest form of an HTML table:

<table border="1">
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Stock</th>
  </tr>
  <tr>
    <td>Shirt</td>
    <td>$20</td>
    <td>In Stock</td>
  </tr>
  <tr>
    <td>Jeans</td>
    <td>$40</td>
    <td>Out of Stock</td>
  </tr>
</table>

Explanation:

<table> → Defines the table
<tr> (Table Row) → Creates a row
<th> (Table Header) → Bold, centered header cell
<td> (Table Data) → Regular data cell

Table Head, Body, and Footer

For better structure, especially in large tables, you can divide them into three sections:

<table border="1">
  <thead>
    <tr>
      <th>Course</th>
      <th>Duration</th>
      <th>Fee</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML Basics</td>
      <td>3 Weeks</td>
      <td>$50</td>
    </tr>
    <tr>
      <td>CSS Mastery</td>
      <td>4 Weeks</td>
      <td>$70</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total</td>
      <td>$120</td>
    </tr>
  </tfoot>
</table>

Explanation

<thead> → Groups header rows
<tbody> → Contains the main data
<tfoot> → Usually holds summary or totals

Adding Borders and Styling

By default, tables look plain. With CSS, you can make them look professional:

<style>
  table {
    width: 100%;
    border-collapse: collapse; /* merges borders */
  }
  th, td {
    border: 1px solid #444;
    padding: 10px;
    text-align: left;
  }
  th {
    background-color: #222;
    color: #fff;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2; /* striped rows */
  }
</style>

Merging Cells with `colspan` and `rowspan`

You can merge multiple cells into one for cleaner layouts:

<table border="1">
  <tr>
    <th colspan="2">Student Info</th>
  </tr>
  <tr>
    <td rowspan="2">Name</td>
    <td>John</td>
  </tr>
  <tr>
    <td>Mary</td>
  </tr>
</table>

Explanation

colspan="2" → Merges 2 columns
rowspan="2" → Merges 2 rows

Accessibility Best Practices

When creating tables, always consider accessibility for screen readers:

Use <caption> to describe the table.
Use <th> for headers, not <td>.
Add the scope attribute (scope="col" or scope="row") to clarify relationships.

Example:

<table>
  <caption>Monthly Expenses</caption>
  <tr>
    <th scope="col">Month</th>
    <th scope="col">Amount</th>
  </tr>
  <tr>
    <th scope="row">January</th>
    <td>$200</td>
  </tr>
</table>

When to Use (and Not Use) Tables

✅ Use tables for:

Tabular data (statistics, schedules, reports)
Comparisons (pricing tables, product features)

❌ Don’t use tables for:

Page layouts (use CSS Flexbox or Grid instead)
Navigation menus or forms

In conclusion, HTML tables remain a powerful tool for presenting structured data. With proper use of <thead>, <tbody>, colspan, and CSS styling, you can make them clean, readable, and responsive. And by following accessibility practices, your tables will be usable by everyone.

Command Palette