HTML Tables

HTML Tables are the thing you think you understand until you try to make one. Then suddenly one cell moves and the whole table looks offended. I still don’t fully understand them, but neither did my teachers, so welcome to the tradition.

8 min read Beginner HTML

Reality Check

Tables are not hard because they’re complex. They’re hard because one missing tag breaks everything and the browser refuses to explain why.

Part 1

The Basic Structure (This Is Where Everyone Starts)

A table is just rows inside a table, and cells inside rows. That’s it. That’s the lie we tell beginners. Here’s the smallest table that still counts as a table:

HTML

<table>
    <tr>
        <td>Hello</td>
        <td>World</td>
    </tr>
</table>

If you forget <tr>, the browser panics quietly. If you forget <td>, nothing shows up. This is normal. This is pain.

<table>

The outer box. Everything lives inside this. Without it, you’re just stacking random tags.

<tr>

One row. Think horizontal. If your data looks vertical, you messed up here.

<td>

One cell. This is where actual content goes. Text, numbers, regret.

Part 2

Headers: Making Tables Look Like You Know What You’re Doing

Table headers exist so people understand your data without guessing. Also screen readers. Also your future self after three weeks.

HTML

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Me</td>
        <td>Mentally 12</td>
    </tr>
</table>

<th> is just like <td> but louder and more confident. Browsers bold it automatically so you feel productive.

Why <th> Matters

Headers aren't just for looks—they give your table meaning. Screen readers use them to help visually impaired users understand your data structure. Plus, they make your table look like you actually planned it.

HTML

<table>
    <tr>
        <th>Task</th>
        <th>Status</th>
        <th>Likelihood of Completion</th>
    </tr>
    <tr>
        <td>Learn Tables</td>
        <td>In Progress</td>
        <td>Maybe</td>
    </tr>
</table>

Scope Attribute: The Secret Table Handshake

The scope attribute tells browsers whether a header applies to a column or row. It's like labeling your leftovers so people know what they're eating.

HTML

<table>
    <tr>
        <th scope="col">Month</th>
        <th scope="col">Coffee Cups</th>
    </tr>
    <tr>
        <th scope="row">January</th>
        <td>Too many</td>
    </tr>
</table>

Accessibility Tip

Always use scope="col" for column headers and scope="row" for row headers. Screen readers will thank you, and your table will actually make sense to everyone.

Part 3

Table Structure: The Professional's Toolkit

Real tables need more than just cells. They need organization, sections, and semantic meaning. Otherwise, you're just stacking divs with extra steps.

<thead> - The Header Section

Groups your header rows together. Perfect for when your table has multiple header rows or when you want to style headers separately. Think of it as the "introductory paragraph" of your table.

<tbody> - The Main Content

Where your actual data lives. Every table should have one (even if you don't write it, the browser adds it). This is the "story" part of your table.

<tfoot> - The Footer

For summaries, totals, or closing remarks. Browsers will display it at the bottom, even if you put it before <tbody> in your code. Magic!

HTML

<table>
    <thead>
        <tr>
            <th scope="col">Project</th>
            <th scope="col">Hours Estimated</th>
            <th scope="col">Hours Actual</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Fix Bug</td>
            <td>1</td>
            <td>7</td>
        </tr>
        <tr>
            <td>Center Div</td>
            <td>0.5</td>
            <td>∞</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>1.5</td>
            <td>Infinity</td>
        </tr>
    </tfoot>
</table>

Semantic Structure Matters

Using <thead>, <tbody>, and <tfoot> isn't just about organization—it helps screen readers, improves SEO, and makes styling easier. Plus, you'll feel like a table wizard.

Part 4

Captions: Giving Your Table a Title (Because Names Matter)

A caption is like giving your table a name tag at a party. It tells everyone what this table is about before they awkwardly stare at it trying to figure it out.

HTML

<table>
    <caption>
        My Attempt at Productivity (Spoiler: It Failed)
    </caption>
    <tr>
        <th>Time</th>
        <th>Planned Task</th>
        <th>Actual Task</th>
    </tr>
    <tr>
        <td>9:00 AM</td>
        <td>Code Review</td>
        <td>Watch Cat Videos</td>
    </tr>
</table>

Caption Placement

The <caption> tag must come immediately after the opening <table> tag. Put it anywhere else, and the browser will silently judge you.

Best Practice

Keep captions short and descriptive. "Quarterly Sales" is good. "The table where I track stuff that maybe matters sometimes but probably not" is less good.

Important Truth

If your table looks wrong, check your row structure first. 90% of table bugs live there, quietly judging you.

Quick Reference: Table Tag Cheat Sheet

<table> - The container. Start here.
<caption> - Table title (optional but recommended).
<thead> - Header section (optional).
<tbody> - Main content (always created by browser if missing).
<tfoot> - Footer section (optional).
<tr> - Table row (required for data).
<th> - Header cell (bold by default).
<td> - Data cell (where your content lives).

“HTML tables are simple until colspan shows up, then it’s geometry with emotional damage.”

— A Developer, Probably You Soon