Learn How to Create Table in HTML (Tutorial of Learn HTML Table)

Today we’ll learn about how to create a table in HTML With examples. In today’s topic, we’ll cover Rows, Data, Headings, and Borders In Table.

Let’s Get Started !!

What is Table in HTML?

One might wonder what exactly is Table or how can we define a Table?
The table is nothing but the representation of data in structured rows and columns, they are widely used in the Share Markets for Stockpricing purposes as well as in the Banking sectors or in Sports for displaying the Scores.

Creating a Table in HTML

1. Define the <table> element

<table> 
</table>

<table>
    <!--Row 1-->
    <tr></tr>
    <!--Row 2-->
    <tr></tr>
    <!--Row 3-->
    <tr></tr>
</table>

<table>
    <!--Row 1-->
    <tr></tr>
    <!--Row 2-->
    <tr>
        <!--Table data-->
        <td>5</td>
        <td>3</td>
    </tr>
    <!--Row 3-->
    <tr>
        <!--Table data-->
        <td>20</td>
        <td>15</td>
    </tr>
</table>

Output

From the output above users can’t quite understand what exactly are we trying to present in the table.  For better understanding let’s add some headings to the table.

3. Adding a Heading

<table>
    <!--Row 1-->
    <tr>
        <!--Table Heading-->
        <th>&nbsp</th>
        <th>Rachel</th>
        <th>Joey</th>
    </tr>
    <!--Row 2-->
    <tr>
        <!--Table data-->
        <th>No. of places visited</th>
        <td>5</td>
        <td>3</td>
    </tr>
    <!--Row 3-->
    <tr>
        <!--Table data-->
        <th>No. of friends</th>
        <td>20</td>
        <td>15</td>
    </tr>
</table>

In the above code to add the Headings, we have used the <th> tag.

What is Flexbox in CSS? Learn flexbox With Example

Output:-

Table with added headings

Just after adding some headings, we can tell exactly what the data in the table is about.

4. Adding borders

Even though we have successfully represented the data, It is still not visually appealing to the users, to deal with this we have to add Borders so that the table is more convenient to read.
We’ll be using some CSS for adding the borders instead of the Border attribute.

<style>
    table,
    td {
        border: 1px solid black;
    }
</style>
<table>
    <!--Row 1-->
    <tr>
        <!--Table Heading-->
        <th>&nbsp</th>
        <th>Rachel</th>
        <th>Joey</th>
    </tr>
    <!--Row 2-->
    <tr>
        <!--Table data-->
        <th>No. of places visited</th>
        <td>5</td>
        <td>3</td>
    </tr>
    <!--Row 3-->
    <tr>
        <!--Table data-->
        <th>No. of friends</th>
        <td>20</td>
        <td>15</td>
    </tr>
</table>

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Output: