Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P32 pptx

More Advanced Table Enhancements 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. Instead, you should 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: <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 display 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 horizontally. 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'm going to use the style attribute and backgroundcolor 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 8.28: Input <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> <tr> <th>Class</th> <th>Room</th> <th>Time</th> </tr> file:///G|/1/0672328860/ch08lev1sec7.html (2 von 8) [19.12.2006 13:49:05] More Advanced Table Enhancements <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> Output Figure 8.28. The class schedule with formatted column groups. [View full size image] file:///G|/1/0672328860/ch08lev1sec7.html (3 von 8) [19.12.2006 13:49:05] More Advanced Table Enhancements 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 apply Cascading Style Sheet 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 today. 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> elements, 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> <th>Class</th> <th>Room</th> <th>Time</th> file:///G|/1/0672328860/ch08lev1sec7.html (4 von 8) [19.12.2006 13:49:05] More Advanced Table Enhancements </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'll 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: ● The table contains head or foot sections ● 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: 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> file:///G|/1/0672328860/ch08lev1sec7.html (5 von 8) [19.12.2006 13:49:05] More Advanced Table Enhancements <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 8.29. Output Figure 8.29. The class schedule with a head, two bodies, and a foot. [View full size image] file:///G|/1/0672328860/ch08lev1sec7.html (6 von 8) [19.12.2006 13:49:05] More Advanced Table Enhancements The frame and rules Attributes In the preceding example, it's not really clear where the column groups and row groups begin and end. You can use the frame and rules attributes of the <table> element to selectively control table borders. The frame attribute affects how the external border of the table is rendered. You can specify one of several different values to define which sides of the external border are visible: void The default value. No sides of the external border are visible. above Renders only the top side of the border. below Renders only the bottom side of the border. hsides Renders the top and bottom sides of the border. lhs Renders the left side of the border. rhs Renders the right side of the border. vsides Renders the right and left sides of the border. box Renders all four sides of the border. border Renders all four sides of the border. The rules attribute is somewhat similar to the frame attribute, except that it defines the rules that appear between the cells within a table. The following values apply to the rules attribute: none The default value. No rules are drawn around any of the cells. groups Rules appear between row groups as defined by <thead>, <tfoot>, and <tbody>, and between column groups as defined by <colgroup> and <col>. rows Rules appear only between rows. cols Rules appear only between columns. all Rules appear between all rows and columns. Now let's alter the borders in the table so that your column groups and row groups stand out better. You'll draw a border around the Class Schedule table, but you'll place the border only along the top and bottom of the table by applying frame="hsides" to the <table> tag. Inside the table, you'll separate the heading and footer from the two body sections (one table body for the Science subjects and one table body for the Math subjects). You'll also separate the Subject column group and the Room/Time column group. All this is accomplished by using rules="groups" with the <table> element. You need to modify only one line in your code to accomplish all of this now. The revised table element appears as follows, and Figure 8.30 shows the results: file:///G|/1/0672328860/ch08lev1sec7.html (7 von 8) [19.12.2006 13:49:05] More Advanced Table Enhancements <table border="1" width="100%" frame="hsides" rules="groups"> Figure 8.30. The class schedule with rules added. [View full size image] file:///G|/1/0672328860/ch08lev1sec7.html (8 von 8) [19.12.2006 13:49:05] Other Table Elements and Attributes Other Table Elements and Attributes Table 8.1 presents some of the additional elements and attributes that pertain to tables. Table 8.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 numerical values. Can be applied to colgroup, col, tbody, thead, tfoot, tr, td, and th elements. 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. summary <table> Provides a more detailed description of the contents of the table and is primarily used with nonvisual browsers. file:///G|/1/0672328860/ch08lev1sec8.html [19.12.2006 13:49:06] How Tables Are Used How Tables Are Used Today, I explained the usage of tables in publishing tabular data. That was the original purpose for HTML tables. However, 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. 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 middletables. Every time you see a page that has navigational links running down one side or elements enclosed in boxes with a background of a different color, someone has laid things out using CSS or tables, and usually it's tables that have been used. In fact, tables were once such a huge part of web publishing that it was rare to see a page that didn't contain any. Even though all current browsers provide solid support for Cascading Style Sheets, you'll still find that most pages are laid out using tables. Because, as you'll see tomorrow, CSS fundamentally changes the way pages are laid out, many people haven't bothered to get current and abandon tables. Furthermore, there's still some concern about making pages look the same in old browsers as they do in new browsers. Old habits die hard, so tables are still a common approach for creating complex layouts. Let's look at a page that uses tables for layoutfreshmeat.net (a site that keeps track of new releases of open source software). It's a good example because it uses several clearly marked tables with nice bold borders. The page appears in Figure 8.31. Figure 8.31. The freshmeat.net home page. [View full size image] file:///G|/1/0672328860/ch08lev1sec9.html (1 von 3) [19.12.2006 13:49:06] How Tables Are Used The first four rows of the page are all tables, the first containling links to related sites, then one containing an ad, one containing navigational elements, and one containing the search fields and even more navigational links. The main content of the page is presented in a table that appears to be two columns but is actually seven columns wide. Two of the columns contain contentthe list of software packages on the left and the navigation on the rightand the rest of them are used for spacing and formatting. The listings for individual software packages in the left column are also tables, and the tabular data at the bottom of each listing is yet another table. This page illustrates the problems with laying out your page using tables. As you'll see later, using tables means including lots of tags on your pages that wouldn't be necessary if you used a CSS-based approach. You also lose the meaning of what a table is, as most of the tables aren't used to present tabular data, but rather just to make things appear on the page where you want them. This type of layout was typical, but most new websites are being created using CSS for page layout. As you can see from the freshmeat.net page, tables can be used for a very precise layout of the elements on a page. The best way to learn how to create your own pages using these techniques is to view the source code of pages you like. It's unethical to copy someone else's code directly, but there's nothing wrong with using other people's HTML as a source of inspiration or instruction. Tip Before you start venturing into using nested tables to create solid borders and resorting to file:///G|/1/0672328860/ch08lev1sec9.html (2 von 3) [19.12.2006 13:49:06] . first containling links to related sites, then one containing an ad, one containing navigational elements, and one containing the search fields and even more navigational links. The main content. rightand the rest of them are used for spacing and formatting. The listings for individual software packages in the left column are also tables, and the tabular data at the bottom of each listing. CSS or tables, and usually it's tables that have been used. In fact, tables were once such a huge part of web publishing that it was rare to see a page that didn't contain any. Even