Look at the right side of any Wikipedia page. There is always a little box sitting there with a name at the top, rows of facts below, and sometimes a signature at the bottom. That box is just an HTML table.

Tables are perfect when you have structured information that people need to scan quickly. Think birthdays, job titles, prices, stats, anything that belongs in a grid.

The infobox on the right is exactly what we are going to build together, step by step.

👀 Here is what you see on the page

Nadia

---

Nadia (born 1988) is an American software engineer, web developer, educator, and content creator. With over 10 years of professional experience in web development, she has become one of the most influential voices in tech education.

Nadia
Born	1988
Nationality	American
Occupation	Software Engineer, Educator
Years active	2010 to present

Your First Table

Every table starts with the <table> tag. Just like any HTML element, it opens and closes.

<table></table>

Right now that gives you nothing, an invisible, empty table. To actually see something, you need to add rows and cells inside it.

Rows and Cells

A row is made with <tr>, think of it as one horizontal line of data. Inside that row, each piece of data gets its own cell using <td>.

That creates one row with two cells. Still hard to see though, so let us add a border to make it visible.

The border attribute adds a visible edge to your table. Modern projects use CSS for this, but while you are learning the structure, border="1" is the quickest way to actually see what you are building.

Adding More Rows

Want more data? Just add another <tr> with more <td> cells inside. Each new <tr> is a new row, and it is that simple.

Header, Body, and Footer

Your table is working, but it is just one big block of rows right now. Let us give it real structure.

Think about the Wikipedia infobox again. The name at the very top is not just a regular row, it is a heading. And the signature at the bottom belongs separately from the main facts. So we split the table into three named sections:

• <thead> — the top (title, heading)
• <tbody> — the middle (your actual data)
• <tfoot> — the bottom (signature, totals, notes)

Inside <thead>, swap <td> for <th>. That makes the text bold automatically and tells the browser this cell is a heading, not just data.

Colspan — Stretch Across Columns

Here is a problem. Your table has two columns, one for the label and one for the value. But the name "Nadia" in the header only takes up one of those columns. It looks unbalanced.

What you really want is for that header cell to stretch across both columns. That is exactly what colspan does. It tells a cell to cover more than one column.

<th colspan="2">Nadia</th>

The number you give colspan is how many columns you want that cell to cover. Since the table has two columns, colspan="2" makes it fill the full width.

Rowspan — Stretch Down Rows

Now look at the "Born" section. You might have all three pieces of info, full name, date, and city, crammed into one cell. It works, but it is hard to read.

What if each piece had its own row, but the "Born" label only appeared once and stretched down the left side? That is rowspan. Instead of stretching across columns like colspan, it stretches down across rows.

<tr>
  <td rowspan="3">Born</td>
  <td>Nadia</td>
</tr>
<tr>
  <td>1988</td>
</tr>
<tr>
  <td>United States</td>
</tr>

Notice the second and third <tr> rows only have one <td> each. That is because the "Born" cell is already occupying that left column space for all three rows, so you do not add it again.

Next, you will learn about adding links in HTML. Continue to Links.