Table Styling
Apply a pale background to alternate body rows only.
Understand the topic
CSS can improve a table through restrained striping, readable alignment, and clear headers. Use structural selectors such as tbody tr:nth-child(even) so header rows do not shift the pattern. Right-align comparable numeric values when helpful. Preserve legible contrast and never make hover the only way to discover essential information.
Worked example
<style>tbody tr:nth-child(even) { background: #e0f2fe; } td { text-align: right; } th { text-align: left; }</style><table><caption>Workshop places</caption><thead><tr><th scope="col">Class</th><th scope="col">Places</th></tr></thead><tbody><tr><th scope="row">HTML</th><td>12</td></tr><tr><th scope="row">CSS</th><td>8</td></tr></tbody></table>Striping helps follow a row across columns. Numeric values are aligned separately from labels to make comparison easier.
Practice
Apply a pale background to alternate body rows only.
Show a suggested answer
tbody tr:nth-child(even) { background-color: #f0fdf4; }Common mistake
Do not target every tr with a stripe selector if you intend the pattern to apply only to the body.