ptg16476052276 LESSON 10: Building Tables
More Advanced Table Enhancements
Tables are laid out row by row, but HTML also provides some elements that enable you
to group cells into columns and modify their properties. There are also elements that
enable you to group the rows in tables so that you can manage them collectively.Grouping and Aligning Columns..................................................................
Sometimes it’s helpful to be able to apply styles to the columns in your tables rather than
applying them to individual cells or to rows. To do so, you need to define the columns in
your table with the <colgroup> and <col> elements.
The <colgroup>...</colgroup> element is used to enclose one or more columns in a
group. The closing </colgroup> tag is optional in HTML. This element has one attribute:
n span defines the number of columns in the column group. Its value must be an
integer greater than 0. If span isn’t defined, the <colgroup> element defaults to a
column group that contains one column. If the <colgroup> element contains one or
more <col> elements (described later), however, the span attribute is ignored.Suppose that you have a table that measures 450 pixels in width and contains six col-
umns. You want each of the six columns to be 75 pixels wide. The code looks something
like the following:
<table border="1" style="width: 450px;">
<colgroup span="6" style="width: 75px;"></colgroup>
</table>Now you want to change the columns. Using the same 450-pixel-wide table, you make
the first two columns 25 pixels wide and the last four columns 100 pixels wide. This
requires two <colgroup> elements , as follows :
<table border="1" style="width: 450px;">
<colgroup span="2" style="width:25px;"></colgroup>
<colgroup span="4" style="width:100px;"></colgroup>What if you don’t want all the columns in a column group to be the same width or
have the same appearance? That’s where the <col> element comes into play. Whereas
<colgroup> defines the structure of table columns, <col> defines their attributes. To use
this element, begin the column definition with a <col> tag. The end tag is forbidden in
this case.
Going back to your 450-pixel-wide table, you now want to make the two columns in the
first column group 75 pixels wide. In the second column group, you have columns of 50,