Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Using the colgroup and col elements, you can apply styles to columns and groups of columns in your tables. Let's make a working copy of table-semantic.html, and we'll go ahead and see how this feature works. I'll call this one -working, open that in the text editor. I'm just going to page through this real quick for those of you who are typing along at home. And we'll go ahead and open this in our browser as well. And let's take a look at how this feature works.
If we come down here into the table and right after caption and before thead-- and this element always must go after caption if there is any, otherwise right at the top of the table before any thead, tbody, tfoot, tr elements. And we come in here and we can type colgroup. I'll put an end tag also. And inside the colgroup we get columns, which are indicated with the col element. I'm just going to give them class as well.
I'll go ahead and copy and paste, because that will make this go faster. So what we have here is a colgroup element, which is a way of grouping columns together. See, the rows are already grouped together, because we have these elements. So it's possible to style a row just by styling tr. But there is no other way to style a column. If I wanted to style a column, I would have to put a Column 1 class on all of the Column 1 elements. But if I don't want to do that, there wasn't any way to that. So colgroup was invented to style columns.
So col, the first one represents this first column; the second one represents the second column; and the third one represents this third column. So now I can go and style these because I've given them class names: col1, col2, and col3. So I can style those class names with the class selector--col1--and let's just give it a background color. And I will make copies of these and give them different colors. Now when I save this and reload my browser, you notice these columns now have their own colors.
You notice that the footer is not styled, because the footer already has a color in it. If I take that color out of the footer and save that and reload, you'll see the footer gets the color as well. So the position of the col elements within the colgroup element are used to represent the position of the column. So the first col element represents the first column in the table, and likewise. On the other hand, it's possible for a col element to represent more than one adjacent columns, by using the span attribute.
So if I say span=2 and then take out one of these other columns, when I reload, now that first col element represents two adjacent columns. That allows you to style groups of columns rather than just individual columns. So the colgroup feature is very useful for applying style to columns or groups of columns in your tables.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 96615 Viewers
56 Video lessons · 110335 Viewers
71 Video lessons · 79163 Viewers
131 Video lessons · 37953 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.