HTML: Webpage Layouts (Part 2)

HTML Tables Deep Dive: Part 2

Mastering spatial controls and complex grid merging.

Lesson 14 Review

In Part 1, we learned how to build the foundational structure using <table>, <tr>, <th>, and <td>. We also learned how to manipulate border thickness, align text, and apply background colors.

Topic 1: Cellpadding vs. Cellspacing

If you build a table with borders, you will notice the text touches the edges of the box, and there are strange double-lines between the cells. We control this using two specific attributes placed inside the main <table> tag.

• cellpadding: Controls the "cushion" of empty space inside the cell. It pushes the border away from the text.
• cellspacing: Controls the empty space outside the cell. It pushes the cells away from each other.

The Code: High Cellpadding (Inner Space)

<!-- cellspacing is 0, so the cells touch. cellpadding is 20, creating massive inner space. -->
<table border="1" cellpadding="20" cellspacing="0">
  <tr>
    <td bgcolor="#ffffff">Box A</td>
    <td bgcolor="#ffffff">Box B</td>
  </tr>
</table>

Output:

Box A

Box B

The Code: High Cellspacing (Outer Space)

<!-- cellpadding is 5. cellspacing is 20, pushing the boxes far apart. -->
<table border="1" cellpadding="5" cellspacing="20">
  <tr>
    <td bgcolor="#ffffff">Box A</td>
    <td bgcolor="#ffffff">Box B</td>
  </tr>
</table>

Output:

Box A

Box B

Topic 2: Colspan (Merging Columns)

Sometimes you need a single cell to stretch across the top of multiple columns, like a main title over sub-categories. You use the colspan attribute on the <th> or <td> tag.

The Engineering Rule: If you set colspan="2" on a cell, that cell is now doing the job of TWO cells. Therefore, you must delete one <td> tag from that row in your code, otherwise the table will break and push extra cells out the side!

The Code:

<table border="1" cellpadding="10" cellspacing="0" width="100%">
  <tr>
    <!-- This header spans 2 columns -->
    <th colspan="2" bgcolor="#e1f5fe">Quarterly Financial Report</th>
  </tr>
  <tr>
    <!-- The row below must contain exactly 2 cells to match -->
    <th>Revenue</th>
    <th>Expenses</th>
  </tr>
  <tr align="center">
    <td>$50,000</td>
    <td>$30,000</td>
  </tr>
</table>

Output:

Quarterly Financial Report
Revenue	Expenses
$50,000	$30,000

Topic 3: Rowspan (Merging Rows)

Rowspan is trickier. It forces a cell to stretch downward across multiple rows. We use the rowspan attribute.

The Engineering Rule: If you put rowspan="2" in Row 1, that cell will stretch down into Row 2. This means Row 2 will need one less <td> tag, because Row 1 is invading its space!

The Code:

<table border="1" cellpadding="10" cellspacing="0" width="100%">
  <tr>
    <!-- This cell stretches DOWN across 2 rows -->
    <th rowspan="2" bgcolor="#e1f5fe">IT Department</th>
    <td>Alice (Lead Developer)</td>
  </tr>
  <tr>
    <!-- Row 2 ONLY has one <td>, because the IT Department cell took the other spot! -->
    <td>Bob (System Admin)</td>
  </tr>
</table>

Output:

IT Department	Alice (Lead Developer)
	Bob (System Admin)

Part 2 Quiz: Test Your Grid Logic

Click the buttons below to check your understanding of table spacing and spanning.

1. You want to make the text inside a table cell easier to read by pushing the cell border further away from the text. Which attribute should you increase?

A) cellspacing

Incorrect. Cellspacing pushes the actual cells further apart from each other, creating thicker grid lines.

B) cellpadding

Correct! Cellpadding creates internal "cushion" space between the text data and the inner border of the cell.

C) marginwidth

Incorrect. Marginwidth is traditionally used in iframes and framesets, not standard tables.

2. If you create a table with 3 columns, and you want the main header to stretch across all of them, what code should you write?

A) <th rowspan="3">Title</th>

Incorrect. Rowspan stretches the cell vertically (downwards).

B) <th colspan="3">Title</th>

Correct! Colspan allows a single cell to merge horizontally across multiple columns.

C) <th width="100%">Title</th>

Incorrect. Width 100% just makes that specific column very wide, but it will not merge it with the other two columns.

3. A table has 2 rows and 2 columns. In Row 1, the first cell has `rowspan="2"`. How many `<td>` tags must you write in Row 2?

A) 0

Incorrect. You still need to fill the second column of the second row.

B) 1

Correct! Because Row 1 is stretching down and occupying the first slot of Row 2, Row 2 only needs one `<td>` tag to fill its remaining second slot.

C) 2

Incorrect. If you write 2 tags, the table will "break" and push an extra cell outside the grid layout.

Class Dismissed!

Congratulations. You have mastered every structural attribute of the HTML table. You can now build highly complex, data-heavy reports, and you have the ability to read and repair legacy table-based website layouts.

Keep advancing your Web Development skills!