Advanced HTML Tables Examples

If you know to create a general table in HTML then learn more at an advanced level. In this article, I tell about advanced HTML tables with examples and we will also look at some table tags and attributes.

What is an advanced HTML table?

HTML5 has some advanced features for tables i.e. attributes and tags, we can use it to create tables as we want. You can create a table by splitting a table column into two, a specific cell in a row into two, and so on, you can split the table however you want. So, you can easily finish your work using an advanced table. Let’s take a look at advanced attributes in HTML tables

Advanced Attributes in HTML tables

There are two important attributes of table cells those are “rowspan” and “colspan“. We use these attributes to merge table cells. For these two attributes, we need to give a numeric value of how many cells we want to merge.

• colspan attribute – To merge table cells into columns
• rowspan attribute – To merge table cells into rows

Colspan Attribute

<table border="1" cellpadding="5px">
<tr>
<th colspan="3">Heading 1</th>
</tr>

<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
</tr>

<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
</tr>
</table>

Output:

In the above code, I have created a 3×3 ie 3rows, and 3columns table. Now to span the 1st heading row, use the colspan attribute and give it a value of “3”, then all the cells in the 1st row will be merged. Since we have 3 columns, we have given the value as 3. If there were 4 columns, we can give the value as 4.

Suppose you have created a table with 4 columns. Now if you want to merge only specified 2 cells, you can use colspan attribute in <td> tag to merge and give the value ‘2’. Then we need to remove one <td> tag because if two cells merge into 4cells, there will be 1 extra cell and we need to remove it.

Merge Specific cells using Colspan

<table border="1" cellpadding="5px">
<tr>
<td colspan="2">Heading 1</td>
<td >Heading 2</td>
</tr>

<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
</tr>

<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
</tr>
</table>

Result:

Rowspan Attribute

<table border="1" cellpadding="5px">
<tr>
<td rowspan="3">Heading 1</td>
</tr>

<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
</tr>

<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
</tr>
</table>

Output:
In the above code, same as I have created colspan example 3×3 table. Now to span the 1st column in the table, use the rowspan attribute in the first row <td> tag and give the value as 3 as in the above code. See the above output, the three cells of the first row in the table are merged. You can also merge specific cells in Rowspan.

Merge Specific cells using Rowspan

<table border="1" cellpadding="5px">
<tr>
<td >Heading 1</td>
<td >Heading 2</td>
<td >Heading 2</td>
</tr>

<tr>
<td rowspan="2"> row _, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
</tr>

<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>

</tr>
</table>

Result:

Advanced tables tags in HTML

There are three advanced table tags those are <thead>, <tbody> and <foot> tags.

<thead> tag

Using this tag we have to give only the header of the table. Suppose there is a lengthy table, if you scroll the table, the above table heading will not display. So, if we want the table heading to be sticky we need to put the heading inside the <thead> tag. Similarly, s.no, description, etc. can be given in the heading within the <thead> tag.

<tbody> tag

In the body section, we can give any data in the table.

<tfoot> tag

You can give footer values like total inside the <tfoot> tag. You can use <tfoot> in your table footer, the footer will be sticky when scrolling the table.

Example:

<table border="3" cellpadding="5px">
<thead>
<th>S.no</th>
<th>Description</th>
<th>Amount</th>
</thead>

<tbody>
<tr> <td>1</td>
<td>Soap</td>
<td>50</td></tr>

<tr> <td>2</td>
<td>Powder</td>
<td>40</td></tr>

<tr> <td>3</td>
<td>Perfume</td>
<td>90</td></tr>
</tbody>

<tfoot>
<th colspan="2">Grand Total</th>
<th>180</th>
</tfoot>
</table>

Output:Conclusion

In this article I have told about advanced 2attributes and 3tags. With this you can create the table however you want