Tables are for tabular data, not page layout. Good HTML (caption, th scope) plus CSS (zebra rows, sticky header) gives readable dashboards and interview credibility.
HTML baseline
<caption>— table title announced by screen readers.<th scope="col|row">— header relationships.- Avoid empty cells used only for spacing—use CSS padding.
CSS enhancements
border-collapse: collapsefor tight grids.- Zebra:
tbody tr:nth-child(even). - Responsive: wrap in
.table-wrap { overflow-x: auto; }on small screens.
Challenge
Sticky table header
- Add
position: sticky; top: 0tothead th. - Give header cells a solid
backgroundso rows do not show through while scrolling.
Done when: header row stays visible inside the scrollable table wrapper.
Go deeper — When NOT to use a table (intermediate / experienced)
Layout grids, marketing columns, and toolbars should use flex/grid. Misused tables break screen-reader table navigation and are harder to make responsive. If data is not row/column relationships, do not use <table>.