ColSpan
So your table looks good, but the top row with Scarlett Johansson only takes up one column. The rest of the table has two columns. That makes it feel unbalanced.
We want that top row to stretch across both columns. Same for the footer with the signature.
To do that, we use something called colspan.
Right now, your header probably looks like this:
<th>Scarlett Johansson</th>Change it to this:
<th colspan="2">Scarlett Johansson</th>That tells the browser this cell should cover both columns. Now the name lines up properly with the rest of the table.
Output
Assignment
Alright, head over to the footer. That’s the part at the bottom of the table with the signature.
Right now, it’s only sitting in one column, so it looks like it’s squished to the side.
What you need to do is make that cell stretch across both columns, just like we did with the top row for the name.
You know what to use. Go fix it.
Expected Output
Solution
Add colspan to the <td> inside the footer so it covers both columns:
<tfoot>
<tr>
<td colspan="2">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Scarlett_Johansson%27s_signature.svg/1920px-Scarlett_Johansson%27s_signature.svg.png"
alt="Scarlett Johansson's signature"
width="150"
/>
</td>
</tr>
</tfoot>RowSpan
Take a look at the Citizenship row in your table right now.
It shows both United States and Denmark in the same cell, next to the label “Citizenship”
But here’s something to notice.
If you go to the actual Wikipedia page, they don’t list both countries in the same cell. They list them on separate lines, and the label “Citizenship” is vertically centered beside both.
In HTML, it’s done by using something called rowspan.
So what does rowspan do?
It lets one cell on the left (like “Citizenship”) stretch down over two rows.
That means you can give each country its own row, and still keep the label once on the left.
Here’s how you can update your table
Replace this:
<tr>
<td>Citizenship</td>
<td>United States, Denmark</td>
</tr>
With this:
<tr>
<td rowspan="2">Citizenship</td>
<td>United States</td>
</tr>
<tr>
<td>Denmark</td>
</tr>Output
Now it’s cleaner. The label only shows once, and both countries have their own space.
This is how the real Wikipedia version handles multiple values in a row. It’s just more readable, especially when the list gets longer.
Assignment
Head over to the Born section in your table.
Right now, you’ve got everything — her full name, birthday, and birthplace — all crammed into one cell. It’s technically fine, but it’s not very readable.
Let’s fix that.
Your Task
- Break that one cell into three separate rows
- Keep the “Born” label only once on the left
- Make it stretch across all three rows
Use rowspan to make that left cell take up the space it needs.
Expected Output
Solution
<tr>
<td rowspan="3">Born</td>
<td>Scarlett Ingrid Johansson</td>
</tr>
<tr>
<td>November 22, 1984 (age 40)</td>
</tr>
<tr>
<td>New York City, U.S.</td>
</tr>