DEV Community

Cover image for Understand Tables: HTML in 180 Seconds - Episode 5
Renato Junior
Renato Junior

Posted on

Understand Tables: HTML in 180 Seconds - Episode 5

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.

Rows in HTML Table

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>
Enter fullscreen mode Exit fullscreen mode

At this point, your table will look like this.

Table with a row in HTML

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>

Enter fullscreen mode Exit fullscreen mode

Your table will now look like this.

Table in HTML

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 Tables Exercise 1

  • HTML Table Exercise 2
    HTML Tables Exercise 1

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>

Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

Top comments (0)