Lists and tables

Group related items and present tabular data without using tables for layout.

Beginner 11 min read Lesson 9 of 480 Challenge included

What you will be able to do

Choose between ul, ol and dl
Build a data table with headers
Keep tables accessible

Lists group related content. Use an unordered list when order does not matter, and an ordered list when it does.

lists.htmlHTML

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

<ol>
  <li>Create an account</li>
  <li>Complete every lesson</li>
  <li>Pass the exam</li>
</ol>

Tables are for data

table.htmlHTML

<table>
  <caption>Course completion</caption>
  <thead>
    <tr><th scope="col">Learner</th><th scope="col">Lessons</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Amina</th><td>8 of 8</td></tr>
    <tr><th scope="row">Rafiq</th><td>6 of 8</td></tr>
  </tbody>
</table>

Your turn

A study checklist

Easy

Create an ordered list with three steps: Learn, Practice, Get certified.

HTML · starter

Check your understanding before moving on.

Knowledge checkQuestion 1

Which order should the table sections appear in?

Select an answer to continue

Study tools

Make it yours.

Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.

Sign in to save notes and flashcards.Both are private to your account and stay with your progress.

Finished reading?

Lock in what you just learned.

Mark this lesson complete to save your place and move one step closer to the certificate.

Next: Forms and inputs

Lesson 9 of 480 · 0% of course