About

Labels

slider

Recent

Navigation

how to merge multiple columns in HTML table

Table,one of the most using HTML tool ,usually used in our posts,widgets etc.But,sometimes their is a need to merge the columns for headings and different purposes and I also faced that issue before that is  why now I'm going to tell you to make this possible with simple attributes.
This is a example of the HTML table

HTML

<table border="1px">
<tr>
<td>This is column 1</td>
<td>This is column 2</td>
</tr>
<tr>
<td>This is column 1</td>
<td>This is column 2</td>
</tr>
<tr>
<td>This is column 1</td>
<td>This is column 2</td>
</tr>
</table>

Result

This is column 1This is column 2
This is column 1This is column 2
This is column 1This is column 2

Now lets move on to our issue.This is a simple attribute that merge the multiple columns.That is
colspan="n"
where n is the number of columns you want to merge.Here is an example.

HTML

<table border="1px">
<tr>
<td colspan="2">This column is now merged</td>
</tr>
<tr>
<td>This is column 1</td>
<td>This is column 2</td>
</tr>
<tr>
<td>This is column 1</td>
<td>This is column 2</td>
</tr>
</table>

Result 

This column is now merged
This is column 1This is column 2
This is column 1This is column 2

And you are done!
Share
Banner

Muhammad Hamza

Themelet provides the best in market today. We work hard to make the clean, modern and SEO friendly blogger templates.

Post A Comment:

0 comments: