Day 4: Lists & Tables

Goal

Learn how to organize information using lists and tables in HTML.

Topics

• Unordered lists: <ul>
• Ordered lists: <ol>
• Nested lists
• Tables: <table>, <tr>, <td>, <th>

Lists

Lists are used to group items. There are two main types:

Unordered List

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Ordered List

<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>

Nested Lists

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
</ul>

Tables

Tables are used to display data in rows and columns.

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>25</td>
    <td>USA</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>30</td>
    <td>Canada</td>
  </tr>
</table>

Practice

Try creating the following:

• A list of your 5 favorite movies (ordered or unordered).
• A table with 3 columns: Name, Age, Country and 3 rows of data.

Example

<h2>My Favorite Movies</h2>
<ol>
  <li>Inception</li>
  <li>The Matrix</li>
  <li>Interstellar</li>
  <li>The Lord of the Rings</li>
  <li>Avatar</li>
</ol>

<h2>Friends Table</h2>
<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>25</td>
    <td>USA</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>30</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Charlie</td>
    <td>28</td>
    <td>UK</td>
  </tr>
</table>