Styling Lists & Tables

Lists and tables come with distinctive default styles — bullets, numbers, indentation, cell borders. CSS can customise every part: custom markers, horizontal menus, zebra stripes, sticky headers and responsive scrolling.

List markers

list-style-type accepts keywords (disc, circle, square, decimal, upper-alpha, …) or any string. list-style-position: inside moves the marker into the content box.

Styling the marker

::marker styles the bullet or number directly (colour, font, content). For complete control, remove the marker and draw your own with ::before.

Removing list styling for menus

A navigation list keeps its meaning for screen readers while CSS turns it into a horizontal bar.

Custom counters

Table basics

• border-collapse: collapse merges adjacent cell borders into single lines.
• Right-align numbers and use tabular-nums so digits line up.
• Zebra stripes and a hover highlight help eyes track rows.

Layout and captions

table-layout: fixed sizes columns from the first row (or <col> widths) rather than the content, which is faster for big tables and keeps columns stable. caption-side moves the caption below.

Sticky headers and responsive tables

A scrolling wrapper keeps wide tables usable on phones, and position: sticky on header cells keeps them visible while the body scrolls.

Try it yourself