CSS Tables

CSS tables are used to present data in an organized grid format. By default, HTML tables look very plain; CSS allows you to customize borders, add cell padding, and apply hover effects to enhance readability.

---

Table Borders

Use the border property to add borders to the table, headers (th), and cells (td). Without it, the table appears as plain text.

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

---

Collapsing Borders

By default, browser tables have 'double borders' because each cell has its own border. The border-collapse property enables single-line borders.

table {
    border-collapse: collapse;
}

---

Table Size (Width and Height)

The width and height properties define the dimensions of the table. You can specify it in pixels or percentages.

table {
    width: 100%;
}

th {
    height: 50px;
}

---

Table Padding and Alignment

Control the white space inside cells with the padding property. Use text-align to position text within cells.

td {
    padding: 15px;
    text-align: center;
}

---

Hoverable and Zebra-Striped Tables

To improve readability, you can add zebra stripes to every other row and make individual rows hoverable.

/* Zebra stripes */
tr:nth-child(even) { background-color: #f2f2f2; }

/* Hoverable rows */
tr:hover { background-color: #ddd; }

---