Skip to main content

Styling Tables, Navigation and Data Displays

Data interfaces should prioritise interpretation over decoration.

.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 0.65rem;
  border: 1px solid #cbd5e1;
  text-align: left;
}

th { background: #123f73; color: #fff; }

tbody tr:nth-child(even) { background: #f8fafc; }

nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
}

Use real table markup for tabular data. A responsive wrapper permits horizontal scrolling without changing table meaning.

Highlight the current navigation link with text/shape as well as colour, and retain a visible focus state.

Check

  • Table has a caption and header cells in HTML.
  • Narrow screens can reach every column.
  • Navigation wraps safely.
  • Current location and focus are identifiable.
  • Empty datasets have a visible message.
Back to top