Tables

🏗️ HTML Tables: Building Your Data Grid

The Big Picture: Tables Are Like Bookshelves

Imagine you have a magical bookshelf where you can organize anything—books, toys, snacks, or even your homework. Each shelf is a row, and each spot on the shelf is a cell. That’s exactly what an HTML table does for your web page!

Tables help us organize information so everyone can read it easily—like a class schedule, a price list, or a game scoreboard.

🎯 What You’ll Learn

1. The <table> element (the bookshelf itself)
2. Table rows <tr> (each shelf)
3. Headers <th> and data cells <td> (labels and items)
4. Table sections: <thead>, <tbody>, <tfoot>
5. Table captions (the bookshelf name)
6. Colspan and rowspan (making cells bigger)
7. The scope attribute (helping screen readers)
8. Table accessibility (making tables for everyone)

1. The Table Element <table>

The <table> tag is like the frame of your bookshelf. Everything goes inside it.

Simple Example:

<table>
  <!-- All your rows go here -->
</table>

Think of it as saying: “Hey browser, I’m about to show you organized data!”

2. Table Rows <tr>

Each <tr> is like one shelf in your bookshelf. You stack them on top of each other.

Example:

<table>
  <tr>
    <!-- First row (top shelf) -->
  </tr>
  <tr>
    <!-- Second row (next shelf) -->
  </tr>
</table>

Real Life: Think of a grocery list where each row is one item.

3. Table Headers <th> and Data Cells <td>

Now let’s put things ON the shelves!

Example:

<table>
  <tr>
    <th>Fruit</th>
    <th>Color</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>Red</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>Yellow</td>
  </tr>
</table>

Result:

🎉 Headers are like labels telling you what’s in each column!

4. Table Sections: The Three Parts

Just like a book has a beginning, middle, and end, tables have three sections:

The Three Amigos:

graph TD
    A["table"] --> B["thead - Header Section"]
    A --> C["tbody - Body Section"]
    A --> D["tfoot - Footer Section"]
    B --> E["Column titles"]
    C --> F["Main data"]
    D --> G["Totals/Summary"]

Example:

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cookie</td>
      <td>$1</td>
    </tr>
    <tr>
      <td>Juice</td>
      <td>$2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$3</td>
    </tr>
  </tfoot>
</table>

Why use sections?

• Browsers can scroll the body while keeping headers visible
• Screen readers understand the table structure
• It’s organized and professional!

5. Table Caption <caption>

The caption is like the name tag on your bookshelf. It tells everyone what the table is about.

Example:

<table>
  <caption>My Favorite Snacks</caption>
  <tr>
    <th>Snack</th>
    <th>Rating</th>
  </tr>
  <tr>
    <td>Chips</td>
    <td>⭐⭐⭐⭐⭐</td>
  </tr>
</table>

📌 Rule: The <caption> goes right after the opening <table> tag!

6. Colspan and Rowspan: Making Cells Bigger

Sometimes you need a cell to stretch across multiple columns or rows—like when you merge cells in a spreadsheet.

Colspan (Stretch Horizontally)

<table>
  <tr>
    <th colspan="2">Full Name</th>
  </tr>
  <tr>
    <td>First</td>
    <td>Last</td>
  </tr>
</table>

The “Full Name” header spans 2 columns!

Rowspan (Stretch Vertically)

<table>
  <tr>
    <th rowspan="2">Day</th>
    <td>Morning</td>
  </tr>
  <tr>
    <td>Evening</td>
  </tr>
</table>

The “Day” header spans 2 rows!

graph TD
    A["colspan=2"] --> B["Cell stretches LEFT-RIGHT"]
    C["rowspan=2"] --> D["Cell stretches UP-DOWN"]

7. The Scope Attribute: Helping Screen Readers

The scope attribute tells screen readers whether a header applies to a row or a column.

Example:

<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Age</th>
  </tr>
  <tr>
    <th scope="row">Alice</th>
    <td>10</td>
  </tr>
  <tr>
    <th scope="row">Bob</th>
    <td>12</td>
  </tr>
</table>

🎧 This helps people using screen readers understand your table!

8. Table Accessibility: Tables for Everyone

Making tables accessible means everyone can use them—including people who can’t see the screen.

🌟 Accessibility Checklist:

1. Use <caption> - Describe what the table shows
2. Use <th> for headers - Not just bold <td>!
3. Add scope attribute - Tell screen readers what headers mean
4. Use sections - <thead>, <tbody>, <tfoot>
5. Keep it simple - Avoid deeply nested tables
6. Don’t use tables for layout - Tables are for DATA only!

Complete Accessible Table:

<table>
  <caption>
    Weekly Chores Schedule
  </caption>
  <thead>
    <tr>
      <th scope="col">Day</th>
      <th scope="col">Chore</th>
      <th scope="col">Person</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Monday</th>
      <td>Dishes</td>
      <td>Mom</td>
    </tr>
    <tr>
      <th scope="row">Tuesday</th>
      <td>Laundry</td>
      <td>Dad</td>
    </tr>
  </tbody>
</table>

🧠 Quick Memory Tricks

🎯 Putting It All Together

Here’s a complete, accessible table:

<table>
  <caption>Class Test Scores</caption>
  <thead>
    <tr>
      <th scope="col">Student</th>
      <th scope="col">Math</th>
      <th scope="col">Science</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Emma</th>
      <td>95</td>
      <td>92</td>
    </tr>
    <tr>
      <th scope="row">Liam</th>
      <td>88</td>
      <td>90</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Average</th>
      <td>91.5</td>
      <td>91</td>
    </tr>
  </tfoot>
</table>

🚀 You Did It!

You now know how to:

• ✅ Create tables with <table>
• ✅ Add rows with <tr>
• ✅ Use headers <th> and data cells <td>
• ✅ Organize with <thead>, <tbody>, <tfoot>
• ✅ Name tables with <caption>
• ✅ Merge cells with colspan and rowspan
• ✅ Help screen readers with scope
• ✅ Build accessible tables for everyone!

Tables are your superpower for organizing data. Now go build something amazing! 🎉