CHAPTER 5 OF 5

5. Styling and testing

Your goal: keep the structure useful after styling and publishing.

Style the existing structure

Use CSS for spacing, borders, colors, and text. Keep the HTML table elements and header relationships in place. A small table can wrap its text; a wider table may need a locally scrollable container.

On this site, literal colors belong in a stylesheet's :root palette. The rules below reference named variables rather than repeating color values.

.workshop-table { width: 100%; border-collapse: collapse; color: var(--guide-ink); } .workshop-table th, .workshop-table td { padding: 12px; border: 1px solid var(--guide-line); text-align: left; }

Check the finished table

• Confirm the caption accurately names this table.
• Inspect header cells and their row or column scope.
• Check that data still lines up with the intended headers.
• Enlarge the page and check a narrow viewport for clipping or lost information.
• If the container scrolls, reach it by keyboard and confirm it scrolls.
• Use a screen reader's table-navigation commands to review row and column context.
• Check text and boundary contrast where needed; do not rely on color alone.