HTML Lists & Tables

Learn How to Create Lists and Tables Using HTML

In this class, students will learn how to display information neatly on a webpage using HTML lists and tables.

Class Objective

• Create ordered and unordered lists
• Build tables using rows and columns
• Display structured data neatly on a webpage

Introduction to HTML Lists

HTML lists are used to display items in an ordered or unordered way.

Types of HTML Lists

Unordered List

Displays items with bullets.

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

Ordered List

Displays items with numbers.

<ol>
    <li>Wake up</li>
    <li>Study</li>
    <li>Practice</li>
</ol>

List Item Tag

The <li> tag is used inside both <ul> and <ol>.

Practical Task: Lists

• Create a list of your hobbies using <ul>
• Create a daily routine using <ol>

Introduction to HTML Tables

Tables are used to display data in rows and columns.

Table Structure and Tags

• <table> – table container
• <tr> – table row
• <th> – table heading
• <td> – table data

Basic Table Example

<table border="1">
    <tr>
        <th>Name</th>
        <th>Subject</th>
        <th>Marks</th>
    </tr>
    <tr>
        <td>Rahul</td>
        <td>Math</td>
        <td>85</td>
    </tr>
    <tr>
        <td>Anu</td>
        <td>Science</td>
        <td>90</td>
    </tr>
</table>

Practical Task: Tables

• Create a student marks table
• Create a simple timetable using a table

Assignment

• Create a webpage with one unordered list
• Create one ordered list
• Create one table with at least 3 rows and 3 columns