HTML Tables 📊¶

Mentor's Note: Tables are like spreadsheets for your web pages! Just as spreadsheets organize data in neat rows and columns, HTML tables structure information in a way that's easy to read and understand! 📋📈

📚 Educational Content: This comprehensive guide covers all aspects of HTML tables to create organized, readable data displays.

🎯 Learning Objectives¶

By the end of this lesson, students will be able to:

Create basic table structures with proper tags
Organize data with headers, rows, and cells
Merge cells with colspan and rowspan
Implement table captions and headers
Apply accessibility features for tables

🌟 The Scenario: Digital Spreadsheet 📈¶

Mental Model for beginners: Think of tables as digital spreadsheets! Imagine you're creating a student grade report... 📊

Title: <caption> - Report title
Column Headers: <th> - Subject names
Data Rows: <tr> - Student information
Data Cells: <td> - Grades and scores
The Result: Organized, readable data! ✅

📖 Table Structure Overview¶

Why Tables Matter:¶

Data Organization: Structure information logically
Comparison: Easy to compare related data
Readability: Grid format is easy to scan
Accessibility: Screen readers can navigate tables properly
Professional: Clean presentation of tabular data

Table Tags Hierarchy:¶

graph TD
    A[<table>] --> B[<caption>]
    A --> C[<thead>]
    A --> D[<tbody>]
    A --> E[<tfoot>]

    C --> F[<tr>]
    D --> G[<tr>]
    E --> H[<tr>]

    F --> I[<th>]
    G --> J[<td>]
    H --> K[<td>]

    style A fill:#e74c3c
    style B fill:#3498db
    style C fill:#2ecc71
    style D fill:#f39c12
    style E fill:#9b59b6
    style F fill:#1abc9c
    style G fill:#34495e
    style H fill:#e67e22
    style I fill:#95a5a6
    style J fill:#d35400
    style K fill:#c0392b

🏗️ Basic Table Structure¶

Simple Table Example:¶

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
    </tr>
    <tr>
        <td>John Doe</td>
        <td>25</td>
        <td>New York</td>
    </tr>
    <tr>
        <td>Jane Smith</td>
        <td>30</td>
        <td>Los Angeles</td>
    </tr>
</table>

Table Tags Explained:¶

Tag	Purpose	Example
`<table>`	Container for table	`<table>...</table>`
`<tr>`	Table row	`<tr>...</tr>`
`<th>`	Table header cell	`<th>Header</th>`
`<td>`	Table data cell	`<td>Data</td>`
`<caption>`	Table title	`<caption>Title</caption>`

📋 Complete Table Structure¶

Structured Table Example:¶

<table>
    <caption>Student Grades Report</caption>

    <thead>
        <tr>
            <th>Student Name</th>
            <th>Math</th>
            <th>Science</th>
            <th>English</th>
            <th>Total</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Alice Johnson</td>
            <td>85</td>
            <td>92</td>
            <td>88</td>
            <td>265</td>
        </tr>
        <tr>
            <td>Bob Williams</td>
            <td>78</td>
            <td>85</td>
            <td>90</td>
            <td>253</td>
        </tr>
        <tr>
            <td>Carol Davis</td>
            <td>92</td>
            <td>89</td>
            <td>94</td>
            <td>275</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <th>Class Average</th>
            <th>85</th>
            <th>88.7</th>
            <th>90.7</th>
            <th>264.3</th>
        </tr>
    </tfoot>
</table>

Table Sections:¶

<caption>: Table title/description
<thead>: Header section (column titles)
<tbody>: Main data section
<tfoot>: Footer section (totals, averages)

🎨 Table Styling Attributes¶

Common Table Attributes:¶

<table border="1" cellpadding="5" cellspacing="0" width="100%">
    <tr>
        <th align="left" valign="top">Name</th>
        <th align="center" valign="middle">Score</th>
        <th align="right" valign="bottom">Grade</th>
    </tr>
    <tr>
        <td bgcolor="#f0f0f0">John</td>
        <td>85</td>
        <td>B</td>
    </tr>
</table>

Table Attributes:¶

Attribute	Purpose	Example
`border`	Table border width	`border="1"`
`cellpadding`	Cell padding	`cellpadding="5"`
`cellspacing`	Cell spacing	`cellspacing="0"`
`width`	Table width	`width="100%"`
`align`	Table alignment	`align="center"`
`bgcolor`	Background color	`bgcolor="#f0f0f0"`

🔗 Merging Cells: Colspan and Rowspan¶

Colspan (Column Span):¶

<table border="1">
    <tr>
        <th colspan="2">Personal Information</th>
        <th>Contact</th>
    </tr>
    <tr>
        <td>Name</td>
        <td>John Doe</td>
        <td>[email protected]</td>
    </tr>
    <tr>
        <td>Age</td>
        <td>25</td>
        <td>555-1234</td>
    </tr>
</table>

Rowspan (Row Span):¶

<table border="1">
    <tr>
        <th>Category</th>
        <th>Item</th>
        <th>Price</th>
    </tr>
    <tr>
        <td rowspan="3">Fruits</td>
        <td>Apple</td>
        <td>$1.50</td>
    </tr>
    <tr>
        <td>Banana</td>
        <td>$0.80</td>
    </tr>
    <tr>
        <td>Orange</td>
        <td>$1.20</td>
    </tr>
</table>

Combined Colspan and Rowspan:¶

<table border="1">
    <tr>
        <th colspan="2" rowspan="2">Products</th>
        <th colspan="2">Sales</th>
    </tr>
    <tr>
        <th>Q1</th>
        <th>Q2</th>
    </tr>
    <tr>
        <td>Laptops</td>
        <td>Model A</td>
        <td>$50,000</td>
        <td>$60,000</td>
    </tr>
    <tr>
        <td>Phones</td>
        <td>Model X</td>
        <td>$30,000</td>
        <td>$35,000</td>
    </tr>
</table>

🎯 Quick Quiz¶

Test Your Knowledge

Which tag is used for table header cells? - [ ] <td> - [ ] <tr> - [x] <th> - [ ] <thead>

Explanation: <th> is used for table header cells, while <td> is for data cells, <tr> for rows, and <thead> for the header section.

Think About It

When should you use colspan versus rowspan?

Answer: Use colspan to merge cells horizontally (across columns) and rowspan to merge cells vertically (across rows). Colspan spans multiple columns, while rowspan spans multiple rows.

🛠️ Practice Exercise¶

Create a Student Schedule

Task: Create a weekly class schedule table:

Requirements: 1. Table caption with schedule title 2. Days of week as column headers 3. Time slots as row headers 4. Use colspan for subjects spanning multiple periods 5. Use rowspan for lunch breaks 6. Include a footer with total class hours

Hint: Start with this structure:

<table>
    <caption>Weekly Class Schedule</caption>
    <thead>
        <tr>
            <th>Time</th>
            <th>Monday</th>
            <!-- Add more days -->
        </tr>
    </thead>
    <tbody>
        <!-- Add schedule rows -->
    </tbody>
    <tfoot>
        <!-- Add totals -->
    </tfoot>
</table>

🔍 Table Best Practices¶

✅ Do's:¶

Use semantic tags: <thead>, <tbody>, <tfoot>
Add captions: Describe table content
Use scope attributes: scope="col" and scope="row"
Keep tables simple: Avoid overly complex structures
Provide summaries: For complex tables

❌ Don'ts:¶

Use tables for layout: Use CSS for page layout
Nest tables too deeply: Keep structure simple
Forget headers: Always label columns and rows
Use too many merged cells: Can confuse users
Ignore accessibility: Screen readers need proper structure

🎨 Real-World Examples¶

Financial Report Table:¶

<table class="financial-report">
    <caption>Quarterly Revenue Report 2024</caption>

    <thead>
        <tr>
            <th>Product Category</th>
            <th>Q1 Revenue</th>
            <th>Q2 Revenue</th>
            <th>Q3 Revenue</th>
            <th>Q4 Revenue</th>
            <th>Total</th>
            <th>Growth</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th scope="row">Electronics</th>
            <td>$125,000</td>
            <td>$135,000</td>
            <td>$142,000</td>
            <td>$158,000</td>
            <td><strong>$560,000</strong></td>
            <td>+26.4%</td>
        </tr>
        <tr>
            <th scope="row">Clothing</th>
            <td>$85,000</td>
            <td>$92,000</td>
            <td>$88,000</td>
            <td>$95,000</td>
            <td><strong>$360,000</strong></td>
            <td>+11.8%</td>
        </tr>
        <tr>
            <th scope="row">Books</th>
            <td>$45,000</td>
            <td>$48,000</td>
            <td>$52,000</td>
            <td>$58,000</td>
            <td><strong>$203,000</strong></td>
            <td>+28.9%</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <th scope="row">Total Revenue</th>
            <td>$255,000</td>
            <td>$275,000</td>
            <td>$282,000</td>
            <td>$311,000</td>
            <td><strong>$1,123,000</strong></td>
            <td>+22.0%</td>
        </tr>
    </tfoot>
</table>

Product Comparison Table:¶

<table class="product-comparison">
    <caption>Laptop Comparison - High-End Models</caption>

    <thead>
        <tr>
            <th>Feature</th>
            <th>Model Pro X</th>
            <th>UltraBook Z</th>
            <th>Gaming Beast 9000</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th scope="row">Processor</th>
            <td>Intel i7-12700H</td>
            <td>AMD Ryzen 7 6800H</td>
            <td>Intel i9-12900HX</td>
        </tr>
        <tr>
            <th scope="row">RAM</th>
            <td>16GB DDR5</td>
            <td>16GB DDR5</td>
            <td>32GB DDR5</td>
        </tr>
        <tr>
            <th scope="row">Storage</th>
            <td>512GB SSD</td>
            <td>1TB SSD</td>
            <td>1TB SSD + 2TB HDD</td>
        </tr>
        <tr>
            <th scope="row">Graphics</th>
            <td>RTX 3060</td>
            <td>Integrated Radeon</td>
            <td>RTX 3080 Ti</td>
        </tr>
        <tr>
            <th scope="row">Display</th>
            <td>15.6" FHD 144Hz</td>
            <td>14" 2.8K OLED</td>
            <td>17.3" QHD 240Hz</td>
        </tr>
        <tr>
            <th scope="row">Battery Life</th>
            <td>8 hours</td>
            <td>12 hours</td>
            <td>5 hours</td>
        </tr>
        <tr>
            <th scope="row">Price</th>
            <td>$1,299</td>
            <td>$1,499</td>
            <td>$2,499</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <th scope="row">Best For</th>
            <td>Professional Work</td>
            <td>Portability & Quality</td>
            <td>Gaming & Performance</td>
        </tr>
    </tfoot>
</table>

Class Schedule Table:¶

<table class="class-schedule">
    <caption>Weekly Class Schedule - Fall 2024</caption>

    <thead>
        <tr>
            <th>Time</th>
            <th>Monday</th>
            <th>Tuesday</th>
            <th>Wednesday</th>
            <th>Thursday</th>
            <th>Friday</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th scope="row">8:00 - 9:00</th>
            <td>Math</td>
            <td>English</td>
            <td>Math</td>
            <td>English</td>
            <td>Math</td>
        </tr>
        <tr>
            <th scope="row">9:00 - 10:00</th>
            <td>Science</td>
            <td>History</td>
            <td>Science</td>
            <td>History</td>
            <td>Science</td>
        </tr>
        <tr>
            <th scope="row" rowspan="2">10:00 - 12:00</th>
            <td colspan="5">Lunch Break</td>
        </tr>
        <tr>
            <!-- This row is merged with the one above -->
        </tr>
        <tr>
            <th scope="row">12:00 - 1:00</th>
            <td>Computer Lab</td>
            <td>Art</td>
            <td>Computer Lab</td>
            <td>Art</td>
            <td>Computer Lab</td>
        </tr>
        <tr>
            <th scope="row">1:00 - 2:00</th>
            <td>Physical Ed</td>
            <td>Music</td>
            <td>Physical Ed</td>
            <td>Music</td>
            <td>Physical Ed</td>
        </tr>
        <tr>
            <th scope="row">2:00 - 3:00</th>
            <td>Study Hall</td>
            <td>Study Hall</td>
            <td>Study Hall</td>
            <td>Study Hall</td>
            <td>Study Hall</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <th scope="row">Total Classes</th>
            <td colspan="5">25 classes per week</td>
        </tr>
    </tfoot>
</table>

Coming Up Next:¶

Forms: Interactive user input
CSS Table Styling: Beautiful table designs
Responsive Tables: Mobile-friendly tables
Table Accessibility: Screen reader optimization

Prerequisites for Advanced Topics:¶

Table Structure: Understanding all table tags
Cell Merging: Colspan and rowspan concepts
Semantic HTML: Proper table organization

💡 Pro Tips¶

Learning Strategy:¶

Start Simple: Begin with basic 2x2 tables
Practice Merging: Try colspan and rowspan
Use Real Data: Create tables with meaningful information
Test Accessibility: Use screen readers to test navigation

Professional Tips:¶

Plan Before Coding: Sketch table structure first
Use Headers Properly: Always label columns and rows
Consider Mobile: Ensure tables work on small screens
Add Sorting: Consider JavaScript for interactive tables

📊 Advanced Table Features¶

Scope Attributes:¶

<table>
    <tr>
        <th scope="col">Name</th>  <!-- Column header -->
        <th scope="col">Age</th>
    </tr>
    <tr>
        <th scope="row">John</th>  <!-- Row header -->
        <td>25</td>
    </tr>
</table>

Table with Summary:¶

<table summary="Employee contact information with names, departments, and phone numbers">
    <!-- Table content -->
</table>

💡 Mentor's Final Note: Tables are the spreadsheets of the web! They organize data in a way that's easy to understand and analyze. Master tables, and you'll be able to present complex information clearly and professionally! 📊

📚 Summary¶

You Learned:¶

Basic table structure and tags
Table sections (thead, tbody, tfoot)
Cell merging with colspan and rowspan
Table attributes and styling
Accessibility best practices

Phase 2 Complete! 🎉¶

You've now completed Phase 2: Core Elements: - ✅ Text Formatting - ✅ Media Elements
- ✅ Links & Navigation - ✅ Tables

Next Phase:¶

Forms - Learn to create interactive user input forms

Purpose: Complete guide to HTML tables Practice Time: 25-35 minutes Next Lesson: HTML Forms