📖
Lists and Tables
Ordered, unordered lists and basic tables
Unordered list <ul>
Displays items with bullets (or icons via CSS). Use when the order of items doesn't matter.
html
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>Ordered list <ol>
Displays items with numbers. When order matters — steps of instructions, rankings.
html
<ol>
<li>Open the terminal</li>
<li>Install Node.js</li>
<li>Run npm install</li>
</ol><li> — list item, always inside <ul> or <ol>.
Tables
A table is built from several tags:
html
<table>
<thead> <!-- table header -->
<tr> <!-- row (table row) -->
<th>Name</th> <!-- column heading -->
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody> <!-- table body -->
<tr>
<td>Alice</td> <!-- cell (table data) -->
<td>25</td>
<td>London</td>
</tr>
<tr>
<td>Bob</td>
<td>22</td>
<td>Manchester</td>
</tr>
</tbody>
</table>Important: tables are for tabular data (like Excel). Do NOT use them for page layout (that's what Flexbox and Grid are for).
html
💬
A navigation menu is a classic example where a list (ul/li) is the perfect choice.