CSS lets you control the appearance of HTML tables — borders, spacing, padding, colors, and alignment.
1 2 3 |
table, th, td { border: 1px solid black; } |
Adds borders to the table, header cells, and data cells.
1 2 3 |
table { border-collapse: collapse; } |
collapse → merges borders (clean look)
separate → keeps them separate (default)
1 2 3 |
td, th { padding: 10px; } |
Adds space inside each cell.
1 2 3 4 |
table { width: 100%; text-align: left; } |
1 2 3 |
tr:nth-child(even) { background-color: #f2f2f2; } |
Adds zebra stripes.
1 2 3 4 |
th { background-color: #4CAF50; color: white; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
table { width: 100%; border-collapse: collapse; }th, td { border: 1px solid #555; padding: 10px; text-align: left; } tr:nth-child(even) { background-color: #f9f9f9; } th { background-color: #333; color: white; } |
by CodeCapsule · Published December 15, 2025
by CodeCapsule · Published December 15, 2025
by CodeCapsule · Published December 15, 2025