HTML Tables - Display Tabular Data

Tables organize data in rows and columns: perfect for schedules, prices, comparisons.

Use <table>, <tr> (row), <th> (header), <td> (cell).

1. Basic Table Structure

              
            
HTML

          Simple 3x3 table
        
<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
        <td>NY</td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>30</td>
        <td>LA</td>
    </tr>
</table>

border="1" adds visible lines (use CSS for production).

2. Table Attributes

<table colspan="2" rowspan="2"> for merged cells.

              
            
HTML

          Colspan and rowspan
        
<table border="1">
    <tr>
        <th colspan="2">Header</th>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
</table>

3. Semantic Table Elements

              
            
HTML

          thead, tbody, tfoot
        
<table>
    <thead>
        <tr><th>Product</th><th>Price</th></tr>
    </thead>
    <tbody>
        <tr><td>Laptop</td><td>$999</td></tr>
    </tbody>
    <tfoot>
        <tr><td>Total</td><td>$999</td></tr>
    </tfoot>
</table>

4. Complete Example: Price Table

              
            
HTML

          Product comparison table
        
<!DOCTYPE html>
<html>
<head>
    <title>Price Table</title>
</head>
<body>
    <h1>Plans</h1>
    <table border="1">
        <tr>
            <th>Plan</th>
            <th>Price</th>
            <th>Features</th>
        </tr>
        <tr>
            <td>Basic</td>
            <td>Free</td>
            <td>1GB</td>
        </tr>
        <tr>
            <td>Pro</td>
            <td>$10</td>
            <td>10GB</td>
        </tr>
    </table>
</body>
</html>

5. Styling Tips (Inline)

Use style attribute temporarily: style="width:100%; border-collapse:collapse;".

6. Best Practices

- Tables for data only, not layout (use CSS Grid/Flexbox).

- Add scope="col" to <th> for accessibility.

- Make responsive with CSS media queries.

7. Common Errors

- Mismatched <tr>/<td> counts.

- Using tables for page layout.

8. Next Steps

- Forms (<form>, <input>)

- Div and Semantic Elements

CSS Basics

Conclusion

Tables excel at data presentation.

Combine with lists for powerful layouts.