Mozilla Design System

Tables

Tables have no base styling (apart from the browser defaults). Use the .data-table class to display tabular data with a bit more polish.

Table caption
	Column	Column	Column
Row	Cell	Cell	Cell
Row	Cell	Cell	Cell

HTML


<table class="data-table">
  <caption>Table caption</caption>
  <thead>
    <tr>
      <td></td>
      <th scope="col">Column</th>
      <th scope="col">Column</th>
      <th scope="col">Column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Row</th>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <th scope="row">Row</th>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

Unordered lists

We most frequently use lists for semantic structure and don't actually want to display them as lists. It's simpler to reset lists globally and only display them as lists in text when needed with the .prose class.

list item
list item
- nested list

HTML


<ul class="prose">
  <li>list item</li>
  <li>list item
    <ul class="prose">
      <li>nested list</li>
    </ul>
  </li>
</ul>

Ordered lists

We most frequently use lists for semantic structure and don't actually want to display them as lists. It's simpler to reset lists globally and only display them as lists in text when needed with the .prose class.

list item
list item
1. nested list

HTML


<ol class="prose">
  <li>list item</li>
  <li>list item
    <ol class="prose">
      <li>nested list</li>
    </ol>
  </li>
</ol>

Definition lists

Term: Description

HTML


<dl>
  <dt>Term</dt>
  <dd>Description</dd>
</dl>

Tables and Lists

Tables

Unordered lists

Ordered lists

Definition lists