40 Mins beginner
5. Lists & Tables
HTML
Lists & Tables
Lists organize information into scannable items. Tables display structured data in rows and columns — like a spreadsheet embedded in a webpage.
📋 Unordered List — Bullet Points
<h3>Shopping Cart</h3>
<ul>
<li>Mechanical Keyboard — $120</li>
<li>USB-C Hub — $45</li>
<li>Monitor Stand — $30</li>
</ul>
🔢 Ordered List — Numbered Steps
<h3>How to Deploy a Website</h3>
<ol>
<li>Write your HTML and CSS files</li>
<li>Create a free account on Netlify</li>
<li>Drag your project folder into Netlify</li>
<li>Your site is live in 10 seconds!</li>
</ol>
📊 HTML Tables
Tables are built from rows (<tr>) and cells. Header cells use <th>, data cells use <td>.
<table border="1" style="border-collapse: collapse; width: 100%;">
<thead>
<tr>
<th style="padding: 8px; background: #f0f0f0;">Name</th>
<th style="padding: 8px; background: #f0f0f0;">Language</th>
<th style="padding: 8px; background: #f0f0f0;">Level</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 8px;">Alice</td>
<td style="padding: 8px;">Python</td>
<td style="padding: 8px;">Senior</td>
</tr>
<tr>
<td style="padding: 8px;">Bob</td>
<td style="padding: 8px;">JavaScript</td>
<td style="padding: 8px;">Junior</td>
</tr>
</tbody>
</table>
Knowledge Check
Ready to test your understanding of 5. Lists & Tables?