How to create a table in HTML?

Santhosh Sudhaan
2 min readJun 6, 2021

What we’ll do:

Welcome to this blog, here in this blog we will write a HTML script to generate table in a Webpage

What tag should we use:

The <table> HTML element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data in it.

<table>Table_data_goes_inside_this</table>

What’s happening:

I am going to create a simple table with ( <table> )tag. The following table includes table rows (<tr>) for inserting every new row in the table, table headers (<th>) for adding and table data cells (<td>).

I also add borders to the table with the style element.

Step 1: Ok, now lets traverse through the code, first of all inside the style tag I am styling the table, td and th tags with border of 1x with solid black colour.

Step 2: Next, I am inside the table tag, i am creating “<tr>” tag to create a new row and inside that i am creating “<th>” tag to name the headings and then i am closing both the opened tags

Step 3: Now, The table is created with heading. The only thing left is we need to add data. For that I’m gonna create another row with “<tr>” tag and inside that i am going to give the table data with “<td>” tag. Finally I am closing every opened tag including “<table>” tag.

Source Code:

<style>
table, td, th {
border: 1px solid black;
}
</style>
<table>
<tr>
<th>The table header</th>
<th>There we go</th>
</tr>
<tr>
<td>The table body</td>
<td>with two columns</td>
</tr>
</table>

Output:

What we learnt:

Through this blog, you learnt how to create a table in html with <table> tag using <tr><th><td> tags.

Thank you.

Also refer:

--

--