Styling Tables with CSS

Table Styling

border-collapse: collapse removes spacing between cell borders.

border-spacing controls space between cells (when borders are separate).

table-layout: auto (default) or fixed for column width behavior.

vertical-align controls vertical alignment in cells.

Use nth-child for zebra striping.

/* Basic table */
table {
  width: 100%;
  border-collapse: collapse;
}

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

/* Header styling */
th {
  background-color: #4CAF50;
  color: white;
}

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

/* Hover effect */
tr:hover {
  background-color: #ddd;
}