Topic 2: Tables (row span, col span), misc. tags, heading tag(h1,h2….h6)

📖 5 min read · 🎯 beginner · 🧭 Prerequisites: javascript-basics, php-variables-introduction

Why this matters

Picture this: you've built a basic webpage, but the moment you try to create a schedule, a timetable, or a product comparison grid — suddenly the cells don't line up right. That's exactly where rowspan and colspan come in. And headings? Every page you've ever read on the internet uses <h1> through <h6> to tell the browser what's the title, what's a section, what's a sub-section. Today we're going to nail all of this — tables that actually merge cells the way you intend, a clean heading hierarchy, and the small but useful misc. tags that make your HTML complete.

What You'll Learn

• Merge table cells vertically using rowspan
• Merge table cells horizontally using colspan
• Apply the six-level heading hierarchy (<h1>–<h6>) to structure page content
• Use <br>, <hr>, <strong>, and <em> for inline and block-level formatting

The Analogy

Picture yourself organising a big dinner party with one long banquet table. Not every guest needs the same amount of room — the spectacular centrepiece takes up space across two columns, and the host's chair looms over two rows because they occupy the head of the table through both courses. Some areas of the room get large neon signs reading "FOOD" or "DANCE FLOOR" (<h1>), while smaller placards labelling individual dishes use tinier, quieter fonts (<h4>). A decorative ribbon laid across the cloth separates the appetisers from the mains (<hr>), and the catering team knows exactly where each new item starts because someone drew a clear line break between them (<br>). HTML tables and heading tags are exactly that organisational layer — applied to a webpage instead of a banquet hall.

Chapter 1: rowspan and colspan

What is rowspan?

rowspan lets a single <td> or <th> cell stretch vertically across multiple rows. Think of a centrepiece that rises through two or three tiers of your dinner table — it physically occupies the space of several rows at once.

<td rowspan="2">Shared content</td>

The number you pass is how many rows the cell should occupy. The next rows in that column must omit the cell that was merged — the browser skips that slot automatically.

What is colspan?

colspan lets a cell stretch horizontally across multiple columns — like a long serving platter that needs two place settings' worth of space.

<th colspan="2">Contact Info</th>

Again, the value is the number of columns to occupy, and the cells that were "absorbed" must be removed from that row.

Full working example

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th colspan="2">Contact Info</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td rowspan="2">34</td>
    <td>Email</td>
    <td>john.doe@example.com</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>Phone</td>
    <td>555-0199</td>
  </tr>
</table>

What's happening here, step by step:

• Row 1 has four logical columns: Name, Age, and a "Contact Info" header that spans two columns (colspan="2").
• Row 2 has John Doe, an Age cell that spans two rows (rowspan="2" — it covers Row 2 and Row 3), an Email label, and the actual email address.
• Row 3 has only three explicit cells (Jane Smith, Phone, 555-0199) because the Age column is already occupied by the rowspan from Row 2.

Rendered, this looks like:

| Name       | Age | Contact Info              |
|            |     | Email   | john.doe@…      |
| John Doe   |  34 |         |                 |
| Jane Smith |     | Phone   | 555-0199        |

The golden rule: when a cell uses rowspan="N", the N−1 rows below it must remove that cell from their markup. Same logic for colspan — the extra columns are absorbed and must not be re-declared in the same row.

Chapter 2: Heading Tags — <h1> to <h6>

The hierarchy

Headings serve as the navigational signage of a webpage, exactly like the large signs hanging over different sections of a party venue — "Drinks", "Food", "Games". There are six levels:

Usage example

<h1>Annual Vizag Developer Summit</h1>

<h2>Schedule</h2>
<h3>Morning Sessions</h3>
<h4>Keynote: State of the Stack</h4>

<h2>Guest List</h2>
<h3>VIP Attendees</h3>

<h2>Menu</h2>
<h3>Appetisers</h3>
<h4>Garlic Breadcrumbs (the `<br>` of the food world)</h4>

Important: headings are semantic — they tell screen readers, search engines, and developers about the document's structure. Don't pick a heading level because of its default font size; use CSS for sizing. Always respect the hierarchy: never jump from <h2> to <h5> without intermediate levels.

Chapter 3: Miscellaneous Tags

These are the small utility tools in every HTML developer's belt:

<br> — Line Break

Inserts a single line break inside inline content. It is a void element — no closing tag needed.

<p>123 Vizag Lane<br>Silicon District<br>Port 8080</p>

Use it sparingly. For structural spacing, prefer CSS margin or separate <p> elements.

<hr> — Horizontal Rule

Draws a full-width horizontal divider line across the page — the decorative ribbon separating your appetisers from the mains.

<h2>Menu</h2>
<p>See dishes below.</p>
<hr>
<h2>Schedule</h2>

<hr> is also a void element and carries semantic meaning: it signals a thematic break between sections of content.

<strong> — Bold / High Importance

Marks text as critically important. Browsers render it bold by default, and screen readers may emphasise it audibly.

<p>Do <strong>not</strong> miss the 9 AM keynote.</p>

<em> — Italic / Stress Emphasis

Marks text with stress emphasis — the way you'd say a word with a different tone of voice. Browsers render it italic by default.

<p>This is <em>exactly</em> the kind of table you need.</p>

<strong> vs <em> vs CSS: Use <strong> and <em> when the emphasis carries meaning. Use CSS font-weight: bold or font-style: italic when you only want a visual effect with no semantic intent.

Quick reference

Chapter 4: Putting It Together

Here is a minimal but complete page combining all four topics:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vizag Summit — Seating</title>
</head>
<body>

  <h1>Vizag Annual Summit</h1>
  <hr>

  <h2>Seating Arrangement</h2>
  <table border="1">
    <tr>
      <th>Attendee</th>
      <th>Role</th>
      <th colspan="2">Session Preference</th>
    </tr>
    <tr>
      <td>ravi</td>
      <td rowspan="2">Council Lead</td>
      <td>Morning</td>
      <td>Keynote</td>
    </tr>
    <tr>
      <td>alex</td>
      <td>Afternoon</td>
      <td>Networking Lab</td>
    </tr>
  </table>
  <br>

  <h2>Menu</h2>
  <p><strong>Chef's Special:</strong> <em>Async Ramen</em> — served hot, non-blocking.</p>
  <hr>

  <h2>Schedule</h2>
  <h3>Morning</h3>
  <p>9:00 AM — Keynote<br>10:30 AM — Workshop</p>

  <h3>Afternoon</h3>
  <p>1:00 PM — Lunch<br>2:00 PM — Breakout sessions</p>

</body>
</html>

🧪 Try It Yourself

Task: Build an event seating-plan webpage for a small office party.

Requirements:

1. A <h1> page title and <h2> sections for Menu, Schedule, and Guest List.
2. A table with at least 3 rows and 4 columns that uses:
   • One colspan="2" header spanning two columns
   • One rowspan="2" cell spanning two rows
3. At least one <hr> between two sections.
4. One <strong> and one <em> in the body text.

Starter snippet:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Office Party</title>
</head>
<body>
  <h1>Office Party 2026</h1>
  <hr>

  <h2>Guest List</h2>
  <table border="1">
    <tr>
      <th>Name</th>
      <th>Dept</th>
      <th colspan="2">Table Assignment</th>
    </tr>
    <!-- Add your rows here, including at least one rowspan="2" cell -->
  </table>

  <h2>Menu</h2>
  <p><strong>Main Course:</strong> <em>Your favourite dish</em></p>
</body>
</html>

Success criterion: Open the file in a browser. The "Table Assignment" header should visually span two columns, the rowspan cell should bridge two rows with no gap, and you should see a horizontal rule separating the Guest List section from the Menu section.

🔍 Checkpoint Quiz

Q1. In HTML tables, what is the semantic difference between using rowspan="2" versus simply creating separate cells in adjacent rows?

Q2. Given the following snippet, how many <td> cells should Row 3 contain?

<table>
  <tr><td colspan="3">Header</td></tr>
  <tr><td rowspan="2">A</td><td>B</td><td>C</td></tr>
  <tr><!-- Row 3 here --></tr>
</table>

A) 3
B) 2
C) 1
D) 0

Q3. What is wrong with this heading structure?

<h1>Page Title</h1>
<h4>First Section</h4>
<h2>Second Section</h2>

A) <h4> cannot follow <h1> — it skips levels in the hierarchy
B) <h2> must always come before <h4>
C) There can only be one heading on a page
D) Both A and B

Q4. You are building a product card. The product name should appear important to screen readers and bold visually, and a tagline below it should read in italics for tonal emphasis only (no semantic importance). Which tags should you use for each?

A1. rowspan="2" merges a single cell across two rows, so it represents one unified value that logically belongs to both rows — e.g., a shared age or a shared category. Separate cells in adjacent rows are independent data points that happen to look similar. Using rowspan is semantically correct when the data truly spans multiple rows.

A2. B) 2. Row 2's <td rowspan="2">A</td> already occupies the first column in Row 3, so Row 3 only needs 2 explicit cells to fill the remaining columns (B and C slots).

A3. D) Both A and B. Jumping from <h1> directly to <h4> skips <h2> and <h3>, breaking the outline hierarchy. Additionally, <h2> appearing after <h4> reverses the expected nesting order. Screen readers and search engines rely on a consistent heading hierarchy to parse document structure.

A4. Use <strong> for the product name (bold + semantic importance signal to screen readers) and CSS font-style: italic — or <em> only if the italics carry tonal stress meaning — for the tagline. Since the requirement says "no semantic importance", pure CSS is the cleaner choice for the tagline.

🪞 Recap

• rowspan="N" merges a cell across N rows vertically; adjacent rows must omit the absorbed cells.
• colspan="N" merges a cell across N columns horizontally; the absorbed cells must be removed from that row.
• Heading tags <h1>–<h6> form a strict hierarchy — use them for semantic document structure, not visual sizing.
• <br> inserts an inline line break; <hr> inserts a block-level thematic divider.
• <strong> conveys high importance (bold); <em> conveys stress emphasis (italic) — both carry semantic meaning distinct from CSS-only styling.

📚 Further Reading

• MDN: The Table element — authoritative reference for rowspan, colspan, and all table attributes
• MDN: HTML headings — heading hierarchy, accessibility best practices, and SEO implications
• MDN: <strong>, <em>, <br>, <hr> — inline and block utility elements
• ⬅️ Previous: PHP Variables Introduction
• ➡️ Next: echo, if condition, task on if/echo