Topic 2: Tables (rowspan, colspan), Misc. Tags, Heading Tags (h1–h6)

📖 5 min read · 🎯 beginner · 🧭 Prerequisites: css-properties, javascript-basics

Why this matters

Picture this: you open a website and see a schedule, a pricing table, or a seating chart — cells that stretch across multiple columns, rows that span two slots. That's not magic. That's rowspan and colspan. And those big bold headings that guide your eye down the page? That's h1 through h6 doing quiet, important work. If you've ever tried to build a table and ended up with a lopsided mess, this lesson is exactly what you needed. We'll also pick up a handful of small HTML tags that don't get much spotlight but show up everywhere once you know what to look for.

What You'll Learn

• How rowspan merges cells vertically across multiple rows
• How colspan merges cells horizontally across multiple columns
• How heading tags <h1> through <h6> create a clear content hierarchy
• What the miscellaneous tags <br>, <hr>, <strong>, and <em> do and when to reach for them

The Analogy

Picture a dinner party with one long banquet table. Most guests get a single plate-sized spot, but the towering floral centerpiece stretches across two seats — that's rowspan. The chef's enormous charcuterie board runs sideways over three place settings — that's colspan. Above the table, hand-lettered signs hang from the ceiling: a giant "WELCOME" banner (<h1>) with smaller signs underneath pointing to "Drinks" (<h2>), "Appetizers" (<h3>), and so on down to tiny tent cards (<h6>). And scattered around the room are a few simple tools — a rope divider between sections (<hr>), a bell to signal a pause (<br>), and a highlighter pen to call out the chef's special (<strong>).

Chapter 1: rowspan and colspan

HTML tables are built row by row. By default every <td> occupies exactly one cell. rowspan and colspan break that constraint.

rowspan — a cell stretches downward over N rows. The rows below must omit the cell that would normally occupy that space.

colspan — a cell stretches rightward over N columns. The extra column slots in that same row are omitted.

Here is a concrete table combining both attributes:

<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:

• colspan="2" on the <th>Contact Info</th> header makes it span the "Email" and "Phone" columns.
• rowspan="2" on the age cell 34 stretches it down to cover both John Doe's row and Jane Smith's row — because both guests share the same age bracket in this simplified example.
• The third <tr> only has two <td> elements (not three) because rowspan="2" already occupies the second column slot.

graph TD
  A["<table>"]
  A --> R1["Row 1: Name | Age | Contact Info (colspan=2)"]
  A --> R2["Row 2: John Doe | 34 (rowspan=2) | Email | john.doe@example.com"]
  A --> R3["Row 3: Jane Smith |  ← occupied by rowspan | Phone | 555-0199"]

Key rules to remember:

• rowspan="2" means the cell occupies its own row plus the one below — total of 2 rows.
• colspan="2" means the cell occupies its own column plus the one to the right — total of 2 columns.
• Omit the displaced cells from the HTML or the table will render extra, unintended cells.

Chapter 2: Heading Tags — h1 to h6

Headings give a page its content hierarchy. Browsers style them with decreasing visual weight; screen readers use them to build a navigation outline.

<h1>Vizag Annual Festival</h1>
<h2>Menu</h2>
<h3>Main Course</h3>
<h4>Vegetarian Options</h4>
<h5>Allergen Notes</h5>
<h6>Sourcing Details</h6>

How to think about the hierarchy:

• Use one <h1> per page — it signals the primary topic to search engines and assistive tech.
• Do not skip levels (e.g., jumping from <h2> directly to <h4>). Hierarchy should be sequential.
• Headings are for document structure, not for making text big. Use CSS for size control.

Chapter 3: Miscellaneous Tags

These small tags handle formatting tasks that don't fit neatly into block or inline categories.

<br> — Line Break

Inserts a single line break without starting a new paragraph. No closing tag needed.

<p>
  Vizag City Hall<br>
  123 Binary Boulevard<br>
  Vizag, CV 00101
</p>

Use <br> for addresses and poetry — not as a substitute for paragraph spacing (use CSS margin for that).

<hr> — Horizontal Rule

Draws a thematic break across the page — a visual divider between distinct content sections.

<h2>Menu</h2>
<p>Pasta, salad, and garlic bread.</p>
<hr>
<h2>Schedule</h2>
<p>Doors open at 6 PM.</p>

Style it with CSS (border, color, width) to match your design. By default it renders as a gray line.

<strong> — Bold Emphasis

Marks text as strongly important. Browsers render it bold; screen readers may add vocal stress.

<p>Please arrive <strong>no later than 6:30 PM</strong>.</p>

<em> — Italic Emphasis

Marks text for stress emphasis. Browsers render it italic; screen readers may alter tone.

<p>The chef's special tonight is <em>truffle risotto</em>.</p>

<strong> vs <em> vs styling with CSS:

• Use <strong> when the content is genuinely critical (warnings, deadlines).
• Use <em> for spoken-language stress ("I said please").
• Use CSS font-weight: bold or font-style: italic when you just want visual style with no semantic meaning.

🧪 Try It Yourself

Task: Build an event seating-chart page for the Vizag Annual Festival.

Requirements:

1. An <h1> for the festival name, <h2> headings for "Menu", "Schedule", and "Guest List".
2. A table with at least one colspan (for a merged header) and one rowspan (for a guest attending two sessions).
3. An <hr> between each section.
4. At least one <strong> tag highlighting an important detail (e.g., a sold-out item).

Starter snippet:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vizag Annual Festival</title>
</head>
<body>

  <h1>Vizag Annual Festival</h1>

  <h2>Guest List</h2>
  <table border="1">
    <tr>
      <th>Name</th>
      <th>Session</th>
      <th colspan="2">Contact</th>
    </tr>
    <tr>
      <td>Ada Loop</td>
      <td rowspan="2">Morning & Afternoon</td>
      <td>Email</td>
      <td>ada@example.io</td>
    </tr>
    <tr>
      <td>Ben Bit</td>
      <td>Phone</td>
      <td>555-0101</td>
    </tr>
  </table>

  <hr>

  <h2>Menu</h2>
  <p>Chef's special: <strong>Truffle Risotto</strong> — <em>limited portions</em>.</p>

  <hr>

  <h2>Schedule</h2>
  <p>
    Doors open: 6:00 PM<br>
    Dinner served: 7:00 PM<br>
    Closing ceremony: 9:30 PM
  </p>

</body>
</html>

Success criterion: Open the file in a browser. You should see the "Contact" header spanning two columns, the "Morning & Afternoon" cell stretching across two rows, a visible horizontal rule between sections, and "Truffle Risotto" in bold.

🔍 Checkpoint Quiz

Q1. What does colspan="3" on a <td> element mean?

A) The cell spans 3 rows downward B) The cell spans 3 columns to the right C) The table has 3 columns total D) The cell has 3 child elements

Q2. Given this snippet, how many <td> elements should row 2 contain?

<table>
  <tr>
    <td>A</td>
    <td rowspan="2">B</td>
    <td>C</td>
  </tr>
  <tr>
    <!-- how many <td> here? -->
  </tr>
</table>

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

Q3. Which heading tag should appear only once per HTML page, and why?

Q4. A designer asks you to add a thick dividing line between the "Menu" and "Schedule" sections of a page. Which tag provides the correct semantic element, and how would you make it visually thicker?

A1. B — colspan="3" causes the cell to stretch across 3 columns horizontally. The next 2 column slots in that row must be omitted from the markup.

A2. B — Row 2 should have only 2 <td> elements. Cell B already occupies the second column slot in row 2 because of rowspan="2", so adding a third <td> would push a cell into an extra column that doesn't exist in other rows.

A3. <h1> should appear only once. It signals the primary topic of the entire page to search engines and screen readers. Multiple <h1> tags dilute the semantic signal and can harm accessibility and SEO.

A4. Use <hr> for the semantic divider, then increase its visual thickness with CSS: hr { border: none; border-top: 4px solid #333; }. The <hr> tag communicates a thematic break in content; the CSS controls appearance without changing the meaning.

🪞 Recap

• rowspan="N" merges a cell downward over N rows; omit the displaced cells from subsequent rows.
• colspan="N" merges a cell rightward over N columns; omit the displaced cells from the same row.
• Heading tags <h1>–<h6> create a sequential content hierarchy — use one <h1> per page and never skip levels.
• <br> adds a line break, <hr> inserts a thematic divider, <strong> signals critical importance, and <em> signals spoken-language stress.

📚 Further Reading

• MDN: The HTML table element — comprehensive reference for all table attributes including rowspan and colspan
• MDN: HTML heading elements — covers hierarchy rules and accessibility implications
• MDN: <hr> element — thematic break semantics and styling guidance
• WebAIM: Semantic Structure — why heading hierarchy matters for screen reader users
• ⬅️ Previous: JavaScript Basics
• ➡️ Next: Element Design Based on the Picture Requirement