Lists and Tables When You Actually Need Them

Ordered and unordered lists for real lists, and tables for tabular data, not for page layout. After this, you pick the right structure instead of faking it with spaces.

5 min HTML and CSS Web Development Testing and Debugging Beginner

Skip ahead: If you already use ul/ol for lists and table only for tabular data (not page layout), skip to "Tables for data", then continue.

Lists and tables are for meaning. A shopping list is a list. A price matrix is a table. A page layout is neither. CSS handles columns now. Using tables for layout fights responsive design and accessibility.

Unordered and ordered lists

<h2>Packing checklist</h2>
<ul>
  <li>Invoice printout</li>
  <li>Bubble wrap for glass</li>
  <li>Fragile sticker</li>
</ul>

<h2>Opening steps</h2>
<ol>
  <li>Unlock the shutter.</li>
  <li>Count the till float.</li>
  <li>Switch on the card terminal.</li>
</ol>

<ul> when order does not matter.
<ol> when sequence matters.
Nest lists by putting a <ul> or <ol> inside an <li>.

<ul>
  <li>Rice
    <ul>
      <li>Jasmine 5 kg</li>
      <li>Sinando 25 kg</li>
    </ul>
  </li>
  <li>Cooking oil</li>
</ul>

Don't fake lists with - item inside a <p> or with <br> between lines. You lose markers, spacing control and screen-reader list announcements.

Description lists (when names meet values)

<dl>
  <dt>Store code</dt>
  <dd>MNL-04</dd>
  <dt>Manager</dt>
  <dd>A. Santos</dd>
</dl>

Use these for glossaries and labelled values. Don't force them where a simple paragraph is clearer.

Tables for data

<table>
  <caption>Delivery fees inside Metro Manila</caption>
  <thead>
    <tr>
      <th scope="col">Order total</th>
      <th scope="col">Fee</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Under ₱500</td>
      <td>₱80</td>
    </tr>
    <tr>
      <td>₱500 to ₱999</td>
      <td>₱40</td>
    </tr>
    <tr>
      <td>₱1,000 and up</td>
      <td>Free</td>
    </tr>
  </tbody>
</table>

<th scope="col"> (or row) marks headers.
<caption> names the table.
Don't merge cells for decoration. Keep the grid honest.

⚠ Warning: Never use a table to place a sidebar next to content. It will not reflow cleanly on a phone, and screen readers will announce it as a data table.

Common mistakes

Using <div> rows to look like a table without roles or headers. If it is data, use <table>.
Empty list items for spacing. Use CSS margin.
Putting block layout inside <li> without care. Keep list items readable; move heavy layout into components later.

💡 Tip: In DevTools, select a list or table and check the Accessibility tree. You should see List / ListItem or Table / Row / ColumnHeader, not a pile of generic groups.

What happens if you skip this

You will build "lists" that cannot be restyled as a group and "layouts" that collapse when the text grows by one word.

Convert one bullet paste from a chat message into a real <ul>. Then ask: would this be clearer as a table with two columns? Pick one structure and stick to it.

A worked example: stock shortlist

You get this from a chat:

- Jasmine 5kg - 12
- Cooking oil 1L - 4
- Soy sauce 1L - 7

As HTML that a screen reader can announce as a list, and that CSS can style as a grid later:

<ul class="stock">
  <li><span class="name">Jasmine 5 kg</span> <span class="qty">12</span></li>
  <li><span class="name">Cooking oil 1 L</span> <span class="qty">4</span></li>
  <li><span class="name">Soy sauce 1 L</span> <span class="qty">7</span></li>
</ul>

If you need columns with headers ("Product", "On hand"), upgrade to a table instead of forcing spans. The rule is still: lists for lists, tables for tabular data.

Styling without cheating

.stock {
  list-style: disc;
  padding-left: 1.25rem;
}
.stock .qty {
  font-weight: 700;
  color: #034bff;
}

You did not need a table for layout. You needed two spans with classes.

About