HTML Tables:

What is an HTML Table?

An HTML table is used to present data in rows and columns, similar to spreadsheets. It organizes information clearly for users. Tables are commonly used for:
✔ Displaying structured data (e.g., pricing tables, reports).
✔ Creating layouts (although CSS is preferred for modern layouts).
✔ Presenting comparisons and statistics.

Basic HTML Table Structure

An HTML table is created using the <table> tag, and it contains rows <tr> and cells <td>. If headers are needed, <th> is used instead of <td>.

Basic Table Example:

<table border="1">
    <tr>
        <th>Product</th>
        <th>Price</th>
    </tr>
    <tr>
        <td>Laptop</td>
        <td>$1000</td>
    </tr>
    <tr>
        <td>Smartphone</td>
        <td>$500</td>
    </tr>
</table>

How It Works:

✔ <table> → Defines the table.
✔ <tr> → Creates a new row.
✔ <th> → Defines header cells (bold & centered).
✔ <td> → Defines data cells.
✔ border="1" → Adds borders (for visibility).

Adding More Features to a Table

1️⃣ Table with Column & Row Spanning

✔ colspan → Merges multiple columns into one.
✔ rowspan → Merges multiple rows into one.

<table border="1">
    <tr>
        <th colspan="2">Employee Details</th>
    </tr>
    <tr>
        <td>Name</td>
        <td>John Doe</td>
    </tr>
    <tr>
        <td rowspan="2">Contact</td>
        <td>john@example.com</td>
    </tr>
    <tr>
        <td>+1234567890</td>
    </tr>
</table>

✔ The header spans two columns using colspan="2".
✔ The "Contact" row spans two rows using rowspan="2".

2️⃣ Adding a Table Caption

A <caption> describes the purpose of the table.

<table border="1">
    <caption><b>Student Grades</b></caption>
    <tr>
        <th>Name</th>
        <th>Grade</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>A</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>B+</td>
    </tr>
</table>

✔ The caption appears above the table.

3️⃣ Using Table Sections (`<thead>`, `<tbody>`, `<tfoot>`)

For better structure, we divide tables into:
✔ <thead> → Contains the table headers.
✔ <tbody> → Contains the main data rows.
✔ <tfoot> → Contains the footer section (e.g., totals).

<table border="1">
    <thead>
        <tr>
            <th>Item</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Book</td>
            <td>$10</td>
        </tr>
        <tr>
            <td>Pen</td>
            <td>$2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td><b>Total</b></td>
            <td><b>$12</b></td>
        </tr>
    </tfoot>
</table>

✔ Separates table parts, improving readability.

4️⃣ Styling Tables with CSS

We can apply CSS to improve table appearance.

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

tr:hover {
    background-color: #f5f5f5;
}

✔ border-collapse: collapse; → Removes extra spaces between borders.
✔ padding: 8px; → Adds space inside cells.
✔ th { background-color: #f2f2f2; } → Gives header background color.
✔ tr:hover → Changes row color on hover (great for readability).

Summary Table

Feature	Example
Basic Table	`<table><tr><td>Data</td></tr></table>`
Table Headers	`<th>Header</th>`
Column Span	`colspan="2"`
Row Span	`rowspan="2"`
Table Caption	`<caption>Title</caption>`
Table Sections	`<thead>`, `<tbody>`, `<tfoot>`
Styled Table	CSS: `border, padding, background-color`

Best Practices:

✔ Use <th> for headers to improve accessibility and SEO.
✔ Avoid using tables for layout; use CSS Grid/Flexbox instead.
✔ Make tables responsive for mobile users.
✔ Use colspan and rowspan wisely to avoid confusing structures.
✔ Apply CSS styles for better readability.

HTML