What Is Html Table Tag? | Create A Basic Html Table?

What Is Html Table Tag? | Create A Basic Html Table?

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

Let’s Get Started !!

What is Table?

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 an HTML table.
1. Define the <table> element

1:  <table>  
2:  </table>  

In the above piece of code, we have defined the opening and closing table tags. They are the base of the whole table in HTML.

2. Adding Rows & Data

1:  <table>  
2:     <!--Row 1-->  
3:    <tr></tr>  
4:     <!--Row 2-->  
5:    <tr></tr>  
6:     <!--Row 3-->  
7:    <tr></tr>  
8:  </table>  

In the above code, we’ve added 3 rows in the Table element table rows are added via <tr> tag. Now, let’s add some data to the rows.

1:  <table>  
2:     <!--Row 1-->  
3:    <tr>  
4:    </tr>  
5:     <!--Row 2-->  
6:    <tr>  
7:      <!--Table data-->  
8:     <td>5</td>  
9:     <td>3</td>  
10:    </tr>  
11:     <!--Row 3-->  
12:    <tr>  
13:      <!--Table data-->  
14:     <td>20</td>  
15:     <td>15</td>  
16:    </tr>  
17:  </table>  

As you might have noticed we’ve added the <td> tags i.e Table data, in between the Row tags along with the content in between them.

It should display output as follows :

What Is Html Table Tag? | Create A Basic Html Table?

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 heading to the table.

3. Adding Heading

1:  <table>  
2:     <!--Row 1-->  
3:    <tr>  
4:      <!--Table Heading-->  
5:      <th>&nbsp</th>  
6:      <th>Rachel</th>  
7:      <th>Joey</th>  
8:    </tr>  
9:     <!--Row 2-->  
10:    <tr>  
11:      <!--Table data-->  
12:     <th>No. of places visited</th>  
13:     <td>5</td>  
14:     <td>3</td>  
15:    </tr>  
16:     <!--Row 3-->  
17:    <tr>  
18:      <!--Table data-->  
19:     <th>No. of friends</th>  
20:     <td>20</td>  
21:     <td>15</td>  
22:    </tr>  
23:  </table>  

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


What Is Html Table Tag? | Create A Basic Html Table?
Table with added headings

Just after adding some heading, 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.

1:   <style>  
2:     table,td {  
3:         border: 1px solid black;  
4:        }  
5:  </style>  
6:  <table>  
7:     <!--Row 1-->  
8:    <tr>  
9:      <!--Table Heading-->  
10:      <th>&nbsp</th>  
11:      <th>Rachel</th>  
12:      <th>Joey</th>  
13:    </tr>  
14:     <!--Row 2-->  
15:    <tr>  
16:      <!--Table data-->  
17:     <th>No. of places visited</th>  
18:     <td>5</td>  
19:     <td>3</td>  
20:    </tr>  
21:     <!--Row 3-->  
22:    <tr>  
23:      <!--Table data-->  
24:     <th>No. of friends</th>  
25:     <td>20</td>  
26:     <td>15</td>  
27:    </tr>  
28:  </table>  



We’ve successfully created a basic HTML table. We have covered the Rows, Data, Headings, and Borders in this post. As to why I used CSS for border it’s just given me much more control and keeps the code clean.

Leave a comment below and let me know which way you’ll use for borders.
Written By: @Om Bandiwan

Check out more…..

1. instagram logo html code

2. add to cart button

3. hamburger menu javascript

Share on:

0 thoughts on “What Is Html Table Tag? | Create A Basic Html Table?”

Leave a Comment