HTML Tables: Create your first HTML Table

If you have data to display in rows and columns, then, HTML provides you tags that you can use to arrange your data into rows and columns. In other words, we use HTML tables to display data in tabular format. In this post, we will see how to create a table in HTML. You can beautify the table using CSS. So, without further ado, let’s see how to create an HTML table.

We use the <table> tag to create the table. To create a row, we use the <tr> tag, and the <th> and <td> tags are used to create the table headings and cells, respectively. Let’s see some examples now.

First I will give you an example of HTML table without applying CSS. And, then, an example with CSS applied.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML Tables</title>
    </head>

    <body>
        <table>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
            </tr>
            <tr>
                <td>Data 4</td>
                <td>Data 5</td>
                <td>Data 6</td>
            </tr>
            <tr>
                <td>Data 7</td>
                <td>Data 8</td>
                <td>Data 9</td>
            </tr>
        </table>
    </body>
</html>

<th> stands for table header.

<tr> stands for table row.

And, <td> stands for table data.

Let’s see the output now.

You can see the table in the screenshot above. It is a simple table without any styles applied to it. Now, I will apply some styles to it to make it look better.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML Tables</title>
    </head>

    <style>
        table{
            width: 50%;
            height: 200px;
            border-collapse: collapse;
        }
        th, td{
            border: 2px solid black;
        }

        tr:nth-child(even){
            background-color: beige;
        }
    </style>

    <body>
        <table>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
            </tr>
            <tr>
                <td>Data 4</td>
                <td>Data 5</td>
                <td>Data 6</td>
            </tr>
            <tr>
                <td>Data 7</td>
                <td>Data 8</td>
                <td>Data 9</td>
            </tr>
        </table>
    </body>
</html>

Output:

After applying some styles to the table, it looks a little better now.

One more HTML table tag that I want to talk about is the <caption> tag.

If you want to display a title for the table, then you can use the <caption> tag. Or, you can use this tag to add a description of the table’s content. The text inside the caption tag appears at the top of the table. Now, let’s see the same example with the <caption> tag.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML Tables</title>
    </head>

    <style>
        table{
            width: 50%;
            height: 200px;
            border-collapse: collapse;
        }
        th, td{
            border: 2px solid black;
        }

        tr:nth-child(even){
            background-color: beige;
        }
    </style>

    <body>
        <table>
            <caption>HTML Table Example</caption>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
            </tr>
            <tr>
                <td>Data 4</td>
                <td>Data 5</td>
                <td>Data 6</td>
            </tr>
            <tr>
                <td>Data 7</td>
                <td>Data 8</td>
                <td>Data 9</td>
            </tr>
           
        </table>
    </body>
</html>

You can see in the above code that I have used the <caption> tag to show the text “HTML Table Example” at the top of the table.

Output:

Now, it’s time to end the post here.

Goodbye.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: