Welcome to Day 4 of the 7 Days HTML Tutorial!
Today, you’ll learn how to organize information clearly and cleanly using lists and tables—two powerful HTML tools for displaying structured content.
By the end of this post, you’ll be able to:
- Create ordered and unordered lists
- Use nested lists (a list within a list)
- Build tables to display data in rows and columns
Let’s get started!
Table of Contents
Part 1: Lists in HTML
Lists are perfect for grouping related items together, like shopping lists, menus, or steps in a process.
Unordered List (<ul>)
This displays items with bullet points.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ul>= unordered list<li>= list item
Ordered List (<ol>)
This displays items with numbers.
<ol>
<li>Learn HTML</li>
<li>Practice daily</li>
<li>Build projects</li>
</ol><ol>= ordered list
Nested Lists
You can put a list inside another list item.
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
<li>Backend
<ul>
<li>Java</li>
<li>Node.js</li>
</ul>
</li>
</ul>This is helpful for menus, categories, or breakdowns of topics.
Part 2: Tables in HTML
Tables are used to present information in rows and columns, like a spreadsheet.
Basic Table Structure
<table border="1">
<tr>
<th>Name</th>
<th>Role</th>
</tr>
<tr>
<td>Alice</td>
<td>Developer</td>
</tr>
<tr>
<td>Bob</td>
<td>Designer</td>
</tr>
</table><table>= starts a table<tr>= table row<th>= table header (bold by default)<td>= table data (a cell)
border="1"adds a simple border (for visibility during practice)
Table with Headings and Data
<table border="1">
<thead>
<tr>
<th>Language</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML</td>
<td>Markup</td>
</tr>
<tr>
<td>JavaScript</td>
<td>Programming</td>
</tr>
</tbody>
</table>Adding <thead> and <tbody> is good practice for better structure and styling.
Mini Project: Skills & Tools Page
Create a new HTML file named skills.html and paste this code:
<!DOCTYPE html>
<html>
<head>
<title>My Skills</title>
</head>
<body>
<h1>My Development Skills</h1>
<h2>Languages I Know</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h2>Learning Plan</h2>
<ol>
<li>Practice HTML daily</li>
<li>Build small projects</li>
<li>Learn CSS next</li>
</ol>
<h2>Skills Summary</h2>
<table border="1">
<tr>
<th>Skill</th>
<th>Level</th>
</tr>
<tr>
<td>HTML</td>
<td>Beginner</td>
</tr>
<tr>
<td>CSS</td>
<td>Just Starting</td>
</tr>
</table>
</body>
</html>Save it, open it in your browser, and update it with your own skills!
Quick Recap
- Use
<ul>and<ol>for lists; use<li>for each item - Tables use
<table>,<tr>,<th>, and<td>to structure content - Tables help show structured data, like skills or schedules
Practice Task
📝 Create a page with:
- A shopping list using an unordered list
- A step-by-step guide using an ordered list
- A table with 3 rows and 3 columns showing your favorite tools and ratings
What’s Next?
On Day 5, we’ll learn how to add forms to your website — which is how you collect information from users (like contact forms or search boxes).
👉 Keep up the great work — you’re doing amazing!
🎯 Want to test your learning so far?
Check out the 7 Days HTML Challenge with Solutions to practice and validate your understanding with hands-on tasks!