HTML Tables & Lists

Difficulty: Beginner

Question

When should you use tables vs other layout methods? What are the different list types?

Answer

Tables are ONLY for tabular data (rows and columns of related data). Never use tables for page layout.

Table structure: table > thead/tbody/tfoot > tr > th/td - th for headers, td for data cells - caption for table title - scope attribute on th for accessibility

List types: - <ul> unordered list (bullets) - <ol> ordered list (numbers) - <dl> description list (term/definition pairs) - Lists can be nested

Code examples

Accessible Data Table

<table>
  <caption>Q4 Sales Report</caption>
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Units</th>
      <th scope="col">Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Widget A</th>
      <td>1,200</td>
      <td>$24,000</td>
    </tr>
    <tr>
      <th scope="row">Widget B</th>
      <td>850</td>
      <td>$17,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td>2,050</td>
      <td>$41,000</td>
    </tr>
  </tfoot>
</table>

scope='col' and scope='row' help screen readers associate data cells with their headers. caption provides a title that screen readers announce.

List Types

<!-- Unordered list -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<!-- Ordered list with start/type -->
<ol start="3" type="a">
  <li>Third item (renders as c.)</li>
  <li>Fourth item (renders as d.)</li>
</ol>

<!-- Description list -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
  <dd>Used for styling web pages</dd>
</dl>

<!-- Nested lists -->
<ul>
  <li>Frontend
    <ul>
      <li>React</li>
      <li>Vue</li>
    </ul>
  </li>
  <li>Backend</li>
</ul>

Use ul for unordered items, ol when order matters, dl for key-value pairs like glossaries or metadata.

Styling Tables with CSS

<style>
table {
  width: 100%;
  border-collapse: collapse;
  /* collapse merges adjacent borders */
}

th, td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

thead th {
  background: #f9fafb;
  font-weight: 600;
}

/* Zebra stripes */
tbody tr:nth-child(even) {
  background: #f9fafb;
}

/* Hover effect */
tbody tr:hover {
  background: #eff6ff;
}

/* Responsive: horizontal scroll */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
</style>

<div class="table-wrapper">
  <table><!-- table content --></table>
</div>

border-collapse: collapse is essential for clean table borders. Wrap tables in a scrollable container for mobile responsiveness.

Key points

• Never use tables for layout - only for actual tabular data
• Use border-collapse: collapse for clean table styling
• Description lists (dl/dt/dd) are underused but great for metadata

Concepts covered

Tables, Lists, Semantic Markup, Accessibility, Data Display