Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

242 CHAPTER 5 More HTML5

<colgroup> element, <col> elements are added for each column to be styled. The <col> ele-

ment has a span attribute that identifies multiple columns that will have the same style.

In the previous examples, the <colgroup> and <col> elements can provide a style for the

vertical headers, but this time, you want to apply a style to the first two columns. You can

define the columns as follows.

<colgroup>

<col span="2" class="verticalHeader" />

</colgroup>

This example defines the first two columns to have a style of verticalHeader. The vertical-

Header class is set to apply a gray background color as follows.

.verticalHeader {

background-color: #C0C0C0;

}

In addition, the existing style for the first column has been removed. Figure 5-17 shows the

rendered webpage.

FIGURE 5-17 Using the <colgroup> and <col> elements to apply a style to multiple columns

Lesson summary

■■Refrain from using the <table> element for page layout.

■■A <tr> element creates a table row. A <td> element creates a table cell in a table row.

■■To identify a header cell, use the <th> element instead of using the <td> element.

■■Use the <thead> element to specify table rows that comprise the table header. Use the

<tfoot> element to specify table rows that comprise the table footer. Use the <tbody>

element to specify data rows. You can group data rows by specifying many <tbody>

elements.

■■Use the rowspan and colspan attributes on the <th> and <td> elements to create

irregular tables.