You have seen plenty of websites up to now.

Look at the right side of any Wikipedia page. There is always a box sitting there with facts laid out neatly. Name at the top. Rows of information like birthday, occupation, years active. A signature at the bottom.

👀 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

That box on the right is a table. Name at the top as the header. Rows of facts in the middle. All laid out neatly in rows and columns.

Tables are great for showing structured data in a way that is easy to scan. Let us learn how to build one.

Adding a Table

To create a table you use the <table> tag. On its own it just creates an empty table. You will not see anything yet.

To actually show data you need to add rows and cells. Each row is made with <tr>. Inside a row you add cells using <td>.

Here is a simple two column table:

It is working but it does not really look like a table yet. To make it clearer you can add a border using the border attribute on the <table> tag.

Now you can actually see the rows and columns clearly.

Adding More Rows

To add more data you just create another row with <tr> and add cells inside with <td>. That is all there is to it.

Table Header and Footer

Right now the table is just a bunch of rows. But a well structured table has three parts.

• A header at the top for the title
• A body in the middle for the main data
• A footer at the bottom for things like a note or signature

This helps the browser, search engines, and screen readers understand what each part of the table actually is.

For the header you wrap the top row in a <thead> tag and use <th> instead of <td> which makes the text bold and marks it as a heading.

For the body you wrap all the middle rows in a <tbody> tag.

For the footer you wrap the bottom row in a <tfoot> tag.

colspan

You might notice the header row only takes up one column while the rest of the table has two. That looks unbalanced.

To make a cell stretch across multiple columns you use colspan. Add colspan="2" to a cell and it will cover two columns instead of one.

Now the header and footer both stretch across both columns and the table looks balanced.

rowspan

Sometimes you want a label on the left to stretch down over multiple rows. Like when you have two values for the same field.

For example instead of putting "United States, Denmark" in one cell you can give each country its own row and let the "Citizenship" label span both rows. That is what rowspan does.

The label only shows once and each value has its own space. Much cleaner and more readable.