HTML

HTML Lesson 11: How to create a Table in HTML?

In this knowledge bit, we are going to focus on table in HTML. We will learn further more about the styling of the table in CSS.

The HTML <table> element represents tabular data — that is, information expressed via a two-dimensional data table.

Table in HTML

Creating Table Row in HTML

To create the simple row in HTML table, here is the format below:

The first thing I am going to do is to create table element and then inside table element create tr element, tr also called table row, then create td element within tr element.




<table> <!--Table Element-->

<tr> <!--Tr element also called table row-->

<td>London</td>

<td>Paris</td>

</tr>

<tr>

<td>New York</td>

<td>Toronto</td>

</tr>

</table>

       

Adding Border in HTML Table

For border, we are initially using CSS tag i.e : <table border= “1” >

<table border="1"> <!--Table Element-->

<tr> <!--Tr element also called table row-->

<td>London</td>

<td>Paris</td>

</tr>

<tr>

<td>New York</td>

<td>Toronto</td>

</tr>

</table>
       

Creating Heading in HTML Table

In order to give heading to each row, you need to write this tag in HTML

<th> </th>

Practical Illustration

Here we are creating simple structures table:

  • In the first block, we are creating Table headers i.e: Name, Age, and Gender
  • In the second block, we are entering the Data respectively
  • You can add as many as the entry you want by copying the same format.

 

<body>

<h1>Practicing HTML table</h1>

<table border="1">

<tr>

<th>Name</th>

<th>Age</th>

<th>Gender</th>

</tr>

<tr>

<td>Diana</td>

<td>22</td>

<td>Female</td>

</tr>

<tr>

<td>Ghazil</td>

<td>35</td>

<td>Male</td>

</tr>

<tr>

<td>Jazzy</td>

<td>20</td>

<td>Male</td>

</tr>

<tr>

<td>Danny</td>

<td>23</td>

<td>Male</td>

</tr>

</table>

</body>
       

Web page:

Table in HTML Example

Tables Avengers Exercise


This time we are doing slightly different, we have been following the data below, and we need to convert these text into a table.

Name:  Captain America

Image:  https://i.annihil.us/u/prod/marvel/i/mg/9/80/537ba5b368b7d.jpg

Height: 6’2″

Group Affiliations:  Secret Avengers https://marvel.com/characters/8/captain_america

 

Name:  Iron Man

Image: https://i.annihil.us/u/prod/marvel/i/mg/c/60/55b6a28ef24fa.jpg

Height: 6’1″

Group Affiliations: S.H.I.E.L.D/ the Avengers

 

Name:  Spider-Man

Image: https://i.annihil.us/u/prod/marvel/i/mg/6/60/538cd3628a05e.jpg

Height: 5’10”

Group Affiliations:  Avengers/Secret Defender

Now we need to make the 4 rows and 4 columns. Then we need to apply table tags. Illustration is giving below

Script and Web page

<body>
<h1>Avengers</h1>

<table border="1">
<thead>
<tr>
<th>Image</th>
<th>Name</th>
<th>Height</th>
<th>Group Affiliations</th>
</tr>
</thead>

<tbody>
<tr>
<td><img width="150px" height="150px" src="https://i.annihil.us/u/prod/marvel/i/mg/9/80/537ba5b368b7d.jpg"></td>
<td>Captain America</td>
<td>6'2"</td>
<td><a href="https://marvel.com/characters/8/captain_america">Secret Avengers</a></td>
</tr>
<tr>
<td><img width="150px" height="150px" src="https://i.annihil.us/u/prod/marvel/i/mg/c/60/55b6a28ef24fa.jpg"></td>
<td>Iron-Man</td>
<td>6'1"</td>
<td><a href="https://marvel.com/characters/29/iron_man">S.H.I.E.L.D/ the Avengers</a></td>
</tr>
<tr>
<td><img width="150px" height="150px" src="https://i.annihil.us/u/prod/marvel/i/mg/6/60/538cd3628a05e.jpg"></td>
<td>Spider-Man</td>
<td>5'10"</td>
<td><a href="https://marvel.com/characters/54/spider-man">Avengers/Secret Defender</a></td>
</tr>

</tbody>

</table>
</body>

Output

Avengers Excercise Tables in html

Conclusion:

In this knowledge bit, we have learned how can we create a Table in HTML. We have focused on the structure of the table, and in the next knowledge bit, We are going to write simple HTML form by using form tag.

Click to comment

Most Popular

To Top