[ Pobierz całość w formacie PDF ]
.It is reprinted here with permission of Builder.com and CNET.Seehttp://builder.com/Authoring/AdvHtml/index.html for the complete article.Table Troubleshooting 191Web Design in a Nutshell, eMatter EditionCopyright © 2000 O Reilly & Associates, Inc.All rights reserved. Table TroubleshootingThe problem is that the height attribute specifies a minimum, not a maximum,and a row defaults to the height of its tallest cell (determined either by the cell scontents or its height value).That s why the table doesn t work as intended thetext in the last cell isn t tall enough to force the desired effect.Since we can deter-mine the exact height that we want in that last cell (by subtracting the height ofblue.gif from the column height), giving it a height=100 attribute will make it theproper height.If you don t know the exact height say, because other columns contain text youmay be better off removing the rowspan attributes and using a nested tableinstead.The nested table will size its rows based on their content only.Column Span Problems*If you want to create a table with multiple column spans, yet accurately controlthe width of each column, it is necessary to specify a width for at least one cell ineach column.To be really safe, take the time to specify a width for every cell inthe table.When column spans overlap, it is easy to get unpredictable results.The goal was to create a table 600 pixels wide with three columns of 200 pixelseach.In each row, there is a 400-pixel-wide graphic that should straddle neatlyover two columns, as shown in Figure 10-15.width(should be 200 pixels)width(should be 200 pixels)Figure 10-15: The target layout: getting two graphics to span two columnsThe first (failed) attempt at coding set the table to a specific width and providedcolumn spans for the graphics, as shown in the following code:text cell(should be 200 pixels)text cell(should be 200 pixels)* This tip courtesy of Builder.com.It first appeared in the Builder.com article Advanced HTMLTips, by Paul Anderson.It is reprinted here with permission of Builder.com and CNET.Seehttp://builder.com/Authoring/AdvHtml/index.html for the complete article.The solution shownhere was submitted by Steven Masters.192 Chapter 10 TablesWeb Design in a Nutshell, eMatter EditionCopyright © 2000 O Reilly & Associates, Inc.All rights reserved. Tips and TricksThis code, however, doesn t give the browser enough information, particularlyabout the middle column, to accurately render the table.The unsuccessful result ofthis first code attempt is shown in Figure 10-16.The problem is that the centercolumn is not defined anywhere.width(should be 200 pixels)width(should be 200 pixels)Figure 10-16: Since the middle column was not defined, the table is rendered withtwo 400-pixel-wide columnsThe solutionThe solution in this case, because the middle cell is eaten up by column spans inboth rows, is to create a dummy row (shown in bold) that establishes the width ofthe three columns as intended (in 200-pixel increments).This row will not renderin the browser.In addition, the absolute width for every cell must be specified.The following code produces the desired effect on all browsers that supporttables and on all platforms.text cell(should be 200pixels)text cell(should be 200pixels)Tips and TricksThis section provides a few tricks of the trade for working with tables.and TablesUnfortunately, placing tags around a table will not affect the font of all thetext contained within the table.You need to repeat the tag and itsattributes around the content in every cell of the table.For complex tables withTips and Tricks 193Web Design in a Nutshell, eMatter EditionCopyright © 2000 O Reilly & Associates, Inc.All rights reserved. Tips and Trickslots of cells, the repetitive tags can actually add significantly to the size ofthe HTML file (not to mention the visual clutter)
[ Pobierz całość w formacie PDF ]