In this tutorial, I show you how to create an HTML table step by step. if you are a newbie in HTML that are various HTML table creator tools available that can be used to create an HTML table. But it would be great if you learn the table structure and create it on your own.
HTML table creator/generator
Example -1
<table>
<tr>
<th>Employee Name</th>
<th>Age</th>
<th>Location</th>
</tr>
<tr>
<td>Barb</td>
<td>45</td>
<td>Chicago</td>
</tr>
<tr>
<td>Mike</td>
<td>35</td>
<td>New York</td>
</tr>
<tr>
<td>Chris</td>
<td>32</td>
<td>London</td>
</tr>
<tr>
<td>Joe</td>
<td>56</td>
<td>New York</td>
</tr>
</table>
Output
| Employee Name | Age | Location |
|---|---|---|
| Barb | 45 | Chicago |
| Mike | 35 | New York |
| Chris | 32 | London |
| Joe | 56 | New York |
This is the Html table structure below are steps to create the same –
- Open one notepad file and copy-paste the above structure and save the same using the .html extension.
- When you open the HTML file will look like below –
- The <table> tag is the starting point to create the table.
- Here the heading is created using the <th> tag and each row is created using the <tr> tag knowns as a table row.
- The <td> is used to create the table data. you can create as many <td> tag inside the <tr> tag.
Example 2:
if you want to format the table if you want to add the background color and border in each <tr> then a CSS can be used like below –
<style>
table, th, td {
border: 1px solid black;
}
th{
background-color:#FFA500;
}
</style>
<table>
<tr>
<th>Employee Name</th>
<th>Age</th>
<th>Location</th>
</tr>
<tr>
<td>Barb</td>
<td>45</td>
<td>Chicago</td>
</tr>
<tr>
<td>Mike</td>
<td>35</td>
<td>New York</td>
</tr>
<tr>
<td>Chris</td>
<td>32</td>
<td>London</td>
</tr>
<tr>
<td>Joe</td>
<td>56</td>
<td>New York</td>
</tr>
<tr>
<td>Nick</td>
<td>28</td>
<td>San Francisco</td>
</tr>
</table>
Here style tag is used to apply the CSS style to the HTML elements.
Conclusion
This is how the HTML table is created. You can practice it and add more data to it.