[ Pobierz całość w formacie PDF ]
.A cell s width setting will affect thewidth of the entire column it occupies, therefore, column widths can be specifiedby setting the width of just one cell in the column (generally those in the toprow); the remaining cells will follow.Likewise, the cell s height may determine the height of all the cells in that row, sorow height can be set using just one cell in each row.Height and width values can be absolute measurements in pixels, or percentagesrelative to the dimensions of the table.Table Cell SpacingThere are two types of space that can be added in and around table cells: cellpadding and cell spacing.The cellpaddingand cellspacingattributes are usedwithin the tag and apply to the whole table.cellspacingCell spacing, which is controlled by the cellspacing attribute within thetag, refers to the space between the cells (see the left image inFigure 10-8).Values are specified in number of pixels.Increasing the cellspacing results in wider shaded borders between cells.In the left image inFigure 10-8, the gray areas indicate the 10 pixels of cell spacing addedbetween cells.The default value for cellspacingis 2, therefore, if no cell-spacing is specified, browsers will automatically place 2 pixels of spacebetween cells.CELL 1 CELL 2CELL 1 CELL 2CELL 3 CELL 4CELL 3 CELL 4Figure 10-8: Cell spacing versus cell paddingcellpaddingCell padding refers to the amount of space between the cell s border and itscontents (as indicated in the right image in Figure 10-8).It is specified usingthe cellpadding attribute within the tag.Values are specified innumber of pixels; the default value is 1.Relative values (percentages of avail-able space) may also be used.Affecting Table Appearance 185Web Design in a Nutshell, eMatter EditionCopyright © 2000 O Reilly & Associates, Inc.All rights reserved. Affecting Table AppearanceDifferent effects can be created using different combinations of spacing andpadding.If you want your table to be seamless, as when it is holding togetheran image, be sure to set the border, cellspacing, and cellpadding to 0, asfollows:Coloring TablesYou can specify a background color for the entire table (), selected rows(), or individual cells ( or ) by placing the bgcolor attribute in theappropriate tag.The bgcolor attribute is recognized by MSIE versions 2.0 andhigher and Navigator versions 3.0 and higher.Color values can be specified either by their hexadecimal RGB values or by a stan-dard color name.For more information on specifying color in HTML, seeChapter 5, HTML Overview.Color settings in a cell will override settings made at the row level, which over-ride settings made at the table level.To illustrate, in the following example, thewhole table is set to light gray, the second row is set to medium gray, and thefurthest right cell in that row is set to dark gray.Figure 10-9 shows the results.Figure 10-9: Effects of setting background colors at cell, row and table levelsNetscape Navigator and Internet Explorer treat background colors at the table leveldifferently.Navigator fills every cell in the table with the specified color, but theborder picks up the color of the document background.IE fills the entire tablearea, including the borders, with the specified color for a more unified effect.Background colors at the row and cell level are treated consistently by the twobrowsers (although Navigator uses the document background color for emptycells).186 Chapter 10 TablesWeb Design in a Nutshell, eMatter EditionCopyright © 2000 O Reilly & Associates, Inc.All rights reserved. Table TroubleshootingTable TroubleshootingDespite the control they offer over page layout, tables are also notorious forcausing major headaches and frustrations.This is partly due to the potentialcomplexity of the code it s easy to miss one little character that will topple atable like a house of cards.Another source of chaos is that browsers are inconsis-tent and sometimes quirky in the way they interpret table code [ Pobierz caÅ‚ość w formacie PDF ]
zanotowane.pl doc.pisz.pl pdf.pisz.pl odbijak.htw.pl
.A cell s width setting will affect thewidth of the entire column it occupies, therefore, column widths can be specifiedby setting the width of just one cell in the column (generally those in the toprow); the remaining cells will follow.Likewise, the cell s height may determine the height of all the cells in that row, sorow height can be set using just one cell in each row.Height and width values can be absolute measurements in pixels, or percentagesrelative to the dimensions of the table.Table Cell SpacingThere are two types of space that can be added in and around table cells: cellpadding and cell spacing.The cellpaddingand cellspacingattributes are usedwithin the tag and apply to the whole table.cellspacingCell spacing, which is controlled by the cellspacing attribute within thetag, refers to the space between the cells (see the left image inFigure 10-8).Values are specified in number of pixels.Increasing the cellspacing results in wider shaded borders between cells.In the left image inFigure 10-8, the gray areas indicate the 10 pixels of cell spacing addedbetween cells.The default value for cellspacingis 2, therefore, if no cell-spacing is specified, browsers will automatically place 2 pixels of spacebetween cells.CELL 1 CELL 2CELL 1 CELL 2CELL 3 CELL 4CELL 3 CELL 4Figure 10-8: Cell spacing versus cell paddingcellpaddingCell padding refers to the amount of space between the cell s border and itscontents (as indicated in the right image in Figure 10-8).It is specified usingthe cellpadding attribute within the tag.Values are specified innumber of pixels; the default value is 1.Relative values (percentages of avail-able space) may also be used.Affecting Table Appearance 185Web Design in a Nutshell, eMatter EditionCopyright © 2000 O Reilly & Associates, Inc.All rights reserved. Affecting Table AppearanceDifferent effects can be created using different combinations of spacing andpadding.If you want your table to be seamless, as when it is holding togetheran image, be sure to set the border, cellspacing, and cellpadding to 0, asfollows:Coloring TablesYou can specify a background color for the entire table (), selected rows(), or individual cells ( or ) by placing the bgcolor attribute in theappropriate tag.The bgcolor attribute is recognized by MSIE versions 2.0 andhigher and Navigator versions 3.0 and higher.Color values can be specified either by their hexadecimal RGB values or by a stan-dard color name.For more information on specifying color in HTML, seeChapter 5, HTML Overview.Color settings in a cell will override settings made at the row level, which over-ride settings made at the table level.To illustrate, in the following example, thewhole table is set to light gray, the second row is set to medium gray, and thefurthest right cell in that row is set to dark gray.Figure 10-9 shows the results.Figure 10-9: Effects of setting background colors at cell, row and table levelsNetscape Navigator and Internet Explorer treat background colors at the table leveldifferently.Navigator fills every cell in the table with the specified color, but theborder picks up the color of the document background.IE fills the entire tablearea, including the borders, with the specified color for a more unified effect.Background colors at the row and cell level are treated consistently by the twobrowsers (although Navigator uses the document background color for emptycells).186 Chapter 10 TablesWeb Design in a Nutshell, eMatter EditionCopyright © 2000 O Reilly & Associates, Inc.All rights reserved. Table TroubleshootingTable TroubleshootingDespite the control they offer over page layout, tables are also notorious forcausing major headaches and frustrations.This is partly due to the potentialcomplexity of the code it s easy to miss one little character that will topple atable like a house of cards.Another source of chaos is that browsers are inconsis-tent and sometimes quirky in the way they interpret table code [ Pobierz caÅ‚ość w formacie PDF ]