HTML Table Merge Cells Horizontally
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Dikshita
In this tutorial we will show you the solution of HTML table merge cells horizontally, in HTML we all know that we are able to make tables. Tables are usually a combination of rows and columns and the intersection of them are called cells.
And sometimes we found that there is some data in tables which has long content and not properly fit in a cell. Because of this and some other reasons we have to merge cells horizontally.
With the help of merging, you are able to combine two or more cells with each other. This is also applied vertically if needed.
Step By Step Guide On HTML Table Merge Cells Horizontally :-
As, there are many ways to with the help of data can be presented in combination of cells. But the most used method is rowspan and colspan.
Whereas rowspan is used to combine rows. On the other side colspan is used to combine columns. It means that with the help of these the cells which are on right and downwards goes combined respectively.
Here, we will show you an example to merge cells horizontally. Whereas the merging of cells vertically will be showed in next article.
<!DOCTYPE html> <html> <head> <title> Title of the document<title> </head> <body> <table border="1px solid black"> <tr> <th colspan="2"> merging cells </th> <th> heading </th> </tr> <tr> <td> gifted </td> <td colspan="2"> merge these now </td> </tr> <tr> <td colspan="2"> this </td> <td> example </td> </tr> <tr> <td> Bheem </td> <td> 1st Standard </td> <td> Science </td> </tr> </table> </body> </html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Hence, here we use colspan to merge cells horizontally. As we see we want to combine two columns and one cells from both of them.
- With the concept of this we are able to merge cells horizontally in html table. We also show you how to combine two cells vertically also.
- You can apply this method to any row. And for this if the total number of cells are as example are four. Then in the row where cols is used you have to less the td column also. You are also able to more than two cells horizontally also.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, we want to say that colspan is used to merge cells horizontally whereas rowspan is discussed in next session.
You can also change the value of cells to merge and also able to change the number of row where you want to apply colspan. I hope this tutorial on HTML table merge cells horizontally helps you.
About Dikshita
