TechTicket | Session 3 - Lists, Tables, and HTML Entities

🎯 Session Overview

Welcome to Session 3! In previous sessions, you learned how to add text, images, and links to your webpage. But what happens when you have a lot of data to show?

Today, we are going to learn how to organize information beautifully. You will learn how to:

Create Unordered Lists (bullet points) and Ordered Lists (numbered lists).
Build Tables with neat rows and columns to display complex data.
Merge table cells together for advanced layouts.
Use HTML Entities to safely type special characters like < or © without breaking your code!

⏪ Quick Recap: Session 2

Let's do a quick memory check. What did we learn last time?

HTML Elements are the building blocks, made of tags like <h1> and <p>.
Attributes give extra instructions inside an opening tag (like src="...").
We learned how to make clickable Links using <a href="...">.
We added Images using the empty <img> tag!

Now, let's learn how to put text and data into perfect order!

📝 Lists in HTML

Lists are used everywhere on the web! You use them for navigation menus, top 10 game rankings, your favorite foods, or a daily to-do list. HTML gives us two main types of lists: Unordered and Ordered.

Unordered Lists (Bullet Points)

We use Unordered Lists when the exact order of the items doesn't matter (like a grocery list). We use the <ul> tag for the main list box, and <li> (List Item) for every bullet point inside.

<h3>My Favorite Games</h3>
<ul>
  <li>Minecraft</li>
  <li>Roblox</li>
  <li>Fortnite</li>
</ul>

Ordered Lists (Numbers)

When the order does matter (like a top 3 ranking or steps in a recipe), we use an Ordered List. All we change is the wrapper tag to <ol>!

<h3>How to build a website:</h3>
<ol>
  <li>Learn HTML</li>
  <li>Learn CSS</li>
  <li>Build awesome pages!</li>
</ol>

1. First, we write the wrapper tag: <ul> for bullets, or <ol> for numbers.

2. Inside the wrapper, we write an <li> (List Item) tag for every single item on our list.

3. Finally, we close the wrapper tag at the very end.

Note: Never put text directly inside the ul/ol tags without wrapping it in an li tag first!

📊 Tables in HTML

Lists are great for single items, but what if you have data that needs to be compared? Like a class schedule, or a player leaderboard showing Name, Level, and Score?

For this, we use Tables to organize data into rows and columns.

Basic Table Structure

Tables use four main tags working together:

<table>: The main wrapper holding everything.
<tr>: Table Row. This creates a horizontal row.
<th>: Table Header. Used in the first row for titles. Text here is bold and centered automatically!
<td>: Table Data. Used for the regular data cells.

<!-- border="1" makes the grid lines visible! -->
<table border="1">
  <!-- First Row: Headers -->
  <tr>
    <th>Player</th>
    <th>Score</th>
  </tr>
  
  <!-- Second Row: Data -->
  <tr>
    <td>Alex</td>
    <td>9500</td>
  </tr>
</table>

1. <table border="1">: We start the table and add an attribute to show borders.

2. <tr>: We start the first row.

3. <th>: We add two headers inside the row (Player and Score).

4. </tr>: We close the first row. The next row will appear below it.

5. <tr>: We start the second row.

6. <td>: We add data cells. Important: The first td lines up with the first th! "Alex" goes under "Player".

7. We close the table at the very end.

🧩 More Complex Tables

Sometimes you need a title cell to stretch across multiple columns. We do this using an attribute called colspan (Column Span).

<table border="1">
  <tr>
    <!-- This cell stretches across 2 columns! -->
    <th colspan="2">Top Players</th>
  </tr>
  <tr>
    <td>Alex</td>
    <td>Sarah</td>
  </tr>
</table>

🔣 HTML Entities (Special Characters)

HTML uses angle brackets < and > to create tags. But what if you actually want to write a math equation on your website like "10 < 20"?

If you type <, the browser might think you are starting an HTML tag! To fix this, we use HTML Entities. An entity is a special code that starts with an ampersand & and ends with a semicolon ;.

Character	What it means	Entity Code to type
<	Less than	`<`
>	Greater than	`>`
&	Ampersand	`&`
©	Copyright	`©`
[Space]	Extra blank space	` `

<p>The math rule is: 10 &lt; 20</p>
<p>&copy; 2026 TechTicket Academy</p>

Pro Tip: If you type 10 spaces in HTML using the spacebar, the browser ignores them and only shows 1! If you want a big gap, you have to use   (Non-Breaking Space) multiple times.

🏋️ Practice Exercises

Open your code editor and let's get organized! Create a file named practice3.html.

Exercise 1: Top 3 Games

Create an unordered list showing your top 3 favorite video games.

Remember, unordered lists use the <ul> wrapper, and every item needs an <li> tag!

Exercise 2: Daily Routine

Create an ordered list showing 3 things you do every morning in order (like Wake up, Eat breakfast, Go to school).

Change the wrapper from a ul to an <ol> to make numbers appear instead of bullets!

Exercise 3: Simple Profile Table

Create a simple table with 1 row of headers (Name, Age, Game) and 1 row of data filling in your own information. Don't forget border="1".

You will need one <table>, two <tr> tags, three <th> tags in the first row, and three <td> tags in the second!

🔥 Mini Challenge: The Game Hub Table

Let's combine tables and attributes into one advanced grid.

Create a table showing Game Ratings. It must include:

A top header row that uses colspan="3" to span the whole width, saying "Game Rankings".
A second row with three headers: "Game Name", "Rating", and "Platform".
Two rows of data filling in your favorite games.

<table border="1">
  <tr>
    <th colspan="3">Game Rankings</th>
  </tr>
  <tr>
    <th>Name</th><th>Rating</th><th>Platform</th>
  </tr>
  <!-- Add your data rows here! -->
</table>

🏠 Homework Assignment

Your task before the next session is to build a complete dashboard page.

The webpage must include:

A main heading.
A list of hobbies.
A table of your favorite games with at least 3 rows of data.
At least one HTML Entity used somewhere on the page (like a copyright symbol at the bottom).

Save it as dashboard.html and review it in your browser!

📚 Session Summary

Lists organize items neatly. Use <ul> for bullet points and <ol> for numbers.
Always put individual items inside <li> (List Item) tags!
Tables (<table>) organize data into a grid.
Tables are built using Rows (<tr>). Inside the rows, we use Headers (<th>) for titles, and Data cells (<td>) for information.
Use colspan to merge columns together.