CSS Tables

31 March 2025 | Category: CSS

Tables are used to display structured data in a tabular format. CSS allows us to style tables beautifully by adding borders, backgrounds, colors, spacing, and even hover effects. This guide covers everything about CSS tables, including borders, styling headers, striped tables, hover effects, and responsive tables.

1️⃣ Basic HTML Table Structure

Before styling with CSS, let’s understand a simple HTML table.

Example

<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>Emma</td>
        <td>30</td>
        <td>Los Angeles</td>
    </tr>
</table>

🔹 <table> – Creates a table.
🔹 <tr> – Defines a table row.
🔹 <th> – Defines table headers (bold by default).
🔹 <td> – Defines table data (content inside a row).

2️⃣ Basic Table Styling

We can apply CSS to improve the table appearance.

Example

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

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

th {
    background-color: #f4f4f4;
}

🔹 border-collapse: collapse; → Removes gaps between borders.
🔹 border: 1px solid black; → Adds a border to all cells.
🔹 padding: 10px; → Adds space inside cells.
🔹 text-align: left; → Aligns text to the left.
🔹 background-color: #f4f4f4; → Light gray background for headers.

3️⃣ Adding Table Borders

You can style borders using different thicknesses, colors, and styles.

Example

table {
    border: 2px solid #333;
    border-collapse: collapse;
}

th, td {
    border: 2px dashed blue;
    padding: 8px;
}

🔹 solid – Normal border
🔹 dashed – Dashed border
🔹 dotted – Dotted border
🔹 double – Double line border

4️⃣ Striped Table (Alternating Row Colors)

Adding alternating row colors makes tables easier to read.

Example

tr:nth-child(even) {
    background-color: #f2f2f2;
}

🔹 nth-child(even) → Selects even rows (2nd, 4th, 6th…).
🔹 background-color → Adds a gray background to every even row.

5️⃣ Hover Effects on Table Rows

To highlight rows when hovered, use :hover.

Example

tr:hover {
    background-color: lightblue;
    cursor: pointer;
}

🖱️ Now, when you hover over a row, it changes color!

6️⃣ Styling Table Headers

You can style table headers to make them more distinct.

Example

th {
    background-color: #4CAF50;
    color: white;
    text-transform: uppercase;
    font-size: 16px;
}

🔹 background-color → Green background
🔹 color: white; → White text
🔹 text-transform: uppercase; → Converts text to uppercase
🔹 font-size: 16px; → Increases font size

7️⃣ Centering Text in a Table

You can align text horizontally and vertically.

Example

th, td {
    text-align: center;
    vertical-align: middle;
}

🔹 text-align: center; → Centers text horizontally.
🔹 vertical-align: middle; → Centers text vertically.

8️⃣ Responsive Tables (Mobile-Friendly)

Tables don’t fit well on small screens. Use overflow scrolling for responsiveness.

Example

.table-container {
    overflow-x: auto;
}

table {
    width: 100%;
    min-width: 600px;
}

<div class="table-container">
    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
        <tr>
            <td>John</td>
            <td>25</td>
            <td>New York</td>
        </tr>
    </table>
</div>

📱 Now, on small screens, the table becomes scrollable!

🔟 Full Example: Stylish Table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Tables</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 10px;
            text-align: left;
        }
        th {
            background-color: #4CAF50;
            color: white;
            text-transform: uppercase;
            font-size: 16px;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        tr:hover {
            background-color: lightblue;
            cursor: pointer;
        }
        .table-container {
            overflow-x: auto;
        }
    </style>
</head>
<body>

    <h2>Styled Table</h2>
    <div class="table-container">
        <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>Emma</td>
                <td>30</td>
                <td>Los Angeles</td>
            </tr>
            <tr>
                <td>Michael</td>
                <td>28</td>
                <td>Chicago</td>
            </tr>
        </table>
    </div>

</body>
</html>

✨ This table includes:
✅ Borders
✅ Striped rows
✅ Hover effects
✅ Styled headers
✅ Responsive design

🚀 Conclusion

Feature	CSS Property	Example
Add Borders	`border: 1px solid`	Table & cells
Striping Rows	`nth-child(even)`	Gray background
Hover Effect	`:hover`	Light blue row
Center Text	`text-align: center;`	Middle alignment
Responsive Table	`overflow-x: auto;`	Scrollable table