Tự học HTML và CSS trong 1 giờ - part 33 doc

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.. This requi

Trang 1

<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>

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:

NOTE

▲

Trang 2

column group that contains one column If the <colgroup>element contains one or

more<col>elements (described later), however, the spanattribute is ignored

n widthspecifies 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:

</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:

10

Trang 3

<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 colgroupworks, I use the styleattribute and background-colorproperty

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>

Trang 4

<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>9:50 AM to 11:30 AM</td>

</tr>

<tr>

<td>Physics</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>9:50 AM to 11:30 AM</td>

</tr>

<tr>

<td>Trigonometry</td>

<td>1:00 PM to 2:45 PM</td>

</tr>

</table>

</body>

</html>

10

Trang 5

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 styleattributes 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”>

Output

FIGURE 10.30

The class

sched-ule with formatted

column groups.

Trang 6

<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:

10

Trang 7

Input▼

<tbody style=“color: yellow”>

<tr>

<td>Biology</td>

<td>8:00 AM to 9:45 AM</td>

</tr>

<tr>

<td>Science</td>

<td>9:50 AM to 11:30 AM</td>

</tr>

<tr>

<td>Physics</td>

<td>1:00 PM to 2:45 PM</td>

</tr>

</tbody>

<tbody style=“color: grey”>

<tr>

<td>Geometry</td>

<td>8:00 AM to 9:45 AM</td>

</tr>

<tr>

<td>Algebra</td>

<td>9:50 AM to 11:30 AM</td>

</tr>

<tr>

<td>Trigonometry</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

Trang 8

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

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

10

Output

FIGURE 10.31

The class

sched-ule with a head,

two bodies, and a

foot.

Trang 9

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

Trang 10

TABLE 10.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.

<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

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

10

Định dạng
Số trang	10
Dung lượng	684,83 KB