CSS table properties control the visual layout, spacing, borders, cell padding, hover highlights, and responsive behavior of HTML data tables.
CSS transforms plain browser HTML tables into clean, readable data grids:
table {
width: 100%;
border-collapse: collapse; /* Merges adjacent cell borders */
}
th, td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid #334155;
}
/* Zebra striping alternating row colors */
tbody tr:nth-child(even) {
background-color: #1e293b;
}
/* Row hover highlight */
tbody tr:hover {
background-color: #334155;
}
Key table properties:
border-collapse: collapse: Removes double border spacing between adjacent cells.padding: Adds internal whitespace inside table cells for legibility.nth-child(even): Creates alternating zebra-striped background colors across rows.flowchart TD
A["border-collapse Options"] --> B["collapse (Single clean shared border line between cells)"]
A --> C["separate (Default: Spaced double borders between individual cells)"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Tables Demonstration</title>
<style>
.custom-table {
width: 100%;
border-collapse: collapse;
background-color: #1e293b;
border-radius: 8px;
overflow: hidden;
}
.custom-table th {
background-color: #334155;
color: #38bdf8;
padding: 12px 16px;
text-align: left;
}
.custom-table td {
padding: 12px 16px;
border-bottom: 1px solid #334155;
}
.custom-table tbody tr:hover {
background-color: #475569;
}
</style>
</head>
<body style="background-color: #0f172a; color: #f8fafc; font-family: system-ui, sans-serif; padding: 2rem;">
<h2>Styled Financial Summary Table</h2>
<table class="custom-table">
<thead>
<tr>
<th>Quarter</th>
<th>Revenue</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Q1 2026</td>
<td>$45,000</td>
<td>Completed</td>
</tr>
<tr>
<td>Q2 2026</td>
<td>$62,000</td>
<td>Completed</td>
</tr>
</tbody>
</table>
</body>
</html>
border-collapse: collapse: Merges double border lines into a single clean border grid.<div> for mobile: Use overflow-x: auto on parent wrappers so wide tables scroll horizontally on smartphones.Write a CSS rule applying border-collapse: collapse; to a table element and alternating background #1e293b on tr:nth-child(even)!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.