Let’s begin with Lecture 10 of the HTML5 & CSS3 series. Creating Tables in HTML. This lecture is for absolute beginners; even kids can follow along and understand.
🎯 Objective:
By the end of this lecture, you will:
- Understand how to create tables using
<table>,<tr>,<th>, and<td> - Know how to organize data like scores, schedules, or game stats
- Be able to add borders and basic styling
- Create a fun “Game Scores” table on your own!
📊 What is a Table?
A table helps you organize information in rows and columns, just like in math class or a game scoreboard.
Think of it like this:
A table is like a grid paper — perfect for neatly showing data like test scores, sports rankings, or game inventories.
🔤 Basic Table Tags
Here are the main tags used to build tables:
| Tag | Description |
|---|---|
<table> | Creates the table container |
<tr> | Table Row – defines each row |
<th> | Table Header – bold and centered by default |
<td> | Table Data – normal cell inside a row |
🧱 How to Build a Simple Table
Example:
<table>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td>Naji</td>
<td>95</td>
</tr>
<tr>
<td>Nomi</td>
<td>88</td>
</tr>
</table>🎯 Output (before styling):
| Name | Score |
|---|---|
| Naji | 95 |
| Nomi | 88 |
🖌️ Add Borders and Style (Optional)
To make your table look neat, add a simple border using the border attribute:
<table border="1">
<!-- Your rows and cells go here -->
</table>You can also use CSS later to style your table even more!
💻 Try This: Build a Game Scores Table
Let’s create a new HTML file that shows off game scores in a table.
Step 1: Create a New File
In your VS Code project folder (MyFirstWebsite), create a new file named:
game-scores.htmlStep 2: Add This Code
<!DOCTYPE html>
<html>
<head>
<title>Game Scores</title>
</head>
<body>
<h1>Top Game Scores</h1>
<table border="1">
<tr>
<th>Player</th>
<th>Level 1</th>
<th>Level 2</th>
<th>Total</th>
</tr>
<tr>
<td>Naji</td>
<td>250</td>
<td>320</td>
<td>570</td>
</tr>
<tr>
<td>Nomi</td>
<td>200</td>
<td>300</td>
<td>500</td>
</tr>
<tr>
<td>Kuku</td>
<td>270</td>
<td>310</td>
<td>580</td>
</tr>
</table>
<p><a href="index.html">Back to Home</a></p>
</body>
</html>Step 3: Run with Live Server
Right-click the code → Show All Commands → Launch Live Server
🎉 You’ve created a clean and organized table to show game scores!
🧪 Try It Yourself!
- Add another player row to the table.
- Change one of the scores and update the total.
- Make the “Total” column bold using
<b>inside a<td>. - Add a new column like
"Time Taken".
🚀 Next Lecture Preview:
In Lecture 11, we’ll learn how to create forms using HTML, so users can type in their name, choose options, and click buttons on your website!
Stay Updated
If you found this information useful, don’t forget to bookmark this page and Share and leave your feedback in the comment section below.
Creating Lists in HTML | Lecture 9
