CIS234A Lecture 9 Instructor Greg D’Andrea

Working with Table's Column Groups We've formatted the content of the table columns by modifying the attributes of individual cells within a column. We can also organize the columns into column groups and format one or more columns with a single style declaration or attribute. The element is used to define a column group. The element can be expressed either as a one-sided element or a two-sided element.

Working with Table’s Column Groups One-sided tag To define a column group, insert the following element into the table structure: – where value is the number of columns in the groups.

One-sided tag Placement of the tag: The colgroup element should be directly after the opening tag. However, for a table that includes a caption, it should be placed directly after the tag.

One-sided tag Here is an example of how to organize a table with five columns into two column groups: one group for the first 2 columns and one group for the last 3 columns: – (Note: the above lines must be placed directly after the or tag)

One-sided tag If you want display the first two columns with a white background and the last three with a yellow background, the HTML code would be:

Two-sided tag The colgroup element can also be expressed as a two-sided element. The following HTML code demonstrates how it's used:

Two-sided tag Essentially the previous code creates a column group of three columns with as a white background. Within this column group, the first column uses black as the text color; the second column has red text; and the third column has blue text.

Two-sided tag The syntax for the two-sided tag is: …. – where the one-sided tag is used to define one or more single columns within the column group.

Two-sided tag The element can also be used along with the span attribute to format several columns with a group. Here is an example:

Two-sided tag In the previous case, the column group consists of five columns: the first two columns contain black text, the third column contains red text and the last two columns contain blue text.

Quiz Time Quiz Next Friday Elements: – html, head, title, body, pre, table, tr, th, td, caption Attributes: – style: background-color, color – colspan,rowspan – border,cellspacing,cellpadding,width (in table) – align (in caption)