|
[ Pobierz całość w formacie PDF ]
.The end tag isoptional.Attributesalign=left|center|rightAligns the text (or other elements) within the cells of the current row.Thisattribute has been deprecated by the W3C 4.0 Spec in favor of positioningwith style sheets.bgcolor="#rrggbb" orcolor nameSpecifies a color to be used in the row.A row s background color overridesthe color specified at the table level.valign=top|middle|bottom|baselineSpecifies the vertical alignment of the text (or other elements) within cells ofthe current row.Internet Explorer 2.0 and higher onlybackground=url of image fileSpecifies a graphic image to be used as a tile within the row.bordercolor="#rrggbb" orcolor nameDefines the border color for the row.bordercolorlight="#rrggbb" orcolor nameDefines the dark shadow color for the row border.bordercolordark= #rrggbb orcolor nameDefines the light highlight color of the row border.Introduction to TablesAlthough there are no true classifications, tables can be used in the followinggeneral ways:Table Usage IllustrationData TableThis is a table at its most basic (and asthe creators of HTML intended) rowsand columns of textual data.Of course,data tables can be much larger andmore complex than shown in thisexample.176 Chapter 10 TablesWeb Design in a Nutshell, eMatter EditionCopyright © 2000 O Reilly & Associates, Inc.All rights reserved. Basic Table StructureTable Usage IllustrationText AlignmentTables are often used to clean up thedisplay of text by creating effectscommon to print, such as columns,hanging indents, and extra whitespace.Page TemplateMany web designers use a large tableas a container to give structure to apage.One common configuration is tocreate narrow columns for navigationalitems as shown in this example.Atemplate for a two-column tablefollows in the Templates section ofthis chapter.Multipart Image ContainerTables can be used to hold together alarge graphic that has been dividedinto separate sections to accommodateanimations, rollovers, etc.In theexample at right, the border wasturned on to reveal the individualsections.Holding images together withtables is discussed at the end of thischapter.The HTML 4.0 Specification proposal discourages the use of tables for page layout,favoring Cascading Style Sheets with absolute positioning instead.But until stylesheets are more universally and consistently supported by the browsers in currentuse, tables remain a designer s most reliable tool for constructing complex pagelayouts.Basic Table StructureAt their most basic, tables are made up cells, arranged into rows and columns.You can control display characteristics for the whole table level, the row level, andfor individual cells (there are currently no supported methods for controllingcolumns as a group).Rows and CellsThe bare minimum tags for describing a table are , , and.Thefollowing HTML shows the basic structure for a four-cell table:Basic Table Structure 177Web Design in a Nutshell, eMatter EditionCopyright © 2000 O Reilly & Associates, Inc.All rights reserved. Basic Table Structurecell 1cell 2cell 3cell 4The tag defines the contents of the table.Each row is defined bytags, and is made up of a number of data (or header) cells.The number ofcolumns is defined by the number of cells in a row.Data cells are indicated by thetag.A table cell may contain any data that can be displayed in an HTMLdocument (formatted text, images, multimedia elements, and even other tables).Figure 10-1 gives a visual representation of this concept.The image on the leftshows that the table consists of two rows and that each consists of two cells.Theimage on the right shows just how the HTML describes the rows and cells.Tablecell 1 cell 2cell 3 cell 4Figure 10-1: HTML tables are divided into rows and cells, as shown at left.Thetag creates rows and the tag creates cells, as shown at right.Header cells use the tag and function the same as data cells but aredisplayed in bold centered text [ Pobierz caÅ‚ość w formacie PDF ] |
Archiwum
|