HTML Tables

Basic Table Structure

The core elements for a table: <table>, <tr>, <th>, and <td>.

Name Age City
John 25 New York
Jane 30 Los Angeles 

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

Table Attributes

Attributes like border, cellpadding, and cellspacing control table appearance.

Employee Department Role
Alice HR Manager 

<table border="1" cellpadding="10" cellspacing="5">
    <tr>
        <th>Employee</th>
        <th>Department</th>
        <th>Role</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>HR</td>
        <td>Manager</td>
    </tr>
</table>

Table Sections (thead, tbody, tfoot)

These tags improve table structure and accessibility for complex tables.

Order Summary
Item Cost
Book $20
Notebook $5
Total $25 

<table>
    <caption>Order Summary</caption>
    <thead>
        <tr><th>Item</th><th>Cost</th></tr>
    </thead>
    <tbody>
        <tr><td>Book</td><td>$20</td></tr>
        <tr><td>Notebook</td><td>$5</td></tr>
    </tbody>
    <tfoot>
        <tr><td>Total</td><td>$25</td></tr>
    </tfoot>
</table>

Merging Cells (colspan, rowspan)

Use colspan and rowspan to create complex layouts.

Project Timeline
Phase Duration
Start End
Planning Jan 2025 Feb 2025
Execution Mar 2025 Jun 2025 

<table>
    <caption>Project Timeline</caption>
    <tr><th rowspan="2">Phase</th><th colspan="2">Duration</th></tr>
    <tr><th>Start</th><th>End</th></tr>
    <tr><td>Planning</td><td>Jan 2025</td><td>Feb 2025</td></tr>
    <tr><td>Execution</td><td>Mar 2025</td><td>Jun 2025</td></tr>
</table>

Table Caption

The <caption> tag provides a title for your table.

Student Grades
Name Grade
Bob A
Sarah B 

<table>
    <caption>Student Grades</caption>
    <tr><th>Name</th><th>Grade</th></tr>
    <tr><td>Bob</td><td>A</td></tr>
    <tr><td>Sarah</td><td>B</td></tr>
</table>