HTML Lists and Tables

By /

Webpages often contain information that needs to be organized clearly.

For example, you may want to show:

  • A list of your hobbies
  • Steps to complete a task
  • Student marks
  • Product prices

HTML provides lists and tables to help us organize this information. Let’s understand HTML Lists and Tables more clearly.

HTML Lists

A list is used when we want to show several related items. HTML has two main types of lists:

  • Unordered list – shows items with bullet points.
  • Ordered list – shows items with numbers.

Let’s start with an unordered list.

– Unordered List

An unordered list uses the <ul> tag. Each item inside the list uses the <li> tag. Here is a complete example:

<!DOCTYPE html>
<html>
<head>
    <title>Unordered List</title>
</head>
<body>

    <h1>My Hobbies</h1>

    <ul>
        <li>Playing Cricket</li>
        <li>Listening to Music</li>
        <li>Watching Movies</li>
    </ul>

</body>
</html>

Output

My Hobbies
• Playing Cricket
• Listening to Music
• Watching Movies

Here:

  • <ul> – Creates an unordered list.
  • <li> – Creates a list item.
  • </ul> – Ends the list.

The browser automatically adds bullet points.

– Ordered List

Sometimes the order of the items is important. For this, we use the <ol> tag. For example, suppose we want to show steps for making tea.

<!DOCTYPE html>
<html>
<head>
    <title>Ordered List</title>
</head>
<body>

    <h1>How to Make Tea</h1>

    <ol>
        <li>Boil some water.</li>
        <li>Add tea leaves.</li>
        <li>Add milk and sugar.</li>
        <li>Serve the tea.</li>
    </ol>

</body>
</html>

Output

How to Make Tea
1. Boil some water.
2. Add tea leaves.
3. Add milk and sugar.
4. Serve the tea.

Here:

  • <ol> – Creates an ordered list.
  • <li> – Creates a list item.

The browser automatically adds numbers.

Unordered List vs Ordered List

The main difference is simple:

<ul> → Bullet points
<ol> → Numbers

Use <ul> when the order does not matter.

For example:

• Cricket
• Football
• Music

Use <ol> when the order matters.

For example:

1. Open the file.
2. Write the code.
3. Save the file.
4. Run the program.

Nested Lists

You can also put one list inside another list. This is called a nested list. For example, we can create a list of subjects and put topics under each subject.

<!DOCTYPE html>
<html>
<head>
    <title>Nested List</title>
</head>
<body>

    <h1>My Subjects</h1>

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

        <li>
            Mathematics
            <ul>
                <li>Algebra</li>
                <li>Geometry</li>
            </ul>
        </li>
    </ul>

</body>
</html>

Output

My Subjects
• Computer Science
ㅤㅤㅤ○ HTML
ㅤㅤㅤ○ CSS
ㅤㅤㅤ○ JavaScript
• Mathematics
ㅤㅤㅤ○ Algebra
ㅤㅤㅤ○ Geometry

The second list is placed inside the first list item.

HTML Tables

A table is useful when information needs to be shown in rows and columns. For example, you could use a table to show student marks.

A basic HTML table uses these tags:

  • <table> – Creates the table.
  • <tr> – Creates a table row.
  • <th> – Creates a heading cell.
  • <td> – Creates a normal data cell.

Let’s create a simple table.

<!DOCTYPE html>
<html>
<head>
    <title>HTML Table</title>
</head>
<body>

    <h1>Student Marks</h1>

    <table border="1">

        <tr>
            <th>Name</th>
            <th>Marks</th>
        </tr>

        <tr>
            <td>Rahul</td>
            <td>85</td>
        </tr>

        <tr>
            <td>Anjali</td>
            <td>92</td>
        </tr>

    </table>

</body>
</html>

Output

Student Marks

NameMarks
Rahul85
Anjali92

Here:

  • <table> – Starts the table.
  • <tr> – Creates a row.
  • <th> – Creates a heading cell.
  • <td> – Creates a normal cell.
  • border="1" – Adds a simple border around the table.

We are using border="1" here so you can clearly see the rows and columns. Later, CSS is normally used to style tables.

Adding More Columns

You can create as many columns as you need. For example:

<!DOCTYPE html>
<html>
<head>
    <title>Student Details</title>
</head>
<body>

    <h1>Student Details</h1>

    <table border="1">

        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Marks</th>
        </tr>

        <tr>
            <td>Rahul</td>
            <td>14</td>
            <td>85</td>
        </tr>

        <tr>
            <td>Anjali</td>
            <td>15</td>
            <td>92</td>
        </tr>

    </table>

</body>
</html>

Output

Student Details

NameAgeMarks
Rahul1485
Anjali1592

The first row contains the headings and the next rows contain the actual information.

Colspan

Sometimes you may want one cell to cover more than one column. For this, HTML provides the colspan attribute.

For example:

<!DOCTYPE html>
<html>
<head>
    <title>Colspan Example</title>
</head>
<body>

    <h1>Class Timetable</h1>

    <table border="1">

        <tr>
            <th colspan="2">Monday</th>
        </tr>

        <tr>
            <td>HTML</td>
            <td>CSS</td>
        </tr>

    </table>

</body>
</html>

Output

Class Timetable

Monday
HTML

The colspan="2" makes the Monday heading cover two columns. You don’t need to use colspan in every table. Use it only when you need to join columns.

Rowspan

You can also make one cell cover more than one row using rowspan.

<!DOCTYPE html>
<html>
<head>
    <title>Rowspan Example</title>
</head>
<body>

    <h1>Class Timetable</h1>

    <table border="1">

        <tr>
            <th rowspan="2">Monday</th>
            <td>HTML</td>
        </tr>

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

    </table>

</body>
</html>

Output

Class Timetable

MondayHTML
CSS

Here, rowspan="2" makes the Monday cell cover two rows.

Quick Recap

  • Two types of list : Unordered list and Ordered list
  • <li> creates a list item.
  • <table> creates a table.
  • <tr> creates a table row and <th> creates a table heading cell.
  • <td> creates a normal table cell.
  • colspan for columns and rowspan for rows.

Frequently Asked Questions (FAQs)

Q1. What are HTML Lists and Tables used for?

HTML Lists and Tables help organize information on a webpage. Lists are useful for related items or steps, while tables display information in rows and columns.

Q2. What is the difference between <ul> and <ol> in HTML?

The <ul> tag creates an unordered list with bullet points, while the <ol> tag creates an ordered list with numbers. Use <ul> when order is not important and <ol> when the order matters.

Q3. What are the main HTML list tags?

The main HTML list tags are <ul> for unordered lists, <ol> for ordered lists, and <li> for individual list items.

Q4. How do you create a table in HTML?

To create an HTML table, use <table> for the table, <tr> for rows, <th> for heading cells, and <td> for normal data cells.

Q5. What is a nested list in HTML?

A nested list is a list placed inside another list item. HTML nested lists are useful when you want to organize information into main items and sub-items.

Q6. What are colspan and rowspan in HTML tables?

In HTML tables, colspan allows one cell to cover multiple columns, while rowspan allows one cell to cover multiple rows.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top