Tables

In the Halls of Tabular Order

In the realm of structured data, you are the Grandmaster of HTML Table Wizardry! Whenever statistics, financial overviews, or comparisons need to be forged into a rigid, disciplined order, nothing beats a good table. Need to present complex information at a glance? Absolutely—tables are unmatched for clarity.

But beware! If you believe tables are fit for layouts or page structures, you’ve likely cursed the flexibility of modern web design. They’re about as adaptable as an ancient cart in a high-speed race. Use them wisely, and your data will shine in all its majestic order—but keep them out of your layouts, or suffer the wrath of the modern web!

Let’s Keep Going

A Simple Table
Merging Cells
Mastering Table Structure

Tables in HTML

Structure data clearly – row by row, column by column!

Token: table, tr, th and caption Element

A Simple Table

Presenting data in perfect order

With the HTML elements <table>, <tr>, and <td> at your command, you are the architect of organized data! Rows and columns become your tools to banish chaos and create clarity.

table: The sacred beginning — marks the start of your table.
caption: Adds a title, imbuing your creation with purpose.
tr: Defines a new row, paving the way forward.
th: Grants columns a regal header, befitting their importance.
td: A humble cell, eagerly waiting to be filled with your data.

<table>
    <caption>Ingredients</caption>
    <tr>
        <th>Unicorn</th>
        <th>Fairy</th>
    </tr>
    <tr>
        <td>Unicorn Hair</td>
        <td>Fairy Dust</td>
    </tr>
</table>

Merging Cells

Crafting flexible table structures

With the magical spells colspan and rowspan, you can merge HTML table cells across columns and rows, bending tabular space to your will.

colspan: Stretches a cell across multiple columns, like a flowing ribbon. Ideal for content that craves extra room.
rowspan: Lets a cell span multiple rows, as if gliding effortlessly from one level to the next. A must-have for uniting cells across rows.

<table>
    <tr>
        <th colspan="2">Unicorn</th>
        <th>Fairy</th>
    </tr>
    <tr>
        <td>Unicorn Hair</td>
        <td>Unicorn Fart</td>
        <td>Fairy Dust</td>
    </tr>
</table>

Mastering Table Structure

Clarity from top to bottom

Behold the secret allies of the HTML table:
thead, tbody, and tfoot.
thead: The herald of clarity, introducing headers that illuminate your data.
tbody: The sturdy backbone, organizing the main content with steadfast precision.
tfoot: The triumphant finale, perfect for footnotes or totals, bringing the table to an elegant close.
Together, they keep your data neat, tidy, and gloriously structured!

<table>
    <thead>
        <!-- table content-->
        <tr>
            <td>...</td>
        </tr>
    </thead>
    <tbody>
        <!-- table content-->
    </tbody>
    <tfoot>
        <!-- table content-->
    </tfoot>
</table>

In this lesson, you have learned…

How to create a table using <table> to present data in an organized way.
Why <th> is important for highlighting column headers and improving clarity.
How to define rows with <tr> and individual cells with <td> to structure your content.
Why it’s useful to combine cells across multiple columns or rows using colspan and rowspan to create more complex layouts.
What <thead>, <tbody>, and <tfoot> are for, helping you logically divide your table and keep the structure clear.

Here you can see the code you’ve practiced – but feel free to experiment! Try out changes, test new ideas, and see what happens. This is your space for tinkering!

The Abandoned Alchemy Table

In an old, desolate house on the edge of the forest stands an alchemy table, cluttered with dusty vials and crumpled recipes. To untangle the chaos and let the magic flow once more, you must master the secrets of tables. Use HTML to organize ingredients, quantities, and instructions neatly into rows and columns—transforming an explosive mess into a masterpiece potion!

Your Task: Creating and Structuring a Table

Create a table as shown in the illustration:

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
}

table,
caption,
td,
th {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 1rem;
}

Basic Table Structure: Create a table with a <caption>, a header (<thead>), a main section (<tbody>), and a footer (<tfoot>).
Add inline CSS: Insert CSS in the <head> section to make the table’s structure visible.
Merging Cells: Use the colspan attribute to merge two cells into one and rowspan to extend a cell across multiple rows.
Structuring Table Content: Fill the cells (<td> and <th>) with alchemical ingredients and descriptions.
Match the Recipe: Make sure the structure mirrors the recipe shown in the image.

Open Editor in a New Tab

HTML

<table>
    <caption>Recipe for the Healing Potion</caption>
    <thead>
        <tr>
            <th>Ingredient</th>
            <th>Quantity</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Moonwort</td>
            <td>3 leaves</td>
            <td>Collect only during full moon</td>
        </tr>
        <tr>
            <td>Glowing Berries</td>
            <td>5 pieces</td>
            <td>Glowing in the dark</td>
        </tr>
        <tr>
            <td colspan="2">Stardust</td>
            <td>A pinch</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Mix all ingredients under the moonlight and heat them in the cauldron.</td>
        </tr>
    </tfoot>
</table>

Let’s Keep Going