In tables where you’re taking advantage of the table header <th>, table head <thead>, table footer <tfoot> and table body <tbody> tags, you can style using those tags as selectors as well. Given that each of these tags can include many cells, and possibly many rows, a lot of ground can be covered by focusing on one area.

Similar to the way the above tags and the <tr> tag can style multiple cells across rows, the <colgroup> tag can help you set up an entire column (or columns) for styling.

The <colgroup> tag needs to be placed right after the opening <table> tag. This element provides a breakdown of the columns of your table. Each column, or column set, is representing by the <col> tag. These <col> tags go inside the <colgroup> element. So if you have a three-column table, you can identify each column individually by placing a <col> tag for each one. Note that the <col> tag is a void element, meaning it has no closing tag, and can not contain any content.

Your columns can also be grouped together by taking advantage of the span attribute. The span’s value will represent how many adjacent columns have been grouped together. You can combine your columns in any way you want, so long as they add up to the same total of individual columns. To demonstrate, using the same three-column table from above, add a span of “2” to the first <col> tag will “group” the first two columns. So any styling done in reference to that first <col> tag will apply to the first two columns of your table. Then you only need one more <col> tag to account for your total of three columns.

The easiest way to reference a <col> tag via selector, is to place an id or class on the column or column group you would like to target.