Table 8.2 presents a quick summary of the HTML elements that you learned about today, and which remain current in HTML 4.01.. Current HTML 4.01 Table Attributes Attribute Applied to Elem
Trang 1other 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
Trang 2Today, 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
<table> </table> Indicates a table
<caption> </caption> Creates a caption for the table (optional)
<colgroup> </colgroup> Encloses one or more columns in a group
Trang 3<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
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
values are left, center, and right
Possible values are left, center, and right
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
Trang 4<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
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
The default is no border If border has a value, it's the width of the shaded border around the table
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
except it affects only the light component of a 3D-look border
except it affects only the dark component of a 3D-look border
table
cell and its contents
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
occurrence of the alignment character specified by the char attribute Applies to the same elements previously listed in char
are visible Possible values are void, above, below, hsides, lhs, rhs, vsides, box, and border
in pixel or percentage values
Trang 5width <table> Indicates the width of the table, in exact pixel values or
as a percentage of page width (for example, 50%)
be an integer greater than 0
be an integer greater than 0
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
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
column
exact pixel values or as a percentage of table width (for example, 50%)
Trang 6Today'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?
Trang 73. 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
Trang 82. Modify the table shown in Figure 8.30 so that the rules in the table only appear
between columns
Trang 9Lesson 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
Trang 10Including 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