Colgroup and col: how do you specify?

HTML & CSS
1

Hey all,

I’m trying to set some definitions for columns in a table and am reading up on colgroup and col tags.

For colgroup, websites keep on referring to “span” as the definitive way to apply the tag to the column. However, this makes no sense to me.

So let’s put it another way:

If I have three columns in a table, and I want a colgroup to affect the third column—farthest from the left—how would I go about doing this?

Please feel free to let me know if I’m grossly getting it wrong, at any point.

Thank you!

2

I don’t understand what you mean by ‘I want a colgroup to affect the third column’.

A table can contain declarations of zero or more column groups.
If no explicit column group is declared, there will be one implicit column group comprising all columns.
For each column group, you can declare one or more columns, either using <col> tags or using a span attribute in the <colgroup> tag.
If a column group doesn’t contain any column declarations and has no span attribute, it will contain one implicit column.

Example #1, one implicit column group with three columns:

<table>
  <col>
  <col>
  <col>
  ...
</table>

Example #2, three explicit column groups with two, one and three columns, respectively:

<table>
  <colgroup>
    <col>
    <col>
  </colgroup>
  <colgroup></colgroup>
  <colgroup span="3"></colgroup>
  ...
</table>

So saying that a column group should ‘affect’ a specific column doesn’t make sense.
A column belongs to a column group; a group doesn’t ‘affect’ a column, it contains it.
If you have three columns, you can have one, two or three column groups.

From your description it sounds as if you have two groups, where the first group contains two columns and the second group contains one column. This is one way you can declare that,

<table>
  <colgroup span="2"></colgroup>
  <colgroup span="1"></colgroup>
  ...
</table>

Here’s another,

<table>
  <colgroup>
    <col>
    <col>
  </colgroup>
  <colgroup>
    <col>
  </colgroup>
  ...
</table>
1 Like
3

Thank you! That clears it up a bunch.

I’m thinking a lot with CSS—seeing HTML elements as needing to be altered as opposed to declared. But here, that is inaccurate.

Thanks again.