How Tables Are Used other such trickery, remember that Cascading Style Sheets enable you to create layouts exactly like those on the freshmeat.net page in a much simpler manner. You'll learn exactly how this is done tomorrow. file:///G|/1/0672328860/ch08lev1sec9.html (3 von 3) [19.12.2006 13:49:06] Summary Summary Today, you've 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 today, 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: ● Sketch your table, indicating where the rows and columns fall. Mark which cells span multiple rows and columns. ● 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 frequently in a browser to make sure that it's all working correctly. ● Modify the alignment in the rows to reflect the alignment of the majority of the cells. ● Modify the alignment for individual cells. ● Adjust line breaks, if necessary. ● Make other refinements such as cell spacing, padding, or color. ● 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 8.2 presents a quick summary of the HTML elements that you learned about today, and which remain current in HTML 4.01. Attributes that apply to each element are listed in Table 8.3. Table 8.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. file:///G|/1/0672328860/ch08lev1sec10.html (1 von 4) [19.12.2006 13:49:07] Summary <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 centered within the cell. Because several of the table attributes apply to more than one of the preceding elements, I'm listing them separately. Table 8.3 presents a quick summary of the HTML attributes you learned about today that remain current in HTML 4.01. Table 8.3. Current HTML 4.01 Table Attributes Attribute Applied to Element Use align <tr> Possible values are left, center, and right, which indicate the horizontal alignment of the cells within that row (overriding the default alignment 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 contents in table head, body, or foot cells. Possible values are left, center, and right. <col> Used to set alignment of all cells in a column. Possible values are left, center, and right. <colgroup> Used to set alignment of all cells in a column group. Possible values are left, center, and right. <table> Deprecated in HTML 4.01. Possible values are left, center, and right. align="center" isn't supported in HTML 3.2 and older browsers. Determines the alignment of the table and indicates that text following the table will be wrapped alongside it. file:///G|/1/0672328860/ch08lev1sec10.html (2 von 4) [19.12.2006 13:49:07] Summary <caption> Deprecated in HTML 4.01. Indicates which side of the table the caption will be placed. The possible values for most browsers are top and bottom. HTML 4.01 browsers also support left and right. In Internet Explorer, the possible values are left, right, and center, and they indicate the horizontal alignment of the caption. bgcolor All (HTML 3.2, deprecated in HTML 4.01.) Changes the background color of that table element. Cell colors override row colors, which override table colors. The value can be a hexadecimal color number or a color name. border <table> Indicates whether the table will be drawn with a border. The default is no border. If border has a value, it's the width of the shaded border around the table. bordercolor <table> (Internet Explorer and Netscape extension.) Can be used with any of the table elements to change the color of the border around that elements. The value can be a hexadecimal color number or a color name. bordercolorlight <table> (Internet Explorer extension.) Same as bordercolor, except it affects only the light component of a 3D-look border. bordercolordark <table> (Internet Explorer extension.) Same as bordercolor, except it affects only the dark component of a 3D-look border. cellspacing <table> Defines the amount of space between the cells in the table. cellpadding <table> Defines the amount of space between the edges of the cell and its contents. char Specifies a character to be used as an axis to align the contents of a cell (for example, a decimal point in numerical values). Can be applied to colgroup, col, tbody, thead, tfoot, tr, TD, and th elements. charoff Specifies the amount of offset to be applied to the first occurrence of the alignment character specified by the char attribute. Applies to the same elements previously listed in char. frame <table> Defines which sides of the frame that surrounds a table are visible. Possible values are void, above, below, hsides, lhs, rhs, vsides, box, and border. height <th> or <td> Deprecated in HTML 4.01. Indicates the height of the cell in pixel or percentage values. nowrap <th> or <td> Deprecated in HTML 4.01. Prevents the browser from wrapping the contents of the cell. rules <table> Defines which rules (division lines) appear between cells in a table. Possible values are none, groups, rows, cols, and all. file:///G|/1/0672328860/ch08lev1sec10.html (3 von 4) [19.12.2006 13:49:07] Summary width <table> Indicates the width of the table, in exact pixel values or as a percentage of page width (for example, 50%). span <colgroup> Defines the number of columns in a column group. Must be an integer greater than 0. <col> Defines the number of columns which a cell spans. Must be an integer greater than 0. width <colgroup> Defines the width of all cells in a column group. <col> Defines the width of all cells in one column. colspan <th> or <td> Indicates the number of cells to the right of this one that this cell will span. rowspan <th> or <td> Indicates the number of cells below this one that this cell will span. valign <tr> Indicates the vertical alignment of the cells within that row (overriding the defaults). Possible values are top, middle, and bottom. <th> or <td> Overrides both the row's vertical alignment and the default cell alignment. Possible values are top, middle, and bottom. In Netscape, valign can also have the value baseline. <thead>, <tfoot>, <tbody> Defines vertical alignment of cells in the table head, table foot, or table body. <colgroup> Defines the vertical alignment of all cells in a column group. <col> Defines the vertical alignment of all cells in a single column. width <th> or <td> Deprecated in HTML 4.01. Indicates width of the cell, in exact pixel values or as a percentage of table width (for example, 50%). file:///G|/1/0672328860/ch08lev1sec10.html (4 von 4) [19.12.2006 13:49:07] Workshop Workshop Today's lesson covered one of the more complex subjects in HTMLtables. Before you move on to full immersion into the world of Cascading Style Sheets, you should work through the following questions and exercises to make sure that you've really got a good grasp of how tables work. Q&A Q Tables are a real hassle to lay out, especially when you get into row and column spans. That last example was awful. A You're right. Tables are a tremendous pain to lay out by hand like this. However, if you're using writing editors and tools to generate HTML code, having the table defined like this makes more sense because you can just write out each row in turn programmatically. Q Can you nest tables, putting a table inside a single table cell? A Sure! As I mentioned earlier, you can put any HTML code you want inside a table cell, and that includes other tables. Q Why does most of the world use align for positioning a caption at the top or bottom of a page, but Internet Explorer does something totally different? A I don't know. And worse, Microsoft claims it got that definition for Internet Explorer from HTML 3.0, but no version of HTML 3.0 or the tables specification in HTML 3.2 has it defined in that way. HTML 4.01 added left and right aligning to this attribute, but Internet Explorer added that alignment before HTML even mentioned the possibility. Quiz 1. What are the basic parts of a table, and which tags identify them? 2. Which attribute is the most common attribute of the table tag, and what does it do? file:///G|/1/0672328860/ch08lev1sec11.html (1 von 3) [19.12.2006 13:49:07] Workshop 3. What attributes define the amount of space between the edges of the cells and their content, and the amount of space between cells? 4. Which attributes are used to create cells that span more than one column or row? 5. Which elements are used to define the head, body, and foot of a table? Quiz Answers 1. The basic parts of a table (the <table> tag) are the border (defined with the border attribute), the caption (defined with the <caption> tag), header cells (<th>), data cells ( <td>), and table rows (<tr>). 2. The border attribute is the most common attribute for the table tag. It specifies whether border lines are displayed around the table, and how wide the borders should be. 3. cellpadding defines the amount of space between the edges of the cell and their contents. cellspacing defines the amount of space between the cells. 4. The rowspan attribute creates a cell that spans multiple rows. The colspan attribute creates a cell that spans multiple columns. 5. <thead>, <tbody>, and <tfoot> define the head, body, and foot of a table. Exercises 1. Here's a brainteaser for you: Create a simple nested table (a table within a table) that contains three rows and four columns. Inside the cell that appears at the second column in the second row, create a second table that contains two rows and two columns. file:///G|/1/0672328860/ch08lev1sec11.html (2 von 3) [19.12.2006 13:49:07] Workshop 2. Modify the table shown in Figure 8.30 so that the rules in the table only appear between columns. file:///G|/1/0672328860/ch08lev1sec11.html (3 von 3) [19.12.2006 13:49:07] Lesson 9. Creating Layouts with CSS Lesson 9. Creating Layouts with CSS In the past few lessons, I've discussed how to lay out web pages using HTML tags. Today, I'm going to describe how you can create complex pages using cascading style sheets (CSS). In this Lesson You've already learned about the advantages CSS can provide for formatting smaller snippets of text. In this lesson, you'll learn how to use CSS to control the appearance of an entire page. The following topics will be covered: ● Creating style sheets and including them in a page ● Linking to external style sheets ● Using selectors to apply styles to elements on a page ● Units of measure supported by CSS ● CSS properties associated with boxes ● Positioning elements using CSS ● Applying styles to tables and the <body> tag ● Using CSS to create multicolumn layouts file:///G|/1/0672328860/ch09.html [19.12.2006 13:49:07] Including Style Sheets in a Page Including Style Sheets in a Page Thus far, when I've discussed style sheets, I've always applied them using the style attribute of tags. For example, I've shown how you can modify the font for some text using tags such as <div> and <span>, or how you can modify the appearance of a list item by applying a style within an <li> tag. It might have occurred to you that applying styles this way doesn't really provide much of an advantage over using things like the <font> tag. If you rely on the style attribute of tags to apply CSS, if you want to embolden every paragraph on a page, you need to put style="font-weight: bold" in every <p> tag. This is no improvement over simply using <p><b> and </b></p> instead. Fortunately, CSS provides ways to apply styles generally to a page, or even to an entire website. Creating Page-Level Styles First, let's look at how we can apply styles to our page at the page level. Thus far, you've seen how styles are applied, but you haven't seen any style sheets. Here's what one looks like: <style type="text/css"> h1 { font-size: x-large; font-weight: bold } h2 { font-size: large; font-weight: bold } </style> The <style> tag should be included within the <head> tag on your page. The type attribute indicates the MIME type of the style sheet. text/css is the only value you'll use. The body of the style sheet consists of a series of rules. All rules follow the same structure: selector { property1: value1; property2: value2; } Each rule consists of a selector followed by a list of properties and values associated with those properties. All the properties being set for a selector are enclosed in curly braces, as shown in the example. You can include any number of properties for each selector, and they must be separated from one another using semicolons. You can also include a semicolon following the last property/value pair in the rule, or notit's up to you. You should already be quite familiar with CSS properties and values because that's what you use in the style attribute of tags. Selectors are something new. I'll discuss selectors in detail in a bit. The ones I've used thus far have the same names as tags. If you use h1 as a selector, the rule will apply to any <h1> tags on the page. By the same token, if you use p as your selector, it will apply to <p> tags. Creating Sitewide Style Sheets You can't capture the real efficiency of style sheets until you start creating sitewide style sheets. You can store all of your style information in a file and include it without resorting to any server trickery (which I'll discuss in Lesson 19, "Taking Advantage of the Server"). A CSS file is basically just the body of a <style> tag. To turn the style sheet from the previous section into a separate file, you could just save the following to a file called style.css: h1 { font-size: x-large; font-weight: bold } file:///G|/1/0672328860/ch09lev1sec1.html (1 von 2) [19.12.2006 13:49:08] . rows and columns. ● 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 frequently in a. </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. containing data. Table cells are in a regular font, and are left-aligned and vertically centered within the cell. Because several of the table attributes apply to more than one of the preceding