Renato Junior
Hello, I'm Renato Junior, and you're here to learn HTML in 180-second videos. In this article, you'll learn the basics of creating tables in HTML.
To understand how tables work, you first need to know how a table is structured.
A table is made up of rows, and each row contains multiple pieces of data.
In the following image, you'll see Row 1 and Row 2.
Inside Row 1, we have two data points: Data 1 and Data 2. Similarly, in Row 2, we have two more data points: Data 3 and Data 4.
Ready to build a table in HTML?
We’ll start by using the "table" tag to indicate that we’re creating a table. Now that we’re inside the table, we’ll create the first row, Row 1, using the "tr" tag, which stands for "table row." Inside Row 1, we’ll create the first data cell using the "td" tag, which stands for "table data," and then the second data cell using the same "td" tag.
<!DOCTYPE html>
<html>
<head>
<title> Page title </title>
</head>
<body>
<table border="1">
<tr>
<td> Data 1 </td>
<td> Data 2 </td>
</tr>
</table>
</body>
</html>
At this point, your table will look like this.
To create a new row, just add another "tr" tag and insert two more "td" tags for the data cells.
<!DOCTYPE html>
<html>
<head>
<title> Page title </title>
</head>
<body>
<table border="1">
<tr>
<td> Data 1 </td>
<td> Data 2 </td>
</tr>
<tr>
<td> Data 3 </td>
<td> Data 4 </td>
</tr>
</table>
</body>
</html>
Your table will now look like this.
Now it’s time for your exercise. Look at Image 1 and Image 2, and try to replicate them in HTML. It’s important that you attempt this challenge because that’s the best way to reinforce what you've learned so far. The solution to this challenge will be revealed at the end of this article.
HTML Table Exercise 1
HTML Table Exercise 2
In the next video, you’ll learn what attributes are and how they work with HTML tags.
Homework Answer
- HTML Table Exercise 1 - Using TR and TD tags
<!DOCTYPE html>
<html>
<head>
<title>Exercise 1</title>
</head>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
</tr>
</table>
</body>
</html>
- HTML Table Exercise 2 - Using TR and TD tags
<!DOCTYPE html>
<html>
<head>
<title>Exercise 2</title>
</head>
<body>
<h2>Tic-Tac-Toe Game Board</h2>
<table border="1">
<tr>
<td>X</td>
<td>O</td>
<td>X</td>
</tr>
<tr>
<td>O</td>
<td>X</td>
<td>O</td>
</tr>
<tr>
<td>O</td>
<td>X</td>
<td></td>
</tr>
</table>
</body>
</html
