Alright, so you’ve got a table going for Scarlett Johansson. You’ve added the basics: her birthday, what she does, how long she’s been active. That’s great.
But now let’s make the table more organized.
Think about how this looks on Wikipedia.
At the top of the table, you see her name. That’s not just regular info. It’s the heading. It tells you what the whole table is about.
Now scroll to the bottom of that same table. What do you see? Usually her signature.
That’s not just another row either. It belongs at the bottom. That’s the footer.
So here’s the idea:
We’re going to split the table into three parts:
- A header at the top — for the name
- A body in the middle — for details like birthday, job, etc.
- A footer at the bottom — for the signature
This helps the browser, screen readers, and even your future self understand what each part of the table is.
The Header
To make the header, we just wrap the top row inside a <thead> tag. We also use <th> for the cell, which makes the text bold and marks it as a heading.
<table border="1">
<thead>
<tr>
<th>Scarlett Johansson</th>
</tr>
</thead>That’s it. It still looks the same in the browser, but it now has structure.
The Footer
Same idea. We don’t change the row — we just wrap the bottom row in a <tfoot> tag.
<tfoot>
<tr>
<td>Signature</td>
<td>
<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>We also dropped in an image using the <img> tag. You can use images as table data too — it works just like text.
The Full Table So Far
Here’s everything together — header at the top, footer at the bottom.
<table border="1">
<!-- Header -->
<thead>
<tr>
<th>Scarlett Johansson</th>
</tr>
</thead>
<!-- Body will come next -->
<!-- Footer -->
<tfoot>
<tr>
<td>Signature</td>
<td>
<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>
</table>The only thing left is the middle — the main content — which we’ll wrap in a <tbody> tag. That’ll go between the header and footer.
Table with body
<table border="1">
<!-- Header -->
<thead>
<tr>
<th colspan="2">Scarlett Johansson</th>
</tr>
</thead>
<!-- Body -->
<tbody>
<tr>
<td>Born</td>
<td>
Scarlett Ingrid Johansson
November 22, 1984 (age 40)
New York City, U.S.
</td>
</tr>
<tr>
<td>Citizenship</td>
<td>
United States,
Denmark
</td>
</tr>
<tr>
<td>Occupations</td>
<td>Actress · Singer</td>
</tr>
<tr>
<td>Years active</td>
<td>1994–present</td>
</tr>
<tr>
<td>Works</td>
<td>Performances · Discography</td>
</tr>
</tbody>
<!-- Footer -->
<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>
</table>