HTML Lists and Tables: ul, ol, dl, and table Explained

Lists and tables are two of the most practical HTML structures. Lists organise related items — navigation menus, feature bullet points, step-by-step instructions. Tables present tabular data — comparisons, schedules, structured records.

Both are straightforward to write but have more depth than most beginners realise. This lesson covers all three list types and the complete table element set.

Unordered Lists: <ul>

An unordered list displays items with bullet points. Use it when the order doesn't matter:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Every item in a list is wrapped in an <li> (list item) element. The browser adds bullets and indentation by default — you can customise these with CSS. Common uses include navigation menus, feature lists on a landing page, tags or categories, and ingredient lists in a recipe.

Ordered Lists: <ol>

An ordered list displays items with numbers. Use it when order matters:

<ol>
  <li>Install a code editor</li>
  <li>Create an index.html file</li>
  <li>Write your HTML structure</li>
  <li>Open the file in a browser</li>
</ol>

<ol> Attributes

Common uses include step-by-step tutorials, ranked lists, recipe method steps, and legal numbered clauses.

Nested Lists

Lists can be nested — place a <ul> or <ol> inside an <li> element:

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Node.js</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

Browsers automatically indent nested lists and change the bullet style. Avoid nesting more than two or three levels deep — it becomes difficult to read.

Description Lists: <dl>

A description list pairs terms with their definitions. It uses three elements: <dl> (the list container), <dt> (a term), and <dd> (the description):

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language. Defines the structure of web content.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets. Controls the visual presentation of HTML elements.</dd>

  <dt>JavaScript</dt>
  <dd>A programming language that adds interactivity to web pages.</dd>
</dl>

One term can have multiple <dd> entries. Description lists are great for glossaries, metadata displays, and FAQ-style content.

HTML Tables

Tables are for tabular data — data that has a natural row-and-column structure. The classic example is a comparison table, a schedule, or a data report.

Important: Don't use tables for page layout. That was a 1990s practice. Modern layout uses CSS Flexbox and Grid.

Basic Table Structure

<table>
  <thead>
    <tr>
      <th>Language</th>
      <th>Type</th>
      <th>Year Created</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>Markup</td>
      <td>1993</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>Stylesheet</td>
      <td>1996</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>Programming</td>
      <td>1995</td>
    </tr>
  </tbody>
</table>

The Table Elements

colspan and rowspan

colspan — Span Multiple Columns

<tr>
  <th colspan="3">Q1 Sales Report</th>
</tr>

The header spans all three columns.

rowspan — Span Multiple Rows

<tr>
  <td rowspan="2">North Region</td>
  <td>January</td>
  <td>$4,200</td>
</tr>
<tr>
  <td>February</td>
  <td>$3,800</td>
</tr>

"North Region" spans two rows, acting as a row group label.

Table Accessibility

Use <th> with scope

<thead>
  <tr>
    <th scope="col">Product</th>
    <th scope="col">Price</th>
    <th scope="col">Stock</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">Laptop</th>
    <td>$999</td>
    <td>In stock</td>
  </tr>
</tbody>

scope="col" tells screen readers the <th> is a column header. scope="row" marks a row header.

Add a <caption>

<table>
  <caption>Monthly Sales by Region — Q1 2026</caption>
  <!-- ... -->
</table>

<caption> provides a title for the table. Screen readers announce it before the table content. It's the table equivalent of an image's alt attribute.

Previous: Lesson 3 — HTML Links & Images | Next: Lesson 5 — HTML Forms & Inputs

Part of the HTML & CSS Fundamentals course.

External references:

• WebAIM — Creating Accessible Tables guide