In HTML table, merging cells is a very common work to do. The term "merging cells" means joining two or more columns / rows.
Image 1: A Schedule Table created |
This table is created in excel which is very easy to do. But if someone wants to build this same table by using HTML. It is not that hard either. Just need to add an attribute in td tag of the HTML table. I'll explain it latter , but first check out the HTML code here.
Image 2: The same Schedule Table Created |
In Image 2 you can see the output. From the mentioned link you can see that in td tag of the table I have used two types of attributes. One is rowspan , another one is colspan . rowspan merges rows that means it will work vertically. On the other hand colspan will work horizontally, meaning it will join columns together. The digit after this attribute states the number of the cells will be merged. So, if we use rowspan="2" that means we are merging 2 rows.
Image 3a: HTML Table |
The most interesting situation happened when I had to place "Thesis" in the table. If you look carefully
Image 3b: Merging rows and columns at |
In Image 3b check the selected line. Here I have used rowspan and colspan together to merge rows and columns at the same time.
This process makes the table look less clumsy and easily understandable.
Source code???
ReplyDeletehttp://jsfiddle.net/65thqksu/
Delete