HTML Basics for Beginners Lists and Tables (HTML Tutorial #2)

HTML Basics for Beginners: Lists and Tables (HTML Tutorial #2)

Welcome back to the HTML Basics for Beginners series! 🎉 In Tutorial #1, you created your very first webpage with headings, paragraphs, and images. Today’s lesson is your HTML lists and tables guide: how to show information clearly with bulleted/numbered lists and data tables.

In this tutorial, we’ll go further and learn how to:
✅ Make lists (ordered, unordered and description).
✅ Create tables to display data neatly.
✅ Build a small mini project: “My Weekly Schedule.”

Let’s dive in! 🚀

Why Learn Lists and Tables?

Lists and tables are everywhere on the web:

  • Online menus use lists for categories and food items.
  • Blog posts (like this one!) often use bullet points or numbered steps.
  • School report cards and schedules are shown as tables.
  • Even product specs on e-commerce sites are built using tables.

So, learning this is a key step in mastering HTML basics for beginners.

Step 1: Unordered & Ordered Lists

HTML gives us two main types of lists:

  • Ordered list (<ol>) → numbered list.
  • Unordered list (<ul>) → bullet points.

Each item in a list goes inside an <li> (list item) tag.

<h2>My Shopping List</h2>
<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Eggs</li>
</ul>

<h2>Steps to Make Tea</h2>
<ol>
  <li>Boil water</li>
  <li>Add tea leaves</li>
  <li>Pour into a cup</li>
</ol>

Explanation

  • <h2>My Shopping List</h2> — a section title for your list.
  • <ul> — unordered list: the browser shows bullet points by default.
  • <li>Milk</li> — list item: each <li> becomes one bullet.
  • </ul> — closes the unordered list.
  • <h2>Steps to Make Tea</h2> — title for your steps.
  • <ol> — ordered list: items are automatically numbered.
  • <li>Boil water</li> — a numbered step.
  • </ol> — closes the ordered list.

Tip: Only <li> should live directly inside <ul>/<ol>. Don’t put plain text there without wrapping in <li>.

👉 Practice: Make a list of your 3 favorite movies (unordered) and your top 5 songs (ordered).

Live Demo

👉 CodePen Demo: Basic Lists (unordered + ordered)

Step 2: Nesting Lists

You can place one list inside another to make categories:

<h2>My Hobbies</h2>
<ul>
  <li>Sports
    <ul>
      <li>Football</li>
      <li>Tennis</li>
    </ul>
  </li>
  <li>Reading</li>
  <li>Coding</li>
</ul>

👉 Practice: Create a nested list of “School Subjects” with categories like Science → Physics, Chemistry, Biology.

Explanation

  • Inner <ul> ... </ul> must be inside the parent <li> it belongs to (here, “Sports”).
  • Browsers indent nested lists automatically; screen readers announce “list with N items,” which is great for accessibility.

Live Demo

👉 CodePen Demo: Nested List

Step 3: Description Lists (the “definition” style list)

Show terms with their meanings (like a glossary). Use <dl>, <dt>, and <dd> tags:

<h2>Web Development Terms</h2>
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — the structure of a webpage.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets — used for styling and design.</dd>

  <dt>JavaScript</dt>
  <dd>A programming language that makes webpages interactive.</dd>
</dl>

Explanation

  • <dl> — description list (think dictionary/glossary).
  • <dt> — term (like a word).
  • <dd> — definition (explanation of that term).
  • You can repeat <dt> + <dd> as many times as you like.

👉 Practice: Create a description list for Favorite Food, Favorite Hobby, Favorite Place with short reasons in each <dd>.

Live Demo

👉 CodePen Demo: Description List

Step 4: Creating Tables

Tables are great for displaying data in rows and columns.

<h2>Student Grades</h2>
<table border="1">
  <tr>
    <th>Name</th>
    <th>Subject</th>
    <th>Grade</th>
  </tr>
  <tr>
    <td>Alex</td>
    <td>Math</td>
    <td>A</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>Science</td>
    <td>B+</td>
  </tr>
</table>

Explanation

  • <table border="1"> — starts a table; border="1" is a quick beginner way to see borders (later you’ll use CSS).
  • <tr> — table row (groups cells horizontally).
  • <th> — header cell (bold/centered by default, labels the column).
  • <td> — data cell (actual content).
  • Close your tags: </tr>, </table>.

👉 Practice: Create a table with 3 rows: your name, a subject, and a grade. Add a 4th column called Notes and fill it for each row.

Live Demo

👉 CodePen Demo: Table

Step 5: Table with Caption and Styling

<caption> adds a label above the table, improving clarity and accessibility.

<table border="1">
  <caption>My Favorite Books</caption>
  <tr>
    <th>Title</th><th>Author</th><th>Year</th>
  </tr>
  <tr>
    <td>The Hobbit</td><td>J.R.R. Tolkien</td><td>1937</td>
  </tr>
</table>

👉 Practice: Make a table with caption of your top 3 movies with columns: Movie, Director, Year.

Live Demo

👉 CodePen Demo: Table with Caption

Step 6: Mini Project — My Weekly Schedule

Now let’s combine lists and tables in one page!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Weekly Schedule</title>
  </head>
  <body>
    <h1>My Weekly Schedule</h1>

    <h2>Things To Do</h2>
    <ul>
      <li>Study HTML</li>
      <li>Exercise</li>
      <li>Read a book</li>
    </ul>

    <h2>Class Timetable</h2>
    <table border="1">
      <tr>
        <th>Day</th>
        <th>Activity</th>
      </tr>
      <tr>
        <td>Monday</td>
        <td>Math Homework</td>
      </tr>
      <tr>
        <td>Tuesday</td>
        <td>HTML Practice</td>
      </tr>
      <tr>
        <td>Wednesday</td>
        <td>Football Training</td>
      </tr>
    </table>
  </body>
</html>

👉 Save this as schedule.html and open it in your browser.

What’s happening

  • You used a list for tasks and a table for a day-by-day plan.
  • The caption clearly names the table’s purpose (great habit).
  • This blends everything from our HTML lists and tables lesson.

👉 Practice: Add Thursday and Friday rows to your table. Expand Things To Do to at least 5 items. Create a Description List below the table called “Key Priorities” with 2–3 terms + definitions.

Live Demo

👉 CodePen Demo: Weekly Schedule

Get the Source Code

You can find the complete code for this tutorial on GitHub:

👉 Codeboid/html-series

Wrap-Up

In this HTML basics tutorial for beginners, you learned:

  • Make ordered, unordered, and description lists.
  • Nest lists inside one another.
  • Create tables with rows, headers, and captions.
  • Build a mini project: My Weekly Schedule.

Next up → HTML Tutorial #3: Links, Images, and Attributes. We’ll go deeper into how to make your pages more interactive and visually rich.

Keep coding, and keep practicing! 🌱

Related Posts