← Back to Curriculum

Lists and Tables

📚 Lesson 6 of 20 ⏱️ 30 min

Lists and Tables

30 min

Lists and tables are fundamental HTML structures for organizing and presenting data. Lists provide a way to group related items, while tables organize data into rows and columns. Both structures are essential for creating well-organized, accessible web content that conveys relationships and hierarchy effectively.

HTML supports three types of lists: ordered lists (<ol>), unordered lists (<ul>), and description lists (<dl>). Ordered lists display items with numbers or letters, indicating sequence or priority. Unordered lists display items with bullets or other markers, indicating a collection without specific order. Description lists pair terms with their descriptions, useful for glossaries, metadata, or key-value pairs. The <li> tag defines each list item, and lists can be nested to create hierarchical structures.

Tables are defined with the <table> tag and organize data into rows and columns. The <tr> tag creates table rows, <td> creates data cells, and <th> creates header cells. Proper table structure includes semantic elements: <thead> for header rows, <tbody> for body rows, <tfoot> for footer rows, and <caption> for table descriptions. This semantic structure improves accessibility and helps screen readers understand table organization.

Table accessibility is crucial. Use <th> elements with proper scope attributes (scope="col" or scope="row") to associate headers with their data cells. The <caption> element provides a title or description for the table, helping all users understand the table's purpose. For complex tables, use the headers attribute to explicitly associate data cells with their headers. Avoid using tables for layout—they should only be used for tabular data.

Nested lists enable you to create hierarchical structures, such as outlines, menus, or multi-level navigation. You can nest any type of list inside another, creating complex but well-structured content. However, avoid excessive nesting as it can make content harder to understand and navigate. Lists can also contain other HTML elements, not just text, enabling rich content within list items.

Best practices include using semantic table elements (<thead>, <tbody>, <tfoot>), providing table captions for context, using proper header cells with scope attributes, avoiding tables for layout purposes, and keeping list nesting to reasonable levels. Both lists and tables should be keyboard accessible and work well with screen readers when properly structured.

Key Concepts

  • HTML supports ordered lists (<ol>), unordered lists (<ul>), and description lists (<dl>).
  • Tables organize data into rows (<tr>) and cells (<td> for data, <th> for headers).
  • Semantic table elements (<thead>, <tbody>, <tfoot>) improve structure and accessibility.
  • Table headers should use scope attributes to associate with data cells.
  • Lists can be nested to create hierarchical structures.

Learning Objectives

Master

  • Creating ordered, unordered, and description lists
  • Building accessible tables with proper semantic structure
  • Using table headers and captions for accessibility
  • Nesting lists to create hierarchical content structures

Develop

  • Data organization and presentation thinking
  • Understanding accessibility in table and list design
  • Creating well-structured, semantic content

Tips

  • Use <th> with scope attributes for accessible table headers.
  • Always include a <caption> for tables to provide context.
  • Nest lists when you need hierarchical structures.
  • Use description lists (<dl>) for key-value pairs and metadata.

Common Pitfalls

  • Using tables for layout instead of CSS, breaking accessibility.
  • Forgetting scope attributes on table headers, making tables less accessible.
  • Creating overly nested lists that are hard to navigate.
  • Not providing table captions, leaving users without context.

Summary

  • Lists organize related items; tables organize data into rows and columns.
  • Use semantic table elements (<thead>, <tbody>, <tfoot>) for structure.
  • Table headers with scope attributes improve accessibility.
  • Lists can be nested to create hierarchical content.
  • Proper structure improves accessibility and user experience.

Exercise

Create an unordered list of your favorite fruits.

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

Exercise Tips

  • Try creating an ordered list with nested items.
  • Build a table with headers, body, and caption.
  • Use description lists for key-value pairs.
  • Test your tables with a screen reader to verify accessibility.

Code Editor

Output