CSS Tables - Detailed Overview

Introduction to CSS Tables

Tables in HTML can be styled using CSS to improve their appearance and readability. CSS properties can be used to style table borders, backgrounds, text, and more.

Basic Table Styling

Here is a basic example of a styled table:

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

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

th {
    background-color: #f4f4f4;
    color: #333;
}

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

Bordered Table

Adding a border to the table and its cells:

.table-bordered {
    border: 2px solid #007BFF;
}

.table-bordered th, .table-bordered td {
    border: 2px solid #007BFF;
}

Striped Table

Adding alternating row colors for better readability:

.table-striped tr:nth-child(even) {
    background-color: #f9f9f9;
}

Hoverable Table

Adding a hover effect to rows:

.table-hover tr:hover {
    background-color: #f1f1f1;
}