Skip to content

Beginner · HTML basics · topic 9 of 64 · 30 min

Lists and tables

Explanation

Lists group related items: ul when the order does not matter, ol when it does, and dl for terms with their meanings. Tables are only for data in rows and columns, such as a train timetable or a marks sheet. A caption and header cells make a table easy to read for everyone.

Lists

A <ul> is an unordered list: the order does not matter, so it shows bullets. An <ol> is an ordered list: the order matters, so it shows numbers. Each item is an <li> (list item). Only <li> elements may sit directly inside <ul> or <ol>.

html
<h2>Shopping list</h2>
<ul>
  <li>Atta, 5 kg</li>
  <li>Toor dal, 1 kg</li>
  <li>Spices
    <ul>
      <li>Haldi</li>
      <li>Jeera</li>
    </ul>
  </li>
</ul>

<h2>How to make Maggi</h2>
<ol>
  <li>Boil 1.5 cups of water.</li>
  <li>Add the noodles and the masala.</li>
  <li>Cook for 2 minutes and serve.</li>
</ol>
A ul with a nested list, and an ol of steps
Think of it like this: A ul is your kirana shopping list: atta, dal, oil, in any order. An ol is a recipe: you must boil the water before you add the noodles. A dl is a dictionary: a word, then its meaning.

To nest a list, put the new <ul> or <ol> inside an <li>, never directly inside the outer list. Menus, site maps and contents pages are often nested lists.

Description lists

html
<dl>
  <dt>PNR</dt>
  <dd>Passenger Name Record: the number of your train booking.</dd>
  <dt>RAC</dt>
  <dd>Reservation Against Cancellation: you can travel and may get a berth.</dd>
</dl>
dt is the term, dd is its description

A <dl> (description list) holds pairs: a <dt> (term) and one or more <dd> (description). It suits glossaries, product details such as "Weight: 1 kg", and short question and answer lists.

Tables are for tabular data

Tabular data means information where both the rows and the columns have meaning: a timetable, a marks sheet, a price list. Never use a table to arrange the layout of a page. Layout is the job of CSS (flexbox and grid), which you will learn soon.

TagJob
<table>Holds the whole table
<caption>The title of the table, shown above it
<thead> / <tbody>The header rows and the body rows
<tr>One table row
<th>A header cell, for a column or a row
<td>A normal data cell
html
<table>
  <caption>Trains from Pune to Mumbai</caption>
  <thead>
    <tr>
      <th scope="col">Train</th>
      <th scope="col">Departs</th>
      <th scope="col">Arrives</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Deccan Queen</th>
      <td>07:15</td>
      <td>10:25</td>
    </tr>
    <tr>
      <th scope="row">Pragati Express</th>
      <td>07:50</td>
      <td>11:25</td>
    </tr>
  </tbody>
</table>
A small timetable with column and row headers

The scope attribute says what a header cell labels: scope="col" for a column and scope="row" for a row. A screen reader can then say "Departs, 07:15" as the user moves through the cells, instead of just "07:15".

colspan="2" makes one cell stretch across two columns, and rowspan="2" makes it stretch down two rows. After merging, every row must still add up to the same number of columns.

html
<table>
  <caption>Marks sheet: Class 10, Term 1</caption>
  <thead>
    <tr><th scope="col">Subject</th><th scope="col">Theory</th><th scope="col">Practical</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Science</th><td>62</td><td>28</td></tr>
    <tr><th scope="row">Maths</th><td>78</td><td>18</td></tr>
    <tr><th scope="row" colspan="2">Total</th><td>186</td></tr>
  </tbody>
</table>
The Total header spans two columns
Careful: Wide tables do not fit on a phone. Wrap the table in a <div> and give that div the CSS overflow-x: auto, so the table scrolls sideways instead of breaking the page.
Tip: Write a short caption for every table. It is the title that tells people, and screen readers, what the numbers are about.

Watch the lesson

Lists and tables · 1/6

Lists and tables

Lists and tables organise information so people can scan it quickly.

Prefer a video by a teacher? Find free videos on “html lists and tables tutorial for beginners” on YouTube ↗

In real life: A railway timetable and a results page

A railway enquiry page shows trains in a table with a caption such as "Trains from Pune to Mumbai", column headers (Train, Departs, Arrives) with scope="col" and the train names as row headers. A school results page uses a table for the marks sheet, an ol for the steps to apply for re-checking, and a dl to explain short forms like "AB: absent" and "CR: compartment".

Practice (0/3 done)

Task 1 · Code · HTML

Turn the plain lines into real lists. The shopping items (any order) go in a <ul> with one <li> each. The recipe steps (order matters) go in an <ol> with one <li> each.

Task 2 · Code · HTML

Build a train timetable as a real table. Add a <caption>, a <thead> with at least 3 column headings (<th scope="col">), and a <tbody> with at least 3 trains. Every row needs one cell for each column.

Task 3 · Code · HTML

Make a small glossary of railway words with a description list: a <dl> with at least 3 terms (<dt>) and a description (<dd>) for each one. Ideas: PNR, RAC, Tatkal, Berth.

Quick quiz

Question 1

1.Which list fits the steps to fill an online exam form?

Question 2

2.Where does a nested list go?

Question 3

3.When should you use a table?

Question 4

4.What does scope="col" on a <th> mean?

Question 5

5.Which element gives a table its title?

Read more (free)

Pass the quiz (60% or more) or mark this topic as done when you are ready.

Your progress is saved on this device only.

Next: Forms and inputs →

← Previous: Images, video and audio