HTML Lists and Tables

HTML

Introduction to HTML Lists and Tables

Websites often need to display information in an organized and easy-to-understand way.
For example, a training website may need to display a list of courses, a set of learning
objectives, a timetable, student records, or a comparison of different services.

HTML provides special elements for organizing this type of information. Two important
structures are lists and tables.

Lists are useful when information belongs to a sequence or collection of related items.
Tables are useful when information needs to be presented in rows and columns so that
relationships between pieces of data are clear.

1. HTML Lists

An HTML list is a collection of related items. HTML provides three major types of lists:

• Unordered lists
• Ordered lists
• Description lists

Lists improve readability and help browsers, search engines, screen readers, and users
understand the structure of related information.

2. Unordered Lists

An unordered list is used when the order of the items does not matter.
It is created using the <ul> element.

Each item inside the list is represented by the <li> element.

Basic Example

<ul>
    <li>Web Development</li>
    <li>Data Analysis</li>
    <li>Cyber Security</li>
    <li>WordPress Development</li>
</ul>

The browser normally displays the list with bullet points.

Important Structure

<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

The <ul> element creates the list, while each
<li> creates an individual list item.

3. Ordered Lists

An ordered list is used when the order of the items is important.
It is created with the <ol> element.

Example

<ol>
    <li>Create an HTML file</li>
    <li>Write the HTML structure</li>
    <li>Add CSS styling</li>
    <li>Test the webpage</li>
</ol>

The browser normally displays the items as 1, 2, 3, and 4.

When Should You Use an Ordered List?

Use an ordered list when changing the order would change the meaning.
For example:

1. Open your code editor.
2. Create a new HTML file.
3. Save the file.
4. Open it in a browser.

These instructions have a meaningful sequence, so an ordered list is appropriate.

4. Ordered List Starting Numbers

The start attribute can be used when an ordered list needs to begin
from a number other than 1.

<ol start="5">
    <li>Fifth item</li>
    <li>Sixth item</li>
    <li>Seventh item</li>
</ol>

This causes the numbering to begin at 5.

HTML also supports different numbering styles through the type
attribute, although CSS is generally preferred when the goal is purely visual styling.

<ol type="A">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

The list can be styled further using CSS rather than depending on HTML presentation
attributes.

5. Nested Lists

A nested list is a list placed inside another list item.
Nested lists are useful when information contains categories and subcategories.

Example

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

    <li>Data Analysis
        <ul>
            <li>Excel</li>
            <li>SQL</li>
            <li>Python</li>
        </ul>
    </li>
</ul>

Notice that the nested <ul> belongs inside the parent
<li>.

Three-Level List

<ul>
    <li>Web Development
        <ul>
            <li>Frontend
                <ul>
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>JavaScript</li>
                </ul>
            </li>

            <li>Backend</li>
        </ul>
    </li>
</ul>

6. Description Lists

A description list is useful when you need to display terms and their descriptions.

It uses three elements:

• <dl> — description list container
• <dt> — description term
• <dd> — description or definition

Example

<dl>
    <dt>HTML</dt>
    <dd>The markup language used to structure webpages.</dd>

    <dt>CSS</dt>
    <dd>The language used to style webpages.</dd>

    <dt>JavaScript</dt>
    <dd>A programming language used to add behavior and interactivity.</dd>
</dl>

Description lists can also be useful for glossaries, frequently asked questions,
metadata, specifications, and terminology.

7. Choosing the Correct List

Use <ul> When:

• The order of the items does not matter.
• You are displaying features.
• You are displaying a collection of courses.
• You are displaying navigation items.

Use <ol> When:

1. The sequence is important.
2. You are displaying instructions.
3. You are displaying rankings.
4. You are displaying steps in a process.

Use <dl> When:

• You have terms and their descriptions.
• You are building a glossary.
• You are displaying question-and-answer style information.

8. Styling HTML Lists with CSS

HTML provides the structure, while CSS can control how the list looks.

ul {
    list-style-type: square;
}

ol {
    list-style-type: upper-roman;
}

li {
    margin-bottom: 8px;
}

Common list-style-type values include:

• disc
• circle
• square
• decimal
• lower-alpha
• upper-alpha
• lower-roman
• upper-roman

9. Introduction to HTML Tables

Tables are designed to display structured data in rows and columns.

For example, a training center might use a table to display:

• Student names
• Courses
• Scores
• Attendance
• Course duration
• Training schedules

Tables should be used for data, not for designing the layout of an entire webpage.
Modern webpage layouts should normally use CSS Grid, Flexbox, or other layout techniques.

10. Basic HTML Table Structure

A basic HTML table uses four important elements:

• <table> — creates the table.
• <tr> — creates a table row.
• <th> — creates a table header cell.
• <td> — creates a normal table data cell.

Basic Example

<table>
    <tr>
        <th>Student</th>
        <th>Course</th>
        <th>Score</th>
    </tr>

    <tr>
        <td>John</td>
        <td>Web Development</td>
        <td>85</td>
    </tr>

    <tr>
        <td>Mary</td>
        <td>Data Analysis</td>
        <td>91</td>
    </tr>
</table>

11. Table Rows

The <tr> element means table row.
Every horizontal row in a table is created using <tr>.

<tr>
    <td>John</td>
    <td>Web Development</td>
</tr>

12. Table Header Cells

The <th> element creates a header cell.
Header cells identify what the data in a column or row represents.

<tr>
    <th>Name</th>
    <th>Course</th>
    <th>Score</th>
</tr>

Using <th> instead of simply making text bold improves the semantic
structure and accessibility of the table.

13. Table Data Cells

The <td> element represents normal data inside a table.

<tr>
    <td>David</td>
    <td>Cyber Security</td>
    <td>88</td>
</tr>

14. Table Head, Body and Footer

Larger tables can be organized using:

• <thead> — table header section.
• <tbody> — main table data.
• <tfoot> — summary or footer information.

Complete Example

<table>

    <thead>
        <tr>
            <th>Student</th>
            <th>Course</th>
            <th>Score</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>John</td>
            <td>Web Development</td>
            <td>85</td>
        </tr>

        <tr>
            <td>Mary</td>
            <td>Data Analysis</td>
            <td>91</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td colspan="2">Average Score</td>
            <td>88</td>
        </tr>
    </tfoot>

</table>

15. Adding a Table Caption

The <caption> element provides a title or description for a table.

<table>
    <caption>Dwallnet Student Performance</caption>

    <tr>
        <th>Student</th>
        <th>Score</th>
    </tr>

    <tr>
        <td>John</td>
        <td>85</td>
    </tr>
</table>

A meaningful caption helps users understand what the table contains before reading
individual cells.

16. Accessible Table Headers

Accessibility is especially important when building tables.
Screen-reader users need to understand which headers belong to which data.

The scope attribute can be used with header cells.

Column Headers

<th scope="col">Student</th>
<th scope="col">Course</th>
<th scope="col">Score</th>

Row Headers

<th scope="row">John</th>

Common values include col and row.
These help communicate the relationship between header cells and their associated data.

17. Colspan

The colspan attribute allows a table cell to span multiple columns.

Example

<table>
    <tr>
        <th colspan="3">Student Information</th>
    </tr>

    <tr>
        <th>Name</th>
        <th>Course</th>
        <th>Score</th>
    </tr>
</table>

In this example, the first header cell occupies three columns.

18. Rowspan

The rowspan attribute allows a cell to span multiple rows.

<table>
    <tr>
        <th rowspan="2">Web Development</th>
        <td>HTML</td>
    </tr>

    <tr>
        <td>CSS</td>
    </tr>
</table>

Here, the Web Development cell occupies two rows.

19. Practical Training Table

Consider a training center that wants to display the courses offered to students.

<table>
    <caption>Dwallnet Technology Training Courses</caption>

    <thead>
        <tr>
            <th scope="col">Course</th>
            <th scope="col">Duration</th>
            <th scope="col">Level</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Web Development</td>
            <td>6 Months</td>
            <td>Beginner - Advanced</td>
        </tr>

        <tr>
            <td>Data Analysis</td>
            <td>3 Months</td>
            <td>Beginner</td>
        </tr>

        <tr>
            <td>Cyber Security</td>
            <td>6 Months</td>
            <td>Beginner - Intermediate</td>
        </tr>
    </tbody>
</table>

20. Styling Tables with CSS

HTML creates the structure of a table while CSS controls its appearance.

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

th,
td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}

th {
    font-weight: 700;
}

caption {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 10px;
}

The border-collapse property makes adjacent table borders appear as
a single border.

21. Responsive Tables

Tables can become difficult to read on small screens when they contain many columns.
A common solution is to place the table inside a horizontally scrollable container.

HTML

<div class="table-wrapper">
    <table>
        <thead>
            <tr>
                <th>Student</th>
                <th>Course</th>
                <th>Score</th>
                <th>Attendance</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>John</td>
                <td>Web Development</td>
                <td>85</td>
                <td>94%</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

.table-wrapper {
    overflow-x: auto;
}

.table-wrapper table {
    min-width: 600px;
}

This allows users on small screens to scroll horizontally instead of forcing the
entire webpage to become wider than the device.

22. Never Use Tables for Page Layout

Older websites sometimes used tables to create page layouts. This is no longer
considered a good modern development practice.

Tables should be used for structured data, such as:

• Scores
• Prices
• Schedules
• Student records
• Product comparisons
• Financial data

For page layouts, use modern CSS tools such as:

• Flexbox
• CSS Grid
• Positioning when appropriate

23. Lists Inside Tables

A table cell can contain other HTML elements, including lists.

<table>
    <tr>
        <th>Course</th>
        <th>Topics</th>
    </tr>

    <tr>
        <td>Web Development</td>

        <td>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
        </td>
    </tr>
</table>

24. Common HTML List Mistakes

Mistake 1: Forgetting the <li> Element

Incorrect:

<ul>
    Web Development
    Data Analysis
</ul>

Correct:

<ul>
    <li>Web Development</li>
    <li>Data Analysis</li>
</ul>

Mistake 2: Incorrect Nested List Structure

A nested list should normally be placed inside the appropriate parent list item.

Correct:

<ul>
    <li>Web Development
        <ul>
            <li>HTML</li>
            <li>CSS</li>
        </ul>
    </li>
</ul>

25. Common HTML Table Mistakes

Mistake 1: Forgetting Table Rows

Incorrect:

<table>
    <th>Name</th>
    <td>John</td>
</table>

Table cells should be placed inside table rows.

Correct:

<table>
    <tr>
        <th>Name</th>
        <td>John</td>
    </tr>
</table>

Mistake 2: Using <td> for Every Header

If a cell identifies the data in a row or column, use <th>
instead of merely making a <td> bold with CSS.

Mistake 3: Using Tables for Website Layout

Do not use tables as a replacement for CSS layout systems.

Mistake 4: Creating Very Wide Tables Without Mobile Support

Consider responsive behavior when designing tables that contain many columns.

26. Accessibility Best Practices for Tables

• Use <caption> when a table needs a clear title.
• Use <th> for header cells.
• Use scope="col" for column headers.
• Use scope="row" for row headers.
• Keep table headings clear and meaningful.
• Do not merge cells unnecessarily.
• Make sure the table remains understandable when read sequentially.
• Ensure sufficient visual contrast through CSS.
• Test important tables with keyboard navigation and accessibility tools.

27. Practical Exercise

Create a webpage titled Dwallnet Student Training Report.

Your page should contain:

1. A heading containing the title.
2. An unordered list containing at least five courses.
3. An ordered list containing five steps for registering for a course.
4. A nested list containing course categories and their topics.
5. A description list defining HTML, CSS, and JavaScript.
6. A table containing at least five students.
7. Columns for student name, course, score, and attendance.
8. A table caption.
9. Proper table headers.
10. A responsive table wrapper.

Challenge Requirements

• Use semantic HTML.
• Use <thead> and <tbody>.
• Use scope attributes on table headers.
• Add CSS styling.
• Make the table mobile-friendly.

28. Code Challenge

The following code contains several mistakes. Identify and correct them.

<h2>Dwallnet Courses</h2>

<ul>
    Web Development
    <li>Data Analysis</li>
    Cyber Security
</ul>

<table>

    <th>Student</th>
    <th>Course</th>
    <th>Score</th>

    <tr>
        <td>John</td>
        <td>Web Development</td>
        <td>85</td>
    </tr>

    <tr>
        <td>Mary</td>
        <td>Data Analysis</td>
    </tr>

</table>

What Is Wrong?

• Some list items are missing <li> elements.
• The table headers are not inside a table row.
• The table does not use a proper header section.
• The second student’s score is missing.
• The table has no caption.
• The headers do not use accessibility information.

One Correct Solution

<h2>Dwallnet Courses</h2>

<ul>
    <li>Web Development</li>
    <li>Data Analysis</li>
    <li>Cyber Security</li>
</ul>

<table>

    <caption>Student Course Results</caption>

    <thead>
        <tr>
            <th scope="col">Student</th>
            <th scope="col">Course</th>
            <th scope="col">Score</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>John</td>
            <td>Web Development</td>
            <td>85</td>
        </tr>

        <tr>
            <td>Mary</td>
            <td>Data Analysis</td>
            <td>91</td>
        </tr>
    </tbody>

</table>

29. Lesson Summary

HTML lists and tables are important tools for organizing information.
Unordered lists are used when order does not matter, while ordered lists are used
when sequence is meaningful.

Description lists are useful for terms and their definitions. Nested lists allow
developers to represent hierarchical information.

Tables are designed for structured data arranged in rows and columns. A well-structured
table uses elements such as <caption>, <thead>,
<tbody>, <tr>, <th>, and
<td>.

Accessibility should always be considered when creating tables. Attributes such as
scope help users of assistive technologies understand relationships
between headers and data.

Finally, CSS should be used to style lists and tables, while modern layout systems
such as Flexbox and CSS Grid should be used for webpage layout rather than tables.

Key Principle

Use HTML to describe the meaning and structure of information, and use CSS to
control how that information looks.