Skip to content
beginner Phase 2 · HTML

HTML Tables

Create accessible tables with thead, tbody, caption, and proper scope attributes.

30m
0 problems
Topic Progress 0%

Table Structure

HTML tables organize data into rows and columns.

Basic Table Structure

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alice</td>
            <td>25</td>
            <td>New York</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>30</td>
            <td>London</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Total: 2 people</td>
        </tr>
    </tfoot>
</table>

Table Elements

Element Purpose
<table> Table container
<thead> Table header group
<tbody> Table body group
<tfoot> Table footer group
<tr> Table row
<th> Table header cell
<td> Table data cell

Spanning Cells

<table>
    <tr>
        <th>Name</th>
        <th colspan="2">Contact Info</th>  <!-- Spans 2 columns -->
    </tr>
    <tr>
        <td>Alice</td>
        <td>alice@email.com</td>
        <td>555-1234</td>
    </tr>
    <tr>
        <th rowspan="2">Bob</th>  <!-- Spans 2 rows -->
        <td>bob@email.com</td>
        <td>555-5678</td>
    </tr>
    <tr>
        <td>bob@example.com</td>
        <td>555-9012</td>
    </tr>
</table>

Table Styling

/* Basic table styling */
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
    font-weight: bold;
}

/* Zebra striping */
tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Hover effect */
tr:hover {
    background-color: #f5f5f5;
}

/* Responsive table */
@media (max-width: 600px) {
    table {
        display: block;
        overflow-x: auto;
    }
}

Accessible Tables

Making tables accessible ensures screen readers can properly interpret the data.

Accessibility Basics

<table>
    <caption>Monthly Sales Report</caption>
    <thead>
        <tr>
            <th scope="col">Month</th>
            <th scope="col">Sales</th>
            <th scope="col">Profit</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">January</th>
            <td>$10,000</td>
            <td>$2,000</td>
        </tr>
        <tr>
            <th scope="row">February</th>
            <td>$12,000</td>
            <td>$2,500</td>
        </tr>
    </tbody>
</table>

Key Accessibility Features

Feature Purpose
<caption> Describes the table
scope="col" Header is for column
scope="row" Header is for row
<th> in <thead> Column headers
<th> in row Row headers

Complex Tables

<table>
    <caption>Employee Information</caption>
    <colgroup>
        <col span="1" style="background-color: #f0f0f0">
        <col span="2">
    </colgroup>
    <thead>
        <tr>
            <th id="name" scope="col">Name</th>
            <th id="email" scope="col">Email</th>
            <th id="phone" scope="col">Phone</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th id="alice" headers="name">Alice</th>
            <td headers="alice email">alice@example.com</td>
            <td headers="alice phone">555-1234</td>
        </tr>
    </tbody>
</table>

When NOT to Use Tables

<!-- ❌ Don't use tables for layout -->
<table>
    <tr>
        <td>Header</td>
    </tr>
    <tr>
        <td>Sidebar</td>
        <td>Content</td>
    </tr>
</table>

<!-- ✅ Use CSS Grid/Flexbox for layout -->
<div class="layout">
    <header>Header</header>
    <aside>Sidebar</aside>
    <main>Content</main>
</div>

<!-- ✅ Use tables for tabular data -->
<table>
    <tr><th>Name</th><th>Age</th></tr>
    <tr><td>Alice</td><td>25</td></tr>
</table>

Quiz

1. When should you use HTML tables?

Question 1 options

2. What does the scope attribute do?

Question 2 options

3. What is the purpose of the <caption> element?

Question 3 options

4. What does colspan="2" do?

Question 4 options

Flashcards

Question

What are the main table elements?

Click to reveal answer

Answer

table (container), thead/tbody/tfoot (groups), tr (row), th (header cell), td (data cell).

Question

What is the scope attribute?

Click to reveal answer

Answer

Indicates if a th is for a column (scope="col") or row (scope="row"). Helps screen readers.

Question

When should you NOT use tables?

Click to reveal answer

Answer

For page layout. Use CSS Grid or Flexbox instead. Tables are only for tabular data.

Revision Notes

Key Takeaways

  • 1. Tables are for tabular data, not layout
  • 2. Use thead, tbody, tfoot for structure
  • 3. Add scope attributes for accessibility
  • 4. Use caption to describe the table
  • 5. Use CSS for styling, not table attributes

Interview Tips

  • • Know when to use tables vs CSS layout
  • • Understand how to make tables accessible
  • • Be familiar with colspan and rowspan
  • • Know the difference between th and td

Cheat Sheet

HTML Tables Cheat Sheet

Structure:

  • : Container
  • //: Groups
  • : Row
  • : Header cell
  		• : Data cell

    Spanning:

    • colspan: Span columns
    • rowspan: Span rows

    Accessibility:

    : Table title
  • scope="col"/"row": Header type
  • Use
    • for headers

    When to Use:

    • Tabular data only
    • Not for layout
    • Use CSS Grid/Flexbox for layout