HTML — Lesson 4
Lists & Tables
Organizing data with lists and tables.
Lists & Tables
Lists and tables help organize information in readable, structured formats.
Unordered Lists
Use <ul> for bullet-point lists. Each item uses <li>.
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>
Ordered Lists
Use <ol> for numbered lists.
<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>
Nested Lists
Lists can be nested inside other list items to create sub-lists.
<ul>
<li>Fruits
<ul>
<li>Apples</li>
<li>Bananas</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrots</li>
</ul>
</li>
</ul>
Tables
Tables use <table>, <tr> (row), <th> (header cell), and <td> (data cell).
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
<td>London</td>
</tr>
</table>
Table Structure
For more complex tables, use <thead>, <tbody>, and <tfoot> to group rows logically.
<table>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Widget</td>
<td>$10</td>
</tr>
</tbody>
</table>
Tip: Use CSS to style your tables - borders, spacing, alternating row colors - for better readability.
Practice what you learned in the Deoit Editor — a free, browser-based code editor.
Open Editor →