What are HTML tables?
If you look at the right side of a Wikipedia page, you’ll often see a box with facts like birthdate, occupation, or years active.
That box is actually a table.
So what’s a table?
A table is a way to show information in rows and columns, kind of like a spreadsheet.
- Each row is a horizontal line of data
- Each column lines up related values vertically
- Each box inside the table is called a cell
Tables are great for showing structured data, like dates, names, or stats, in a way that’s easy to scan.
Adding HTML table
First, let’s talk about the <table> tag.
Just like other HTML elements, a table starts and ends with a tag:
<table></table>On its own, that just creates an empty table. You won’t see anything inside yet.
To actually show data, we need to add rows and cells.
- Each row is made with
<tr>. - Inside a row, we add cells using
<td>.
You can put as much data as you want in each cell.
Let’s make a two–column table like in the Wikipedia page:
<table>
<tr>
<td>Born</td>
<td>
Scarlett Ingrid Johansson
November 22, 1984 (age 40)
New York City, U.S.
</td>
</tr>
</table>Output
Here, we made a table, it might not look like it yet, for our visibility lets add a table border, for that we use border attribute.
Right now it’s working, but it doesn’t really look like a table yet. To make it clearer, let’s add a border. We can do that with the border attribute on <table>.
<table border="1">Now, this is how the table will look like:
Add more data to the table
To add new data to a table, we just create another row with <tr> and then add the cells inside with <td>.
Here’s the table again, this time with a second row for Citizenship:
<table border="1">
<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>
</table>Output
Assignment
Now let’s add three more rows to the same table.
The new rows should be:
- Occupations → Actress · Singer
- Years active → 1994–present
- Works → Performances · Discography
Remember, each row is made with <tr> and each cell inside with <td>.
Expected Output
