Skip to content
Chapter 04 of 07 · 2 lessons · ~15 min

Lists and Tables

Lists organize items and steps; tables organize data. You'll learn both, and when to use which, with real examples like service lists and pricing tables.

YOUR PROGRESS0%
/ Lessons in this chapter
08
HTML Lists: Ordered, Unordered and Nested How to make bullet lists, numbered lists and lists inside lists. Coming soon
09
How to Make a Table in HTML How to build clear tables for prices, schedules and comparisons. Coming soon

Chapter practice task

Build a services list and a pricing table

  1. On index.html, list your services with an unordered list.
  2. Add a numbered list showing the steps of how you work with clients.
  3. Build a price table with <thead>, <tbody> and <th> for three packages.
  4. Add a <caption> that explains what the table shows.
  5. Wrap the table in a box that scrolls sideways so it works on phones.

By the end of this chapter

  • You can choose between <ul>, <ol> and <dl> with confidence
  • You can build accessible tables with headers and captions
  • You know how to merge cells with colspan and rowspan

Quick answers for this chapter

Should I use a list or a table?

A list for single items, a table when each item has several pieces of information to compare.

How do I remove bullet points?

Use CSS: list-style: none and padding-left: 0 on the list.

Are tables bad for SEO?

No. Tables are great for real data. Just don’t use them to lay out a whole page.