CSS Tables

by

Tables are used to display tabular data in HTML. While HTML provides the structure, CSS helps improve its appearance by adding styling such as CSS Tables borders, padding, colors, and hover effects.

1. Basic Table Structure in HTML

A table consists of the following elements:

  • <table> → Defines the table.
  • <tr> (table row) → Represents a row in the table.
  • <th> (table header) → Defines a header cell (bold by default).
  • <td> (table data) → Represents regular table cells.

Example (Basic Table Without CSS)

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Country</th>
    </tr>
    <tr>
        <td>John</td>
        <td>30</td>
        <td>USA</td>
    </tr>
    <tr>
        <td>Emma</td>
        <td>28</td>
        <td>UK</td>
    </tr>
</table>
HTML

2. Styling CSS Tables

2.1 Adding Borders

By default, HTML tables don’t have visible borders. We use the border property to add them.

table, th, td {
    border: 1px solid black;
}
CSS

Explanation

  • table, th, td → Targets the table, header, and data cells.
  • border: 1px solid black; → Adds a solid border of 1px thickness with black color.

2.2 Merging Borders

By default, HTML tables have separate borders. This causes double borders between adjacent cells. To fix this, use border-collapse.

table {
    border-collapse: collapse;
}
CSS

Explanation

  • border-collapse: collapse; → Merges adjacent cell borders into a single line.

2.3 Adding Padding and Spacing

  • Padding adds space inside cells.
  • Border-spacing controls the space between table cells (only when border-collapse: separate is used).
th, td {
    padding: 10px;
}
CSS

Explanation

  • padding: 10px; → Adds 10px space inside each cell, making the text more readable.

For spacing between cells:

table {
    border-spacing: 5px;
}
CSS

  • border-spacing: 5px; → Adds 5px space between cells (only works when border-collapse: separate is set).

2.4 Styling Table Headers

To distinguish header cells from regular cells, add a background color and bold font.

th {
    background-color: #f4f4f4;
    font-weight: bold;
    text-align: left;
}
CSS

Explanation

  • background-color: #f4f4f4; → Light gray background for header cells.
  • font-weight: bold; → Makes the text bold.
  • text-align: left; → Aligns the text to the left.

2.5 Creating a Striped Table (Alternating Row Colors)

To improve readability, alternate row colors using nth-child(even).

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

Explanation

  • nth-child(even) → Selects every even row.
  • background-color: #f9f9f9; → Applies a light gray background to even rows.

For odd rows:

tr:nth-child(odd) {
    background-color: white;
}
CSS

2.6 Hover Effects on Rows

To highlight a row when a user hovers over it:

tr:hover {
    background-color: #f1f1f1;
    cursor: pointer;
}
CSS

Explanation

  • tr:hover → Selects the row when the user hovers over it.
  • background-color: #f1f1f1; → Changes background color on hover.
  • cursor: pointer; → Changes cursor to a pointer (useful for clickable rows).

3. Advanced Table Styling

3.1 Rounded Corners

To add rounded corners to the table:

table {
    border-radius: 10px;
    overflow: hidden;
}
CSS

Explanation

  • border-radius: 10px; → Rounds the table edges.
  • overflow: hidden; → Ensures borders don’t break.

3.2 Adding Box Shadows

To make the table stand out:

table {
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
CSS

Explanation

  • box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); → Adds a subtle shadow.

3.3 Making a Responsive Table

For small screens, enable horizontal scrolling:

@media screen and (max-width: 600px) {
    table {
        width: 100%;
        display: block;
        overflow-x: auto;
    }
}
CSS

Explanation

  • overflow-x: auto; → Allows horizontal scrolling on small screens.

4. Full Table Example (With Explanation)

Here’s a complete example combining all the styles above:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled Table</title>
    <style>
        /* Table Styling */
        table {
            width: 100%;
            border-collapse: collapse;
        }

        /* Header and Cell Borders */
        th, td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: left;
        }

        /* Header Styling */
        th {
            background-color: #f4f4f4;
            font-weight: bold;
        }

        /* Alternate Row Colors */
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        /* Hover Effect */
        tr:hover {
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Country</th>
    </tr>
    <tr>
        <td>John</td>
        <td>30</td>
        <td>USA</td>
    </tr>
    <tr>
        <td>Emma</td>
        <td>28</td>
        <td>UK</td>
    </tr>
    <tr>
        <td>Lucas</td>
        <td>25</td>
        <td>Canada</td>
    </tr>
</table>

</body>
</html>
HTML

output:

CSS Tables

Explanation of the Code

1. Table Styling (width: 100%; border-collapse: collapse;)

  • Makes the table take the full width of its container.
  • Merges adjacent borders.

2. Borders and Padding

  • border: 1px solid #ddd; → Adds light gray borders.
  • padding: 10px; → Improves readability.

3. Header Styling

  • background-color: #f4f4f4; → Adds a gray background.
  • font-weight: bold; → Makes text bold.

4. Striped Rows

  • nth-child(even) → Alternates row colors.

5. Hover Effect

  • tr:hover → Changes background when hovered over.