What is colspan and rowspan in HTML tables

What is colspan and rowspan in HTML tables

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

  1. Colspan is used when we want the particular column to span for more than one cells.
  2. Rowspan is used when we want the row to spread or span for more than one rows.

Using colspan

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 –

colspan and rowspan in html tables colspan

Using rowspan

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 –

colspan and rowspan in html tables

You can easily understand the concept with the following code snippet –

See the Pen HTML Colspan and Rowspan example by Kaustav Banerjee (@kaustavbanerjee) on CodePen.

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..

  1. Colspan and rowspan can be applied only to table rows and columns. They are not applicable to list items.
  2. 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.