Chapter 8

Lists and Tables

Organizing data with ordered lists, unordered lists, and tables

Introduction

Lists and table help organize information in a structured, readable format. HTML provides three types of lists: unordered (ul with bullet points), ordered (ol with numbers), and Description List (dl with terms and definitions). table organize data into rows and columns.

Lists are perfect for step-by-step instructions, navigation menus, feature highlights, and any content that benefits from enumeration. table are ideal for comparing data, schedules, pricing, and statistical information.

In this chapter, you will learn how to create ordered and unordered lists, build table with headers and captions, and nest lists for complex hierarchies.

How It Works

The ul element creates a bulleted list, ol creates a numbered list, and each item within is wrapped in li (list item) tags. table are built with table, tr (table row), th (table header), and td (table data) elements. Lists can be nested by placing a new ul or ol inside an li.

Everyday Object Analogy

Think of an unordered list as a shopping list — each item is a bullet point. An ordered list is like a recipe with numbered steps. A table is like a spreadsheet with rows and columns, where th marks the column headers and td holds the actual data in each cell.

List Types

Unordered (ul)

Bulleted lists for items without a specific order. Each item uses the li tag. Customize bullet styles with CSS.

Ordered (ol)

Numbered lists for sequential steps or ranked items. Supports roman numerals, letters, and custom starting values.

Description (dl)

A list of term-description pairs using dt (definition term) and dd (definition description) tags.

Table Structure

table Elements

table wraps the entire structure, tr defines each row, th marks header cells, and td contains data cells. caption adds a title.

Column Spanning

The colspan attribute makes a cell span multiple columns, and rowspan spans multiple rows. Useful for complex layouts.

Deeper Dive

Accessibility is important for lists and table. Screen readers announce the number of items in a list and allow users to navigate between them. For table, the th element with scope="col" or scope="row" helps assistive technology associate headers with data cells correctly.

Nested List allow you to create multi-level outlines (like a table of contents with sub-sections). Simply place a new ul or ol inside an li element, and the browser will indent and style it appropriately.

Key Insight

Use ul for navigation menus and feature lists where order does not matter. Use ol for instructions, rankings, and recipes. table should only be used for tabular data — never for page layout.

Advanced

HTML table features include thead, tbody, and tfoot for grouping rows logically. The colgroup and col elements allow styling entire columns at once. For responsive table, CSS techniques like horizontal scrolling on small screens or converting rows to cards are commonly used.

The ol element supports the type attribute (1, A, a, I, i for different numbering styles) and start attribute for custom starting numbers. CSS list-style-type property provides even more control over bullet and numbering appearance.

Vocabulary Table

Term	Definition
ul	Unordered List — creates a bulleted list of items.
ol	Ordered List — creates a numbered list of items.
li	List Item — represents a single item within a list.
table	An HTML element used to display data in rows and columns.
tr	Table Row — defines a horizontal row of cells in a table.
th	Table Header — defines a header cell in a table, typically bold and centered.
td	Table Data — defines a standard data cell in a table.
colspan	An attribute that makes a table cell span across multiple columns.
Description List	A list of term-description pairs using dl, dt, and dd tags.
Nested List	A list placed inside another list item to create hierarchical structure.

Fun Facts

The ul and ol tags have existed since the very first version of HTML in 1991.

Ordered lists can start counting from any number using the start attribute.

table were originally used for webpage layout before CSS became widespread, a practice now strongly discouraged.

The caption element on table is read aloud by screen readers, making it a valuable accessibility feature.

HTML also supports the dir attribute on lists to change the numbering direction for languages that read right-to-left.

Interactive Diagram

Launch the interactive diagram to see this in action.

Open Interactive Diagram

The interactive diagram for this chapter demonstrates Lists and Tables. It shows ordered lists (ol), unordered lists (ul), and table structures (table, tr, td).

What to explore:

toggle between list types; add items to see them format; create a table and populate cells
lists organize items with bullet points or numbers, while tables display data in rows and columns for easy comparison

Chapter Navigation

← Previous: Chapter 7 ← Back to Module Overview Next: Chapter 9 — Introduction to CSS