H7 - Lists and Tables

01 - When do you use a list?

Use a list when several items belong together: steps, features, menu items or topics.

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Practice

Create a small example with the HTML tags from this section.
Check whether the structure is correct by reading the tags neatly from top to bottom.

02 - Unordered list: ul

An unordered list uses bullets by default.

<ul>
    <li>Milk</li>
    <li>Bread</li>
    <li>Apples</li>
</ul>

Practice

Create a small example with the HTML tags from this section.
Check whether the structure is correct by reading the tags neatly from top to bottom.

03 - Ordered list: ol

An ordered list is useful when the order matters.

<ol>
    <li>Open your editor.</li>
    <li>Create an HTML file.</li>
    <li>Open the file in your browser.</li>
</ol>

Practice

Create a small example with the HTML tags from this section.
Check whether the structure is correct by reading the tags neatly from top to bottom.

04 - Nesting lists

You can place a list inside a list item.

<ul>
    <li>Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
        </ul>
    </li>
</ul>

Practice

Create a small example with the HTML tags from this section.
Check whether the structure is correct by reading the tags neatly from top to bottom.

05 - Lists in navigation

Navigation menus are often lists of links.

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

Practice

Create a small example with the HTML tags from this section.
Check whether the structure is correct by reading the tags neatly from top to bottom.

06 - When do you use a table?

Use a table for data that belongs in rows and columns. Do not use tables just for page layout.

Practice

Create a small example with the HTML tags from this section.
Check whether the structure is correct by reading the tags neatly from top to bottom.

07 - The basics of a table

<table>
    <tr>
        <th>Name</th>
        <th>Score</th>
    </tr>
    <tr>
        <td>Ana</td>
        <td>8</td>
    </tr>
</table>

Practice

Create a small example with the HTML tags from this section.
Check whether the structure is correct by reading the tags neatly from top to bottom.

08 - Caption, thead and tbody

These elements make tables clearer and more structured.

<table>
    <caption>Exam results</caption>
    <thead>
        <tr><th>Name</th><th>Score</th></tr>
    </thead>
    <tbody>
        <tr><td>Ana</td><td>8</td></tr>
    </tbody>
</table>

Practice

Create a small example with the HTML tags from this section.
Check whether the structure is correct by reading the tags neatly from top to bottom.

09 - Making tables readable with CSS

table {
    border-collapse: collapse;
    width: 100%;
}

th,
td {
    border: 1px solid gray;
    padding: 8px;
}

Practice

Create a small example with the HTML tags from this section.
Check whether the structure is correct by reading the tags neatly from top to bottom.

10 - Best practices

Use lists for grouped items.
Use ordered lists when order matters.
Use tables for real data, not for layout.
Add a caption when it helps explain the table.

Practice

Create a small example with the HTML tags from this section.
Check whether the structure is correct by reading the tags neatly from top to bottom.

11 - Assignment

Practice

Create a navigation menu with a list.
Create an ordered list with steps.
Create a small table with at least three rows.
Add simple CSS for table borders and padding.

Quiz