Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
This course introduces web designers to the nuts and bolts of HTML (HyperText Markup Language), the programming language used to create web pages. Author Bill Weinman explains what HTML is, how it's structured, and presents the major tags and features of the language. Discover how to format text and lists, add images and flow text around them, link to other pages and sites, embed audio and video, and create HTML forms. Additional tutorials cover the new elements in HTML5, the latest version of HTML, and prepare you to start working with Cascading Style Sheets (CSS).
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.
Find answers to the most frequently asked questions about HTML Essential Training.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.