Lists & Tables

HTML & CSS · 7 entries

Unordered List

syntax

<ul>
  <li>Item</li>
</ul>

example

<ul>
  <li>Set up development environment</li>
  <li>Configure database connection</li>
  <li>Deploy to staging server</li>
</ul>

Note Use unordered lists when the sequence of items does not matter. The default bullet style can be changed or removed with CSS list-style-type.

bullet listunordered listullist items

Ordered List

syntax

<ol start="n" type="1|a|A|i|I">
  <li>Item</li>
</ol>

example

<ol>
  <li>Preheat oven to 375 degrees</li>
  <li>Mix dry ingredients in a large bowl</li>
  <li>Add wet ingredients and stir until smooth</li>
  <li>Bake for 25 minutes</li>
</ol>

Note Use start to begin numbering at a specific value, and reversed attribute for countdown order. The type attribute changes markers (1, a, A, i, I).

numbered listordered listolstep listsequence

Nested Lists

syntax

<ul>
  <li>Parent
    <ul>
      <li>Child</li>
    </ul>
  </li>
</ul>

example

<ul>
  <li>Frontend
    <ul>
      <li>HTML &amp; CSS</li>
      <li>JavaScript</li>
      <li>React</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Node.js</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

Note The nested list must be placed inside the parent li element, not after it. You can nest ul inside ol and vice versa.

nested listsub listindented listlist inside list

Definition List

syntax

<dl>
  <dt>Term</dt>
  <dd>Definition</dd>
</dl>

example

<dl>
  <dt>Latency</dt>
  <dd>The time delay between a request and its response.</dd>
  <dt>Throughput</dt>
  <dd>The amount of data processed in a given time period.</dd>
</dl>

Note Ideal for glossaries, metadata key-value pairs, and FAQ sections. A single dt can have multiple dd elements for multiple definitions.

definition listglossarykey value listdl dt ddterm definition

Basic Table

syntax

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

example

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Stock</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Keyboard</td>
      <td>$89</td>
      <td>142</td>
    </tr>
    <tr>
      <td>Mouse</td>
      <td>$45</td>
      <td>308</td>
    </tr>
  </tbody>
</table>

Note Always use thead/tbody for proper structure. Use th for header cells and td for data cells. This helps screen readers navigate the table correctly.

create tablehtml tabledata tabletable rows

Colspan & Rowspan

syntax

<td colspan="n">Spans n columns</td>
<td rowspan="n">Spans n rows</td>

example

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th colspan="2">Contact Info</th>
    </tr>
    <tr>
      <th></th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Acme Corp</td>
      <td>sales@acme.com</td>
      <td>555-0100</td>
    </tr>
    <tr>
      <td>support@acme.com</td>
      <td>555-0101</td>
    </tr>
  </tbody>
</table>

Note When a cell spans multiple columns or rows, omit the corresponding td elements from those positions. Miscounting causes misaligned tables.

merge cellscolspanrowspanspan columnsspan rows

Table Caption & Footer

syntax

<table>
  <caption>Description</caption>
  <thead>...</thead>
  <tbody>...</tbody>
  <tfoot>
    <tr><td>Footer data</td></tr>
  </tfoot>
</table>

example

<table>
  <caption>Monthly Sales Figures (USD)</caption>
  <thead>
    <tr><th>Month</th><th>Revenue</th></tr>
  </thead>
  <tbody>
    <tr><td>January</td><td>$12,400</td></tr>
    <tr><td>February</td><td>$15,800</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td><td>$28,200</td></tr>
  </tfoot>
</table>

Note The caption element provides an accessible name for the table. It must be the first child of the table element. tfoot contains summary rows like totals.

table captiontable footertfoottable titletable summary