Should I use <colgroup> and <col>, and if so, why and how?

Question

I've been trying to use properly the colgroup and the col tags but I don't get it. I read the specification and all that but I don't understand its purpose or how to implement it.

Answer 1

A colgroup is used in a table element to help understand complex hierarchy of information within tables with irregular headers.

The WAI has a complete information page about how to handle such situation: Tables with irregular headers and understand the use of col and colgroup

To associate the first-level headers properly with all cells of both columns, the column structure needs to be defined at the beginning of the table. A <col> element identifies each column, beginning on the left. If a header spans two or more columns, use a <colgroup> element instead of that number of <col> elements, and the number of columns spanned is noted in the span attribute.

That being said, the best use case for those elements is for styling columns without repeating the style or class attributes:

<table>
  <colgroup>
    <col style="background-color:red">
    <col style="background-color:yellow">
    <col style="background-color:blue">
  </colgroup>
  <tr>
    <th>First</th>
    <th>Second</th>
    <th>Third</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

Answer 2

This is why we should use colgroup and col: Access to everyone regardless of disability.

I am coding for the last 4 months and I’ve been reading, watching tutorials, asking, coding again, etc. I personally thing the WWW has to be for everyone, and while learning I discovered that HTML5 was made with that intention. Few days ago, I was coding a table and I was introduced to a tags I never saw before, the colgroup and the col tags. At the beginning I didn’t pay too much attention until this tags started to bother me, why it exist? How I have to use it? It is mandatory to declare them? What happen if I don’t use them at all?

Well I personally like to know how things works, so I stated my research asking on the web how to use these tags. I found good information in so many blogs, but most of the info I found was somehow confusing. Some articles talked about these tags as a way to style columns, other articles mentioned them as a way to have a better workflow while working with tables, but there is a website that explained in the right way. I finally understood the why, the how and I just want to share this info with you.

The colgroup tag is the way to declare a group of columns within a table, while col is the way to declare single columns. According to the W3C specification, col tag can be inside or outside the colgroup tag, and if the col tag is inside the colgroup tag, then the colgroup tag can’t have the span=”” attribute since the span inside the col tag will overwrite it.

Example 1 – good use of the colgroup and col tags.

<col>
<colgroup span="2"></colgroup>
<colgroup>
<col span="3">
</colgroup>

Example 2 – bad use of the colgroup and col tags.

<col>
<colgroup span="2"><colgroup>
<colgroup span="2">
<col span="3">
</colgroup>

In the Example 2, the second colgroup was declared to span 2 columns, but inside was declared a col tag that overwrite this command and now is telling to the UA to span 3 columns instead of 2. And why this is a problem? As I mention before, I like to know how things works, so researching I found something that is called the “section 508” that is part of the “Rehabilitation Act” that the former President Clinton signed in 1998, and this section 508 talks about how to use the actual technology to make the information accessible to people with disabilities. Now, imagine a person who can’t see properly and he/she has to relay on a screen reader to get access to the info posted in a website, such website has a table and if this table has a wrong markup… then, well the user will get the information wrong or may not get it at all. And that’s a problem, Tim Berners-Lee, the W3C Director and inventor of the World Wide Web says about the web:

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.

So by marking up our content we are not only making our content available to everyone but also we are getting a lot of benefits:

There is also a strong business case for accessibility. Accessibility overlaps with other best practices such as mobile web design, device independence, multi-modal interaction, usability, design for older users, and search engine optimization (SEO). Case studies show that accessible websites have better search results, reduced maintenance costs, and increased audience reach, among other benefits. Developing a Web Accessibility Business Case for Your Organization details the social, technical, financial, and legal benefits of web accessibility.

The previous w3.org quote was found here:

Besides colgroup and col there are also other tags we should use (it is not mandatory to implement this, but as a web developers, and in my opinion, is our duty to design and implement content available to everyone regardless their abilities or absence of any of it) like , and which I am not going to explain since there are a lot of good articles about it. My intention with this contribution is only to explain what I couldn’t find on the web as a general explanation of the use of these tags (besides the website I mentioned earlier). I hope this information could be useful for someone as it was for me.