ptg <td>10mm</td> <td>5-7mm</td> <td rowspan=”2”>5-7mm</td> </tr> <tr style=”text-align: center”> <td style=”text-align: left”>Models with AC</td> <td>12mm</td> <td>6-8mm</td> </tr> <tr style=”text-align: center”> <th colspan=”2” style=”text-align: left”>Power Steering Oil Pump</th> <td>12.5mm</td> <td>7.9mm</td> <td>6-8mm</td> </tr> </table> </body> </html> 296 LESSON 10: Building Tables Under normal circumstances, avoid the use of the style attribute and instead use a style sheet for the page and apply classes where necessary to style your table. Using the style attribute is the least efficient way to apply styles to a page, but it makes the example more readable. 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 to manage them collectively as well. Grouping and Aligning Columns Sometimes it’s helpful 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, but it’s required by XHTML. This element has two attributes: 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 NOTE , ▲ Download from www.wowebook.com ptg column group that contains one column. If the <colgroup> element contains one or more <col> elements (described later), however, the span attribute is ignored. n width specifies the width of each column in the column group. Widths can be defined in pixels, percentages, and relative values. You also can specify a special width value of “0*” (zero followed by an asterisk). This value specifies that the width of each column in the group should be the minimum amount necessary to hold the contents of each cell in the column. If you specify the “0*” value, how- ever, browsers will be unable to render the table incrementally (meaning that all the markup for the table will have to be downloaded before the browser can start displaying it). Suppose that you have a table that measures 450 pixels in width and contains six columns. You want each of the six columns to be 75 pixels wide. The code looks some- thing like the following: <table border=“1” width=“450”> <colgroup span=“6” width=“75”> </colgroup> 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” width=“450”> <colgroup span=“2” width=“25”> </colgroup> <colgroup span=“4” width=“100”> </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 <col- group> 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. Instead, use the XHTML 1.0 construct for tags with no closing tag and write the tag as <col />. 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, 75, 75, and 100 pixels, respectively. Here’s how you format the second column group with the <col> tag: More Advanced Table Enhancements 297 10 Download from www.wowebook.com ptg <table border=“1” width=“450”> <colgroup span=“2” width=“75” /> </colgroup> <colgroup> <col span=“1” width=“50” /> <col span=“2” width=“75” /> <col span=“1” width=“100” /> </colgroup> Now apply this to some real code. The following example shows a table that displays science and mathematics class schedules. Start by defining a table that has a one-pixel- wide border and spans 100% of the browser window width. Next, you define the column groups in the table. You want the first column group to dis- play the names of the classes. The second column group consists of two columns that display the room number for the class, as well as the time that the class is held. The first column group consists of one column of cells that spans 20% of the entire width of the table. The contents of the cell are aligned vertically toward the top and centered horizon- tally. The second column group consists of two columns, each spanning 40% of the width of the table. Their contents are vertically aligned to the top of the cells. To further illustrate how colgroup works, I use the style attribute and background-color property to set each of the column groups to have different background colors. Finally, you enter the table data the same way that you normally do. Here’s what the complete code looks like for the class schedule, and the results are shown in Figure 10.30: Input ▼ <!DOCTYPE html> <html> <head> <title>Grouping Columns</title> </head> <body> <table border=“1” width=“100%” summary=“Grouping Columns”> <caption><b>Science and Mathematic Class Schedules</b></caption> <colgroup width=“20%” align=“center” valign=“top” style=“background-color: #fcf”></colgroup> <colgroup span=“2” width=“40%” valign=“top” style=“background-color: #ccf”></colgroup> 298 LESSON 10: Building Tables Download from www.wowebook.com ptg <tr> <th>Class</th> <th>Room</th> <th>Time</th> </tr> <tr> <td>Biology</td> <td>Science Wing, Room 102</td> <td>8:00 AM to 9:45 AM</td> </tr> <tr> <td>Science</td> <td>Science Wing, Room 110</td> <td>9:50 AM to 11:30 AM</td> </tr> <tr> <td>Physics</td> <td>Science Wing, Room 107</td> <td>1:00 PM to 2:45 PM</td> </tr> <tr> <td>Geometry</td> <td>Mathematics Wing, Room 236</td> <td>8:00 AM to 9:45 AM</td> </tr> <tr> <td>Algebra</td> <td>Mathematics Wing, Room 239</td> <td>9:50 AM to 11:30 AM</td> </tr> <tr> <td>Trigonometry</td> <td>Mathematics Wing, Room 245</td> <td>1:00 PM to 2:45 PM</td> </tr> </table> </body> </html> More Advanced Table Enhancements 299 10 Download from www.wowebook.com ptg Grouping and Aligning Rows Now that you know how to group and format columns, let’s turn to the rows. You can group the rows of a table into three sections: table heading, table footer, and table body. You can modify CSS properties to emphasize the table heading and table footer and give the body of the table a different appearance. The table header, footer, and body sections are defined by the <thead>, <tfoot>, and <tbody> elements, respectively. Each of these elements must contain the same number of columns. The <thead> </thead> element defines the heading of the table, which should contain information about the columns in the body of the table. Typically, this is the same type of information that you’ve been placing within header cells so far in the lesson. The starting <thead> tag is always required when you want to include a head section in your table, as is the closing </thead> tag under XHTML 1.0. The head of the table appears right after the <table> element or after <colgroup> ele- ments, as the following example shows, and must include at least one row group defined by the <tr> element. I’m including style attributes in the row grouping tags to illustrate how they are used. The table is formatted as follows: Input ▼ <table border=“1” width=“100%” summary=“Science and Mathematic Class Schedules”> <caption><b>Science and Mathematic Class Schedules</b></caption> <colgroup width=“20%” align=“center” valign=“top”> <colgroup span=“2” width=“40%” valign=“top”> <thead style=“color: red”> <tr> 300 LESSON 10: Building Tables Output . FIGURE 10.30 The class sched- ule with formatted column groups. Download from www.wowebook.com ptg <th>Class</th> <th>Room</th> <th>Time</th> </tr> </thead> The <tfoot> </tfoot> element defines the footer of the table. The starting <tfoot> tag is always required when defining the footer of a table. The closing <tfoot> tag was optional in HTML 4.01, but it’s required for XHTML 1.0 compliance. The footer of the table appears immediately after the table heading if one is present or after the <table> element if a table heading isn’t present. It must contain at least one row group, defined by the <tr> element. A good example of information that you could place in a table footer is a row that totals columns of numbers in a table. You must define the footer of the table before the table body because the browser has to render the footer before it receives all the data in the table body. For the purposes of this example, we’ll include the same information in the table head and the table footer. The code looks like this: Input ▼ <tfoot style=“color: blue”> <tr> <th>Class</th> <th>Room</th> <th>Time</th> </tr> </tfoot> After you define the heading and footer for the table, you define the rows in the table body. A table can contain more than one body element, and each body can contain one or more rows of data. This might not seem to make sense, but using multiple body sections enables you to divide up your table into logical sections. I show you one example of why this is rather cool in a little bit. The <tbody> </tbody> element defines a body section within your table. The <tbody> start tag is required if at least one of the following is true: n The table contains head or foot sections. n The table contains more than one table body. The following example contains two table bodies, each consisting of three rows of three cells each. The body appears after the table footer, as follows: More Advanced Table Enhancements 301 10 Download from www.wowebook.com ptg Input ▼ <tbody style=“color: yellow”> <tr> <td>Biology</td> <td>Science Wing, Room 102</td> <td>8:00 AM to 9:45 AM</td> </tr> <tr> <td>Science</td> <td>Science Wing, Room 110</td> <td>9:50 AM to 11:30 AM</td> </tr> <tr> <td>Physics</td> <td>Science Wing, Room 107</td> <td>1:00 PM to 2:45 PM</td> </tr> </tbody> <tbody style=“color: grey”> <tr> <td>Geometry</td> <td>Mathematics Wing, Room 236</td> <td>8:00 AM to 9:45 AM</td> </tr> <tr> <td>Algebra</td> <td>Mathematics Wing, Room 239</td> <td>9:50 AM to 11:30 AM</td> </tr> <tr> <td>Trigonometry</td> <td>Mathematics Wing, Room 245</td> <td>1:00 PM to 2:45 PM</td> </tr> </tbody> </table> Put all the preceding together and you get a table that looks like that shown in Figure 10.31. 302 LESSON 10: Building Tables Download from www.wowebook.com ptg Other Table Elements and Attributes Table 10.1 presents some of the additional elements and attributes that pertain to tables. TABLE 10.1 Other Table Elements and Attributes Attribute Applied to Element Use char See “Use” column Specifies a character to be used as an axis to align the contents of a cell. For example, you can use it to align a decimal point in numeric values. Can be applied to colgroup, col, tbody, thead, tfoot, tr, td, and th elements. Removed from HTML5. charoff See “Use” column Specifies the amount of offset applied to the first occurrence of the alignment character that is specified in the char attribute. Applies to colgroup, col, tbody, thead, tfoot, tr, td, and th elements. Removed from HTML5. summary <table> Provides a more detailed description of the contents of the table and is primarily used with nonvisual browsers. How Tables Are Used In this lesson, I explained the usage of tables in publishing tabular data. That was the original purpose for HTML tables. However, in 1996, Netscape 2.0 introduced the option of turning off table borders, and this, along with other limitations in HTML, changed the way tables were used. How Tables Are Used 303 10 Output . FIGURE 10.31 The class sched- ule with a head, two bodies, and a foot. Download from www.wowebook.com ptg Before style sheets were invented and implemented in most browsers, there was only one way to lay out elements on a page other than straight down the middle: tables. These days, developers use CSS to lay out pages, but before CSS support in browsers became really solid, tables were the key page layout tool that most web developers used. Even now, there are some cases where using tables to lay out pages make sense. The web browsers in some mobile devices do not support CSS, so if you want to lay out your pages with columns, you must use tables. Similarly, if you are creating a web page that will be sent out as part of an email message, tables should be used. Some email clients do not support CSS, and so for more advanced layouts you’re required to use tables. Summary In this lesson, you learned quite a lot about tables. They enable you to arrange your information in rows and columns so that your visitors can get to the information they need quickly. While working with tables, you learned about headings and data, captions, defining rows and cells, aligning information within cells, and creating cells that span multiple rows or columns. With these features, you can create tables for most purposes. As you’re constructing tables, it’s helpful to keep the following steps in mind: n Sketch your table, indicating where the rows and columns fall. Mark which cells span multiple rows and columns. n Start with a basic framework and lay out the rows, headings, and data row by row and cell by cell in HTML. Include row and column spans as necessary. Test fre- quently in a browser to make sure that it’s all working correctly. n Modify the alignment in the rows to reflect the alignment of the majority of the cells. n Modify the alignment for individual cells. n Adjust line breaks, if necessary. n Make other refinements such as cell spacing, padding, or color. n Test your table in multiple browsers. Different browsers might have different approaches to laying out your table or might be more accepting of errors in your HTML code. Table 10.2 presents a quick summary of the HTML elements that you learned about in this lesson, and which remain current in HTML 4.01. 304 LESSON 10: Building Tables Download from www.wowebook.com ptg TABLE 10.2 Current HTML 4.01 Table Elements Tag Use <table> </table> Indicates a table. <caption> </caption> Creates a caption for the table (optional). <colgroup> </colgroup> Encloses one or more columns in a group. <col> Used to define the attributes of a column in a table. <thead> </thead> Creates a row group that defines the heading of the table. A table can contain only one heading. <tfoot> </tfoot> Creates a row group that defines the footer of the table. A table can contain only one footer. Must be specified before the body of the table is rendered. <tbody> </tbody> Defines one or more row groups to include in the body of the table. Tables can contain more than one body section. <tr> </tr> Defines a table row, which can contain heading and data cells. <th> </th> Defines a table cell that contains a heading. Heading cells are usually indicated by boldface and centered both horizontally and vertically within the cell. <td> </td> Defines a table cell containing data. Table cells are in a regular font and are left-aligned and vertically cen- tered within the cell. Because several of the table attributes apply to more than one of the preceding elements, I’m listing them separately. Table 10.3 presents a quick summary of the HTML attributes you learned about in this lesson that remain current in HTML 4.01. TABLE 10.3 Current HTML 4.01 Table Attributes Attribute Applied to Element Use align <tr> Possible values are left, center, and right, which indicate the hori- zontal alignment of the cells within that row (overriding the default align- ment of heading and table cells). <th> or <td> Overrides both the row’s alignment and any default cell alignment. Possible values are left, center, and right. <thead>, <tbody>, <tfoot> Used to set alignment of the con- tents in table head, body, or foot cells. Possible values are left, center, and right. Summary 305 10 Download from www.wowebook.com . shown in Figure 10 .30: Input ▼ <!DOCTYPE html& gt; < ;html& gt; <head> <title>Grouping Columns</title> </head> <body> <table border= 1 width= 10 0%” summary=“Grouping. AM</td> </tr> <tr> <td>Science</td> <td>Science Wing, Room 11 0</td> <td>9:50 AM to 11 :30 AM</td> </tr> <tr> <td>Physics</td> <td>Science Wing, Room 10 7</td> <td> ;1: 00 PM to 2:45. of errors in your HTML code. Table 10 .2 presents a quick summary of the HTML elements that you learned about in this lesson, and which remain current in HTML 4. 01. 304 LESSON 10 : Building Tables