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 RowsDataHeadings, 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 the 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 :


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.


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 RowsDataHeadings, 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


Post a Comment

Previous Post Next Post