📄 Lesson 5: Lists & Tables
Unordered Lists (<ul>)
Unordered lists display items with bullet points. Use <ul> for the list and <li> for each item.
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
Example Unordered List:
- First item
- Second item
- Third item
Ordered Lists (<ol>)
Ordered lists display items with numbers. Use <ol> for the list and <li> for each item.
<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>
Example Ordered List:
- First step
- Second step
- Third step
List Attributes
You can customize the appearance of lists:
<!-- Start numbering at a specific number -->
<ol start="5">
<li>Item 5</li>
<li>Item 6</li>
</ol>
<!-- Reverse order -->
<ol reversed>
<li>Third item</li>
<li>Second item</li>
<li>First item</li>
</ol>
<!-- Use letters or Roman numerals (CSS needed) -->
<ol type="A">
<li>Item A</li>
<li>Item B</li>
</ol>
Nested Lists
Lists can be nested within other lists:
<ul>
<li>Dogs
<ul>
<li>Labrador</li>
<li>German Shepherd</li>
</ul>
</li>
<li>Cats
<ul>
<li>Siamese</li>
<li>Tabby</li>
</ul>
</li>
</ul>
Description Lists (<dl>)
Description lists are used for terms and definitions:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language - used for structure</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets - used for styling</dd>
</dl>
Example Description List:
- HTML
- HyperText Markup Language - used for structure
- CSS
- Cascading Style Sheets - used for styling
- JavaScript
- Programming language - used for interactivity
Tables
Tables display data in rows and columns. Use <table> to create the table structure.
Basic Table Structure
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alice</td>
<td>28</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>32</td>
<td>Los Angeles</td>
</tr>
</table>
Example Table:
| Name |
Age |
City |
| Alice |
28 |
New York |
| Bob |
32 |
Los Angeles |
| Carol |
25 |
Chicago |
Table Semantic Structure
Use semantic elements for better structure and accessibility:
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
</tr>
</tfoot>
</table>
Table Elements Reference
| Tag |
Purpose |
| <table> |
Container for entire table |
| <tr> |
Table row |
| <th> |
Table header cell |
| <td> |
Table data cell |
| <thead> |
Groups header rows |
| <tbody> |
Groups body rows |
| <tfoot> |
Groups footer rows |
| <caption> |
Table title/description |
Key Takeaways
- Use <ul> for unordered (bulleted) lists
- Use <ol> for ordered (numbered) lists
- Use <li> for list items
- Lists can be nested multiple levels deep
- Use <dl> for definitions or glossaries
- Use <table> for data, not for layout
- Always use <thead>, <tbody>, <tfoot> for semantic structure