Topic 1: Tags, Introduction to Tables

📖 5 min read · 🎯 beginner · 🧭 Prerequisites: css-introduction-internal-external-inline-task-form-internal, introduction-to-javascript

Why this matters

Before you can design anything beautiful on a webpage, you need to understand what you're actually working with. HTML tags are the raw material of every website you've ever visited — every button, heading, image, and paragraph exists because of a tag. And tables? They're one of the most practical tools in that kit. You'll use them to display data clearly, line things up, and give structure to information that would otherwise be a jumbled mess. Let's start with the basics — because everything you'll design later is built on this foundation.

What You'll Learn

• What HTML tags are and why the browser needs them
• The most common tags every developer reaches for daily
• How HTML tables are structured using <table>, <tr>, <td>, and <th>
• How to build a complete, readable table from scratch

The Analogy

Think of building a website the way a construction crew builds a house. The crew needs clearly labeled materials — bricks go here, windows go there, a door frame goes over here — so every worker knows exactly what to do with each piece. HTML tags are those labels: you wrap content in a <p> tag and the browser instantly knows "that's a paragraph," just like a sticker reading "WINDOW" tells the crew not to use that piece as flooring. Without the labels, everything is just a pile of lumber. With them, you get a house.

Chapter 1: What Is an HTML Tag?

A tag is a keyword wrapped in angle brackets that tells the browser what role a piece of content plays on the page. Most tags come in pairs: an opening tag and a closing tag (which adds a forward slash before the keyword).

<p>This is a paragraph.</p>

The browser reads the opening <p>, renders the text as a paragraph, then closes it when it sees </p>. Some tags are self-closing — they have no content between them, so there's no closing tag needed (more on that below).

Common Tags Every Developer Uses

Here's how they look in practice:

<h1>Welcome to Vizag</h1>
<h2>The city where code comes alive</h2>

<p>the trainer oversees the class meetings every Tuesday.</p>

<img src="ravi.png" alt="the trainer at the podium" />

<a href="https://example.dev">Visit Vizag</a>

• <h1> through <h6> create a document outline — use only one <h1> per page.
• <p> wraps any block of prose.
• <img> requires a src attribute (where the image lives) and an alt attribute (a text description for accessibility).
• <a> requires an href attribute pointing to the destination URL.

Chapter 2: Introduction to Tables

When you have structured data — game scores, product listings, timetables, comparison charts — scattering it as plain text makes it hard to read. Tables bring that data into neat rows and columns, the same way organized shelves make it easy to find exactly the action figure you're looking for.

The Four Core Table Tags

• <table> — wraps the entire table. Everything lives inside here.
• <tr> — table row. Each <tr> is one horizontal shelf.
• <td> — table data. Each <td> is one cell on a shelf — where the actual content sits.
• <th> — table header. Like <td> but bold and centered by default; used to label columns (or rows).

Table Structure at a Glance

graph TD
    T[table] --> TR1[tr — header row]
    T --> TR2[tr — data row 1]
    T --> TR3[tr — data row 2]
    TR1 --> TH1[th: Name]
    TR1 --> TH2[th: Superpower]
    TR1 --> TH3[th: Price]
    TR2 --> TD1[td: SuperCoder]
    TR2 --> TD2[td: Infinite Loops]
    TR2 --> TD3[td: $19.99]
    TR3 --> TD4[td: BugSmasher]
    TR3 --> TD5[td: Debugging Vision]
    TR3 --> TD6[td: $24.99]

Chapter 3: Building a Table

Here is a complete, working example — a roster of action figures from the Vizag toy shelf:

<table>
  <tr>
    <th>Name</th>
    <th>Superpower</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>SuperCoder</td>
    <td>Infinite Loops</td>
    <td>$19.99</td>
  </tr>
  <tr>
    <td>BugSmasher</td>
    <td>Debugging Vision</td>
    <td>$24.99</td>
  </tr>
</table>

What the browser renders:

Breaking it down:

• The first <tr> holds three <th> cells — these become the bold column labels.
• Each subsequent <tr> holds three <td> cells — one per column, in the same order as the headers.
• Every row must have the same number of cells as the header row, or columns will misalign.

🧪 Try It Yourself

Task: Build a table listing your 3 favorite books or movies.

Your table must have three columns: Title, Genre, and Your Rating (out of 10). Start from this starter template and fill in your own data:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Favorites Table</title>
  </head>
  <body>
    <h1>My Favorite Books / Movies</h1>

    <table border="1">
      <tr>
        <th>Title</th>
        <th>Genre</th>
        <th>My Rating</th>
      </tr>
      <tr>
        <td><!-- Your first entry --></td>
        <td><!-- e.g. Sci-Fi --></td>
        <td><!-- e.g. 9/10 --></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </body>
</html>

Success criterion: Open the file in your browser. You should see a grid with a bold header row and three data rows, each cell aligned in its column. Every column should line up cleanly across all rows.

🔍 Checkpoint Quiz

Q1. What is the purpose of an HTML tag?

A) To style text with colors and fonts
B) To tell the browser what role a piece of content plays
C) To connect the page to a database
D) To write JavaScript logic inside HTML

Q2. Given this snippet, what will the browser display for the second row?

<table>
  <tr>
    <th>City</th>
    <th>Population</th>
  </tr>
  <tr>
    <td>Vizag</td>
    <td>42,000</td>
  </tr>
</table>

A) Two bold cells reading "City" and "Population"
B) One row with the text "Vizag" in the first cell and "42,000" in the second
C) An error, because <td> cannot follow <th>
D) Nothing — <table> requires a <tbody> wrapper to render

Q3. What is the difference between <td> and <th>?

A) <th> is only valid in the last row of a table
B) <td> holds header labels; <th> holds regular data
C) <th> is bold and centered by default and is used for column (or row) labels; <td> holds regular data cells
D) They are interchangeable — use either one anywhere

Q4. You're building a product listing page with columns for Product Name, Category, and Price. How would you structure the header row?

<!-- Write the correct HTML for the header row here -->

A1. B — Tags are labels that communicate the semantic role of content to the browser, so it knows how to render and interpret each piece.

A2. B — The second <tr> contains two <td> cells, so the browser renders a regular (non-bold) row with "Vizag" in column one and "42,000" in column two.

A3. C — <th> stands for table header; browsers render it bold and center-aligned by default. <td> stands for table data and holds normal cell content.

A4.

<tr>
  <th>Product Name</th>
  <th>Category</th>
  <th>Price</th>
</tr>

One <tr> containing three <th> elements — one for each column label.

🪞 Recap

• HTML tags are labeled wrappers that tell the browser what each piece of content is and how to treat it.
• Common everyday tags include <h1>–<h6> for headings, <p> for paragraphs, <img> for images, and <a> for hyperlinks.
• Tables organize structured data into rows and columns using four core tags: <table>, <tr>, <td>, and <th>.
• <th> labels the columns (or rows) of a table; <td> holds the actual data cells.
• Every row in a table should have the same number of cells to keep columns aligned.

📚 Further Reading

• MDN Web Docs — HTML elements reference — the source of truth for every HTML tag and its attributes
• MDN Web Docs — The table element — complete guide to table structure, accessibility, and advanced features like colspan and rowspan
• HTML.com — HTML Tables Tutorial — beginner-friendly walkthrough with live examples
• ⬅️ Previous: Introduction to JavaScript
• ➡️ Next: CSS Properties