Lists & Tables — HTML & CSS Course

What you'll learn

Content is easier to scan when it's organised. HTML gives you lists for sequences and groupings, and tables for genuine tabular data. Used correctly, both are highly accessible; misused, tables in particular cause real problems — so we'll learn the right way.

By the end you'll be able to:

Build unordered, ordered, and description lists
Nest lists for hierarchy
Structure a table with <thead>, <tbody>, and headers
Span cells and make tables accessible

Unordered & ordered lists

Use a <ul> (unordered list) when order doesn't matter — it renders bullets. Use an <ol> (ordered list) when sequence matters, like steps — it renders numbers. Each item is a <li> (list item), and lists can be nested inside a <li>to create sub-lists:

lists.html

<!-- Unordered: order doesn't matter (bullets) -->
<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Eggs</li>
</ul>

<!-- Ordered: sequence matters (numbers) -->
<ol>
  <li>Preheat the oven</li>
  <li>Mix the batter</li>
  <li>Bake for 30 minutes</li>
</ol>

Tip

Lists are everywhere in real sites — navigation menus, feature lists, breadcrumbs, and image galleries are all built on <ul>. Reach for a list whenever you have a collection of related items.

Description lists

A third, less-known list is the description list <dl>, which pairs terms with descriptions — perfect for glossaries, metadata, or FAQs. Each pair is a <dt> (term) followed by one or more <dd> (description):

description.html

<dl>
  <dt>HTML</dt>
  <dd>The language that structures web content.</dd>

  <dt>CSS</dt>
  <dd>The language that styles web content.</dd>
</dl>

Tables

A <table> presents data in rows and columns — think spreadsheets, schedules, or pricing. Rows are <tr>; header cells are <th> and data cells are <td>. Group the header row(s) in <thead> and the data in <tbody> for structure and styling:

table.html

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ada</td>
      <td>Engineer</td>
    </tr>
    <tr>
      <td>Linus</td>
      <td>Maintainer</td>
    </tr>
  </tbody>
</table>

table.html

Live preview

A table with a styled header row and body.

Spanning & accessibility

A cell can stretch across columns with colspan or down rows with rowspan. For accessibility, add a <caption> to title the table, and use the scope attribute on <th> (scope="col" or scope="row") so screen readers can announce which header describes each cell.

Watch out

Never use tables for page layout. It was common decades ago, but it's inaccessible and rigid. Tables are for data; for arranging a page, use CSS Flexbox and Grid (Phase 4). If your "table" has no rows and columns of data, it shouldn't be a table.

Recap & quick check

Key takeaways

Use <ul> for unordered items, <ol> for sequences, and <li> for each item; lists can nest.
Description lists (<dl>) pair terms (<dt>) with descriptions (<dd>).
Tables use <tr> rows with <th> header cells and <td> data cells, grouped in <thead>/<tbody>.
colspan and rowspan merge cells; <caption> and scope make tables accessible.
Never use tables for layout — they're for tabular data only. Use CSS for layout.

Quick check

1. Which list should you use for steps that must happen in order?

2. What element is a single item in a list?

3. Which cell type is a table header?

4. How do you make a cell span two columns?

5. When should you use a <table>?

Your content is well-organised now. Next we make it meaningful to browsers and assistive tech with semantic HTML.