FSM Full Stack Masterclass
Platform under construction
CSS course badge

Components

Advanced

Table Styling

Tables are for comparing structured data. Good table CSS makes dense information scannable without destroying semantic table markup.

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
td[data-type="number"] { text-align: right; }

Component mental model

Tables should make comparison easier.

A table is not old-fashioned. It is the correct HTML structure for rows and columns of related data.

Table styling should support scanning: clear headers, row rhythm, numeric alignment, sticky headers when useful and sensible responsive behavior.

The common mistake is either overdesigning tables until they become noisy, or replacing real tabular data with divs and losing semantics.

Headers

Column names define how data should be read.

Rows

Spacing and borders help users track across the table.

Alignment

Numbers often need different alignment than text.

Overflow

Wide tables need a planned small-screen behavior.

Visual model

See the parts of the component before styling the surface.

Head

Labels

Headers explain each column.

Body

Rows

Data is grouped for comparison.

Numbers

Aligned

Numeric data scans better when aligned.

Scroll

Responsive

Wide data gets an overflow strategy.

Good CSS versus fragile CSS

Readable data table

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; }
td, th { padding: .875rem 1rem; }
td[data-type="number"] { text-align: right; font-variant-numeric: tabular-nums; }

Div table with lost meaning

.row { display: flex; }
.cell { width: 25%; }
.header { font-weight: bold; }

Rules of thumb

Components need systems, not one-off decoration.

Use table markup for data

Rows and columns deserve semantic table elements.

Align numbers deliberately

Numeric columns often scan best right-aligned with tabular nums.

Keep row rhythm calm

Use borders or subtle backgrounds, not heavy decoration everywhere.

Plan overflow

Small screens need horizontal scroll, stacked cards or reduced columns intentionally.

Use captions when helpful

A caption can explain what the table represents.

Do not fake layout tables

Use tables for data, not page layout.

Production thinking

A component is only good when real content and real states still work.

Why does this matter?

Good tables turn raw data into decisions. Bad tables make users hunt row by row.

Accessibility

Semantic table markup connects headers and cells for assistive technology.

Production note

Test tables with many rows, long labels and narrow screens. Dense data breaks layout quickly.

SEO note

Structured table content can help users and crawlers understand factual comparisons.

Live code lab

Change the CSS and watch the interface respond.

The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.

Mini assignment

Try this now.

  • Remove overflow-x and imagine the table on a narrow phone.
  • Add a longer course name and check if spacing still works.
  • Left-align the number column and compare scanning quality.

Practice assignment

Do this before moving to the next lesson.

  1. Create a semantic table with thead and tbody.
  2. Add a wrapper that handles horizontal overflow.
  3. Style numeric cells separately from text cells.

Try it yourself

Style a compact comparison table

Live preview

Self-check

Before you continue, prove that you understand Table Styling.

Advanced

Answer these questions before moving on. If a state, long label or mobile width breaks the component, the component is not finished yet.

  1. Can you decide when data should be a table?
  2. Can you keep table markup semantic?
  3. Can you style a responsive table without crushing columns?
  4. Can you align numeric data for scanning?
  5. Can you avoid using tables for page layout?

Senior audit upgrade

Data tables need hierarchy and scroll clues.

A table is not a card grid. Headers, captions, numeric alignment and overflow behavior carry meaning.

Caption

A caption can explain what the table represents before users scan data.

Sticky headers

Useful for large tables, but test overlap and scroll containers.

Scroll hint

If horizontal scrolling is required, make that possibility visible.