Syllabus

On this page

Styling Lists & Tables

Badar KhalilUpdated September 30, 2026 7 min read

Styling Lists and Tables in CSS

Lists and tables organise information. Lists group related items such as menus, steps and features. Tables present data in rows and columns. Learning styling lists and tables in CSS helps you build navigation bars, breadcrumbs, step-by-step guides, pricing tables, dashboards and reports that are clean, readable and accessible. In this lesson you will cover list markers, custom counters, horizontal lists, table borders, zebra stripes, hover rows, sticky headers and responsive tables, with live editable code.

Focus keyword: styling lists and tables in CSS. Related keywords: list-style-type, ::marker, CSS counters, border-collapse, border-spacing, caption-side, zebra striping, nth-child, sticky table header, responsive table CSS, tabular-nums, table-layout fixed.

Part 1: Styling Lists

1. List Types in HTML

<ul>: unordered list, shown with bullets by default.
<ol>: ordered list, shown with numbers by default.
<dl> with <dt> and <dd>: description list for term and definition pairs.

2. The list-style Properties

Property	What it does	Example values
`list-style-type`	Sets the marker shape or numbering system	disc, circle, square, decimal, lower-alpha, upper-roman, none
`list-style-position`	Puts the marker outside or inside the content box	outside, inside
`list-style-image`	Uses an image as the marker	url('icon.svg')
`list-style`	Shorthand for the three above	square inside, none

To remove bullets completely, use list-style: none; padding: 0; margin: 0;. Note that some screen readers (notably VoiceOver with Safari) stop announcing an element as a list when list-style is none, so add role='list' to the element if the list semantics matter.

3. Styling Markers with ::marker

The ::marker pseudo-element targets the bullet or number of a list item. You can change its color, font-size, font-weight, and even its content. Only a limited set of properties is supported, so for heavy customisation use counters or ::before.

4. CSS Counters for Custom Numbering

CSS counters let you build numbered steps, nested outlines (1.1, 1.2) and styled number badges. The three building blocks are counter-reset (create the counter), counter-increment (increase it on each item) and counter() (display the value inside content).

Most navigation menus are lists. Turn a vertical list into a horizontal one with display: flex and gap. Breadcrumbs can add separators using the adjacent sibling selector: li + li::before { content: '/'; }. Always wrap navigation lists in a <nav> with an aria-label.

Part 2: Styling Tables

1. Semantic Table Structure

A well-built table uses <caption>, <thead>, <tbody>, <tfoot>, <th scope='col'> and <th scope='row'>. These elements give screen readers the context to announce each cell together with its headers. Use tables only for tabular data, never for page layout.

2. Table Properties Reference

Property	Purpose
`border-collapse`	collapse merges neighbouring borders into one, separate keeps them apart
`border-spacing`	Gap between cells (only when separate)
`caption-side`	Places the caption at the top or bottom
`table-layout`	auto sizes by content, fixed uses equal, predictable column widths
`empty-cells`	Show or hide borders of empty cells
`vertical-align`	Aligns content inside cells (top, middle, bottom)
`font-variant-numeric: tabular-nums`	Makes digits equal width so numbers line up in columns

3. Zebra Striping and Row Hover

Alternating row colours help the eye follow a row across wide tables. Use tbody tr:nth-child(even) for stripes and tbody tr:hover for a highlight. Keep the contrast subtle, and make sure text contrast stays above 4.5:1 on every row colour.

4. Aligning Numbers

Right-align numeric columns and apply font-variant-numeric: tabular-nums so decimals line up. Left-align text columns. Consistent alignment makes comparisons much faster.

5. Sticky Headers

For long tables, keep the header visible while scrolling. Wrap the table in a container with overflow: auto and a fixed max-height, then set position: sticky; top: 0; on the <th> cells in the header. Give the sticky cells a solid background so rows do not show through.

6. Responsive Tables

Tables are naturally wide, so on small screens you have two common strategies:

Horizontal scroll: wrap the table in a div with overflow-x: auto. This is the simplest and keeps the structure intact.
Stacked cards: at a small breakpoint, turn each row into a block and show the column name using content: attr(data-label) on td::before.

Accessibility Checklist

Add a <caption> that describes the table.
Use <th> with scope for headers, not styled <td> cells.
Do not rely on colour alone to convey meaning inside cells.
Keep the scroll container keyboard focusable with tabindex='0' when it scrolls.
Keep lists as real lists so assistive technology announces the item count.

::marker with custom content for branded bullets without extra markup.
CSS counters and counter-style for multi-level numbering and step wizards.
:has() to highlight a row or list item based on its content, for example tr:has(input:checked).
position: sticky headers and first columns for data-heavy dashboards.
Container queries for tables inside resizable cards.
tabular-nums for finance and analytics UIs.

Common Mistakes

Forgetting border-collapse: collapse and getting double borders.
Using tables for layout.
Removing list bullets and losing list semantics without adding a role.
Placing sticky headers without a background colour.
Leaving wide tables unscrollable on mobile.

Summary

Lists and tables are essential building blocks. With list-style, ::marker and counters you can style any list. With border-collapse, stripes, sticky headers and responsive patterns you can make data tables that are beautiful and usable on every device. Experiment with each live example below.

Try it Yourself HTML

<style>
  body { font-family: system-ui, sans-serif; }
  ul.square { list-style-type: square; }
  ol.roman { list-style-type: upper-roman; }
  ol.alpha { list-style-type: lower-alpha; }
  ul.none { list-style: none; padding: 0; margin: 0; }
  ul.inside { list-style-position: inside; background: #f1f5f9; padding: 0.5rem; }
</style>
<h4>Square</h4><ul class='square'><li>HTML</li><li>CSS</li><li>JavaScript</li></ul>
<h4>Roman</h4><ol class='roman'><li>Plan</li><li>Build</li><li>Ship</li></ol>
<h4>Alpha</h4><ol class='alpha'><li>Option A</li><li>Option B</li></ol>
<h4>No bullets</h4><ul class='none' role='list'><li>Clean item one</li><li>Clean item two</li></ul>
<h4>Marker inside</h4><ul class='inside'><li>Inside marker item</li><li>Another item</li></ul>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: system-ui, sans-serif; font-size: 18px; }
  ul.star li::marker { content: '&#9733; '; color: #f59e0b; }
  ul.check li::marker { content: '&#10004; '; color: #16a34a; }
  ol.numbers li::marker { color: #2563eb; font-weight: 700; font-size: 1.1em; }
  li { padding-left: 0.4rem; margin-bottom: 0.3rem; }
</style>
<ul class='star'><li>Featured item</li><li>Another featured item</li></ul>
<ul class='check'><li>Task complete</li><li>Another done task</li></ul>
<ol class='numbers'><li>First step</li><li>Second step</li><li>Third step</li></ol>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: system-ui, sans-serif; max-width: 480px; }
  ol.steps { counter-reset: step; list-style: none; padding: 0; }
  ol.steps li {
    counter-increment: step;
    position: relative;
    padding: 0.75rem 1rem 0.75rem 3.25rem;
    margin-bottom: 0.5rem;
    background: #f8fafc;
    border-radius: 8px;
  }
  ol.steps li::before {
    content: counter(step);
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: #2563eb;
    color: #ffffff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.9rem;
  }
</style>
<ol class='steps'>
  <li>Create your account</li>
  <li>Choose a course</li>
  <li>Practice with live code</li>
  <li>Earn your certificate</li>
</ol>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: system-ui, sans-serif; padding: 16px; }
  .crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0 0 1.5rem; }
  .crumbs li + li::before { content: '/'; margin-right: 0.5rem; color: #94a3b8; }
  .crumbs a { color: #2563eb; text-decoration: none; }
  .crumbs a:hover { text-decoration: underline; }
  .crumbs [aria-current='page'] { color: #475569; font-weight: 600; }
  .tags { list-style: none; display: flex; gap: 0.5rem; padding: 0; }
  .tags li { background: #e0e7ff; color: #3730a3; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.85rem; }
</style>
<nav aria-label='Breadcrumb'>
  <ol class='crumbs'>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>Courses</a></li>
    <li aria-current='page'>CSS Basics</li>
  </ol>
</nav>
<ul class='tags' role='list'><li>HTML</li><li>CSS</li><li>Lists</li></ul>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: system-ui, sans-serif; padding: 16px; }
  table { border-collapse: collapse; width: 100%; }
  caption { caption-side: top; text-align: left; font-weight: 700; padding: 0.5rem 0; }
  th, td { border: 1px solid #cbd5e1; padding: 0.6rem 0.9rem; text-align: left; }
  thead th { background: #1e293b; color: #ffffff; }
  tfoot td { font-weight: 700; background: #f1f5f9; }
  .num { text-align: right; font-variant-numeric: tabular-nums; }
</style>
<table>
  <caption>Monthly sales report</caption>
  <thead>
    <tr><th scope='col'>Product</th><th scope='col'>Units</th><th scope='col' class='num'>Revenue</th></tr>
  </thead>
  <tbody>
    <tr><th scope='row'>Keyboard</th><td>120</td><td class='num'>$3,600.00</td></tr>
    <tr><th scope='row'>Mouse</th><td>250</td><td class='num'>$4,250.50</td></tr>
    <tr><th scope='row'>Monitor</th><td>45</td><td class='num'>$9,900.00</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan='2'>Total</td><td class='num'>$17,750.50</td></tr>
  </tfoot>
</table>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: system-ui, sans-serif; padding: 16px; }
  table { border-collapse: collapse; width: 100%; }
  th, td { padding: 0.7rem 1rem; text-align: left; border-bottom: 1px solid #e2e8f0; }
  thead th { background: #0f172a; color: #ffffff; }
  tbody tr:nth-child(even) { background: #f1f5f9; }
  tbody tr { transition: background 0.15s ease; }
  tbody tr:hover { background: #dbeafe; }
  tbody th { font-weight: 600; }
</style>
<table>
  <thead><tr><th scope='col'>Name</th><th scope='col'>Role</th><th scope='col'>City</th></tr></thead>
  <tbody>
    <tr><th scope='row'>Ayesha</th><td>Designer</td><td>Karachi</td></tr>
    <tr><th scope='row'>Bilal</th><td>Developer</td><td>Lahore</td></tr>
    <tr><th scope='row'>Sara</th><td>Manager</td><td>Islamabad</td></tr>
    <tr><th scope='row'>Usman</th><td>Analyst</td><td>Multan</td></tr>
  </tbody>
</table>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: system-ui, sans-serif; padding: 16px; }
  .wrap { max-height: 200px; overflow: auto; border: 1px solid #cbd5e1; border-radius: 8px; }
  table { border-collapse: collapse; width: 100%; }
  th, td { padding: 0.6rem 1rem; text-align: left; border-bottom: 1px solid #e2e8f0; }
  thead th { position: sticky; top: 0; background: #0f172a; color: #ffffff; }
</style>
<div class='wrap' tabindex='0' role='region' aria-label='Scrollable student table'>
  <table>
    <thead><tr><th scope='col'>#</th><th scope='col'>Student</th><th scope='col'>Score</th></tr></thead>
    <tbody>
      <tr><td>1</td><td>Ali</td><td>88</td></tr>
      <tr><td>2</td><td>Hina</td><td>92</td></tr>
      <tr><td>3</td><td>Omar</td><td>75</td></tr>
      <tr><td>4</td><td>Zara</td><td>81</td></tr>
      <tr><td>5</td><td>Hamza</td><td>69</td></tr>
      <tr><td>6</td><td>Noor</td><td>95</td></tr>
      <tr><td>7</td><td>Fatima</td><td>84</td></tr>
      <tr><td>8</td><td>Daniyal</td><td>77</td></tr>
      <tr><td>9</td><td>Iqra</td><td>90</td></tr>
      <tr><td>10</td><td>Saad</td><td>73</td></tr>
    </tbody>
  </table>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: system-ui, sans-serif; padding: 16px; }
  table { border-collapse: collapse; width: 100%; }
  th, td { padding: 0.7rem 1rem; text-align: left; border: 1px solid #cbd5e1; }
  thead th { background: #1e293b; color: #ffffff; }
  @media (max-width: 600px) {
    table, thead, tbody, tr, th, td { display: block; }
    thead { position: absolute; left: -9999px; }
    tr { margin-bottom: 1rem; border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden; }
    td { display: flex; justify-content: space-between; border: 0; border-bottom: 1px solid #e2e8f0; }
    td::before { content: attr(data-label); font-weight: 700; margin-right: 1rem; }
  }
</style>
<p>Resize the preview narrower than 600px to see the stacked card layout.</p>
<table>
  <thead><tr><th>Plan</th><th>Price</th><th>Storage</th></tr></thead>
  <tbody>
    <tr><td data-label='Plan'>Basic</td><td data-label='Price'>$5</td><td data-label='Storage'>10 GB</td></tr>
    <tr><td data-label='Plan'>Pro</td><td data-label='Price'>$15</td><td data-label='Storage'>100 GB</td></tr>
    <tr><td data-label='Plan'>Team</td><td data-label='Price'>$30</td><td data-label='Storage'>1 TB</td></tr>
  </tbody>
</table>

Output

Press Run to execute.

Exercise: Create a Numbered Steps ListHTML

Turn the ordered list into a styled steps list using CSS counters. Remove the default numbers, then show each step number inside a blue circle using li::before with content: counter(step). Add a light gray background and rounded corners to each item.

Try it Yourself HTML

<style>
  /* TODO: counter-reset on ol, counter-increment on li, and li::before styling */
</style>
<ol>
  <li>Install an editor</li>
  <li>Write HTML</li>
  <li>Style with CSS</li>
</ol>

Output

Press Run to execute.

Show expected output

Each list item shows a blue circular number badge on the left, a light gray background and rounded corners, with no default browser numbers.

This is a self-check — compare your result with the expected output above.

Exercise: Zebra Table with HoverHTML

Style the table so borders are collapsed, the header row has a dark background with white text, even body rows have a light gray background, and a row turns light blue on hover. Right-align the Price column and use tabular-nums.

Try it Yourself HTML

<style>
  /* TODO: border-collapse, thead th, tbody tr:nth-child(even), tbody tr:hover, .num */
</style>
<table>
  <thead><tr><th>Item</th><th class='num'>Price</th></tr></thead>
  <tbody>
    <tr><td>Notebook</td><td class='num'>4.50</td></tr>
    <tr><td>Pen</td><td class='num'>1.25</td></tr>
    <tr><td>Backpack</td><td class='num'>39.99</td></tr>
    <tr><td>Marker</td><td class='num'>2.75</td></tr>
  </tbody>
</table>

Output

Press Run to execute.

Show expected output

A table with single borders, a dark header, alternating light gray rows, a light blue hover row, and right-aligned aligned numbers in the Price column.

This is a self-check — compare your result with the expected output above.

Quiz: Styling Lists & Tables Quiz Pass 70%

Loading quiz…

Was this page helpful?

Styling Lists and Tables in CSS

Part 1: Styling Lists

1. List Types in HTML

2. The list-style Properties

3. Styling Markers with ::marker

4. CSS Counters for Custom Numbering

5. Horizontal Lists and Navigation

Part 2: Styling Tables

1. Semantic Table Structure

2. Table Properties Reference

3. Zebra Striping and Row Hover

4. Aligning Numbers

5. Sticky Headers

6. Responsive Tables

Accessibility Checklist

Trending Techniques (2026)

Common Mistakes

Summary