Colspan and rowspan is very commonly used in web design structures. Rather, it was used previously heavily due to the usage of HTML table element, However, now the W3C has mentioned a standard that designs on the web should be table-less designs.
Even proper SEO and algorithms from major search engines like Google or Bing demand that your website design contains minimal number or absolutely zero number of tables.
Colspan and rowspan are used to define table structure in HTML in a way that is beyond the default layout.
Let us directly look into the usage of the two attributes.
Why is HTML Colspan and rowspan used?
Colspan and rowspan are used in html table tags. HTML tables consists of cells, just like in Microsoft Excel.
So, each cell has a definite width and height. In fact, when we declare multiple rows and columns, they form a matrix. In a matrix, we have multiple cells at the junction of rows and columns.
Now let us think of a scenario. Suppose you want your row number one to have three columns and then in your row number two, you want the first two columns to merge into one and the third one to remain as it is.
I think you can already relate it.
Colspan and rowspan helps when the inner content is large enough such that it would not fit into one of the cells.
Well, in situations such as the one mentioned above, we use colspan and rowspan. This scenario is very common while we design webpages.
HTML provides a feature for that. Although, table-less designs are the latest recommendation by the W3C for developing webpages; colspan and rowspan come into play in such situations.
Understanding colspan and rowspan syntax
- Colspan is used when we want the particular column to span for more than one cells.
- Rowspan is used when we want the row to spread or span for more than one rows.
Suppose we have 2 rows and 3 columns in a table. So, we have 6 cells.
Now, in the first row, we want the first cell to take up the space for two cells horizontally. We use a colspan here. We declare the colspan as an attribute for the first “td” element in the first “tr” element.
Once that is done, the table would look like the following –
Suppose we have 2 rows and 3 columns in a table, and so 6 cells.
Now, we want the first row itself to take up the space for two rows. So, the columns would get increased in height.
In order to do this, we should remove the second “tr” tag and add a rowspan of 2 to the first “tr” tag.
After implementing this, the result would be like this –
You can easily understand the concept with the following code snippet –
Some points to remember
As you can see, I have implemented colspan and rowspan within a table.
You must always keep these in mind! Otherwise your code might behave wayward..
- Colspan and rowspan can be applied only to table rows and columns. They are not applicable to list items.
- When you are applying a colspan or a rowspan, you must always remember to remove the extra cell (or row) for which the spanned item is taking the place.
So, while using colspan, if you are giving a colspan of 2, then remember, it is taking a space for 2 columns. So, now the “tr” must have only 2 “td” (if initially it was having 3 “td”.
Similarly, for rowspan, if you are having 2 rows initially; you must have only 1 “tr” when you have applied a rowspan of 2 on the first “tr”.
That’s it! Give it a try and do let me know.