📊 HTML Tables

Display Data in Rows and Columns

HTML Tables

Tables display data in a structured format with rows and columns. They're perfect for organizing tabular data like schedules, pricing, or statistics.

💻 Basic Table

<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>Sarah</td>
        <td>30</td>
        <td>London</td>
    </tr>
</table>

🔧 Table with Sections

<table>
    <!-- Table head -->
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Stock</th>
        </tr>
    </thead>
    
    <!-- Table body -->
    <tbody>
        <tr>
            <td>Laptop</td>
            <td>$999</td>
            <td>15</td>
        </tr>
        <tr>
            <td>Phone</td>
            <td>$699</td>
            <td>30</td>
        </tr>
    </tbody>
    
    <!-- Table footer -->
    <tfoot>
        <tr>
            <td>Total</td>
            <td>$1,698</td>
            <td>45</td>
        </tr>
    </tfoot>
</table>

🎨 Spanning Rows and Columns

<!-- Column span -->
<table>
    <tr>
        <th colspan="3">Monthly Sales</th>
    </tr>
    <tr>
        <td>January</td>
        <td>February</td>
        <td>March</td>
    </tr>
</table>

<!-- Row span -->
<table>
    <tr>
        <th rowspan="2">Name</th>
        <th>Phone</th>
    </tr>
    <tr>
        <th>Email</th>
    </tr>
</table>

📝 Table with Caption

<table>
    <caption>Student Grades</caption>
    <thead>
        <tr>
            <th>Student</th>
            <th>Grade</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alice</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>B+</td>
        </tr>
    </tbody>
</table>

🎯 Key Takeaways