Lists and Tables in HTML

Analogy categoryAnalogies

Introduction

Lists and tables are two fundamental ways to organize content. Lists group related items sequentially or without order, while tables present data in rows and columns, ideal for anything genuinely tabular such as schedules, pricing, or comparison data.

🏏

Cricket analogy: A batting order is like an ordered list (numbered 1 through 11), while a full scorecard with runs, balls, and overs per player is like a table — rows and columns needed for genuinely tabular data.

Syntax

html

<ul>
  <li>Unordered item</li>
</ul>

<ol>
  <li>Ordered item</li>
</ol>

<table>
  <thead>
    <tr><th>Header</th></tr>
  </thead>
  <tbody>
    <tr><td>Data</td></tr>
  </tbody>
</table>

Explanation

<ul> creates an unordered (bulleted) list, and <ol> creates an ordered (numbered) list; both contain one or more <li> (list item) elements. Lists can be nested by placing a new <ul> or <ol> inside an <li>. Tables are built with <table> as the container, <thead> for the header row(s), <tbody> for the main data rows, and optionally <tfoot> for summary rows. Each row is a <tr> (table row), header cells use <th>, and data cells use <td>. The scope attribute on <th> (e.g., scope="col" or scope="row") helps assistive technology associate headers with the correct cells.

🏏

Cricket analogy: <ol> numbering a bowling rotation is like the over-by-over bowling order, and nesting a <ul> inside an <li> is like listing a player's individual milestones under their name in the squad list; a match scorecard's <thead> is the header showing 'Batsman/Runs/Balls', <tbody> holds each player's row, and scope="col" is like the umpire confirming which column each stat belongs to.

Tables should be reserved for genuinely tabular data. Using tables purely to control page layout is an outdated, deprecated practice — use CSS Grid or Flexbox for layout instead.

Example

html

<h2>Weekly Schedule</h2>
<table>
  <thead>
    <tr>
      <th scope="col">Day</th>
      <th scope="col">Class</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Monday</td>
      <td>Mathematics</td>
    </tr>
    <tr>
      <td>Tuesday</td>
      <td>Science</td>
    </tr>
  </tbody>
</table>

<h2>Shopping List</h2>
<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Bread</li>
</ul>

Output

The browser renders a two-column table with a bold header row ('Day', 'Class') followed by two data rows for Monday and Tuesday. Below the table, a bulleted list displays three shopping items: Milk, Eggs, and Bread.

🏏

Cricket analogy: The rendered table is like a fixture card with bold headers 'Team/Score' followed by rows for each match day, while the bulleted list below resembles an unordered list of training essentials: bat, gloves, and helmet.

Do not nest a <ul> or <ol> outside of an <li> when creating nested lists — the nested list element must be placed inside the parent <li>, not as a sibling of it.

Key Takeaways

<ul> is unordered, <ol> is ordered; both use <li> for items.
Tables use <table>, <thead>, <tbody>, <tr>, <th>, and <td> to structure rows and columns.
The scope attribute on <th> improves accessibility by linking headers to cells.
Tables should only be used for real tabular data, never for page layout.
Nested lists must place the child list inside a parent <li> element.