How to make Tables using HTML Codes/Tags

Hi folks! Today we will be learning about creating tables using HTML tags. To do so, we first need to know about the different tags that are used in creating tables.

1. <table> It defines a table.

2. <tr> It is a table row in a table.

3. <th> It is a table header in a table.

4. <td> It is table data in a table.

Now, let's start with making tables using HTML tags.
We will first give the code along with the heading and data. Let's see how it goes!
<table border=10> <tr> <th>Name</th> <th> Roll no.</th> <th>Result</th> </tr> <tr> <td>Saleem</td> <td>10</td> <td>Pass</td> </tr> <tr> <td>Shahid</td> <td>11</td> <td>Pass</td> </tr> <tr> <td>Reshma</td> <td>12</td> <td>Pass</td> </tr> <tr> <td>Modi</td> <td>13</td> <td>RE PS</td> </tr> </table>
We first have given the table tag and set border to 10, you can set as per your requirements. In table heading (th) and table data (td) you can give your information. Repeat table row (tr) and table data (td) tag if you further need to add table rows and table data to fill the more information.
Since we gave the code, let's see how demo looks when we run this code:

Name	Roll no.	Result
Saleem	10	Pass
Shahid	11	Pass
Reshma	12	Pass
Modi	13	RE PS

Now, let's include cell padding and cell spacing attributes in a table.
Cell padding defines the space between cell borders and the cell content.
Cell spacing defines the space between tables cells.
All we have to do is, add attribute to the table tag and see the difference. Rest you can set the same.
<table border ="10" cellpadding="5" cellspacing="5" > Set rest the same</table>
Here's what we got:

Name	Roll no.	Result
Saleem	10	Pass
Shahid	11	Pass
Reshma	12	Pass
Modi	13	RE PS

Let's now add pictures to the table. If you have read our previous topic that was about Basic HTML Tags, you can easily recall the tag for including a picture. However, we'll still give it here.
<img src="image url">
This tag we will have to give in table data (td tag) to display the picture
<table border = "10" cellpadding = "5" cellspacing = "5"> <tr> <th>Name</th> <th> Roll no.</th> <th>Result</th> <th> Photo</th> </tr> <tr> <td>Saleem</td> <td>10</td> <td>Pass</td> <td> <img src="image address"></td> </tr> <tr> <td>Shahid</td> <td>11</td> <td>Pass</td> <td> <img src="image address"> </td> </tr> <tr> <td>Reshma</td> <td>12</td> <td>Pass</td> <td><img src="image address"> </td> </tr> <tr> <td>Modi</td> <td>13</td> <td>RE PS</td> <td> <img src="image address"> </td> </tr> </table>
Let's see the output of this code now:

Name	Roll no.	Result	Photo
Saleem	10	Pass
Shahid	11	Pass
Reshma	12	Pass
Modi	13	RE PS

That's it! I hope you got it. However, if you still have any confusion or get errors, leave a comment. Ciao!