| | |||
            |  | Killer Tables - Sizing Unconstrained tables have their own ideas of how to lay out whatever you put into them. As an experiment, try making a table that has five rows and four columns. Put different things into the table cells and watch what happens. Put in images and text, in different sizes and amounts. Overload some cells with lots of text or a huge image. Change the width of your browser window from wide open to 1" wide. Make a three column table, put text in the middle column, and then resize the browser window. See how the table cell gets narrower? Most of the time, we try to avoid that. The more you play with unconstrained tables, the more you will see why we don't let tables do this stuff on their own. This exercise is mandatory if you want to understand how the table engine works. In general, I want more control over tables. I can either use relative or absolute sizing. Although both come in handy, I tend to use absolute more often. It's not perfect, but it's the best we have right now. To specify relative table sizing, simply use the WIDTH as a percentage of the width of the window, where the full browser window is considered to be 100%. Relative table widths give you flexible tables that reflow when the window is resized. Absolute table widths (which do not use the "%" sign) specify the width in pixels. Try making the following table with both relative and absolute numbers, then play with the browser window width to see what's happening. Note that table dimensions never apply to height, since tables expand to contain anything you put into them. A Simple Table with Width as a Percentage of the Window
<table border=1 cellspacing=0 cellpadding=0 width=80%> <tr> <td>Column 1, Row 1</td> <td>Column 2, Row 1</td> </tr> <tr> <td>Column 1, Row 2</td> <td>Column 2, Row 2</td> </tr> </table> A Simple Table with Width as Absolute Pixels
<table border=1 cellspacing=0 cellpadding=0 width=424> <tr> <td>Column 1, Row 1</td> <td>Column 2, Row 1</td> </tr> <tr> <td>Column 1, Row 2</td> <td>Column 2, Row 2</td> </tr> </table> WHEN THE WINDOW IS MADE SMALLER AND LARGER THE RELATIVE TABLE AND THE CELLS ADJUST DYNAMICALLY. Not just tables can be relative to the window, but individual columns can be relative to the table. In this structure the table cell can always grow with the table, but it will get no smaller than the largest objects it contains. A Table with Total Width as a Percentage of the Window and Cellular Width as a Percentage of the Table
<table border=1 cellspacing=0 cellpadding=0 width=80%> <tr> <td width=25%>25%</td> <td width=75%>75%</td> </tr> <tr> <td width=25%>25%</td> <td width=75%>75%</td> </tr> </table> If you really want to get complicated about it, you can nest tables, and all the relative percentages adjust. Relative tables are good when each table cell contains very little text. When you want to put paragraphs of text into tables, you usually don't want relative sizing, because the widths of the paragraphs are too variable. Instead, you want absolute column widths, specified as a function of the viewer's type size. Since that is not a possible choice, we must specify absolute widths in pixels. Both tables and cells can have absolute widths. If the total width of the combined columns is greater than the set width of the table, the cells will win. Also, elements larger than the table or column width will distend the shape of the table in order to fit in. A Table with Total Width and Cellular Width as Absolute Pixels
<table border=1 cellspacing=0 cellpadding=0 width=424> <tr> <td width=102>102 pixels</td> <td width=309>309 pixels</td> </tr> <tr> <td width=102>102 pixels</td> <td width=309>309 pixels</td> </tr> </table> The most important aspect of this technique is that the table will not change size. Resize the window, making it as large as possible and as small. The table remains rock solid. This is what we want. Again, absolute table cells may contain other tables nested within. We use this feature all the time. You can build tables that have both relative and absolute features. Sometimes this is helpful when nesting tables. Sometimes nested tables are not constrained because they don't need to be. Usually, the outermost table is constrained. You will see a lot of fancy table work in the sites in part II. A Simple Table with Width as a Percentage with Absolute Cells
<table border=1 cellspacing=0 cellpadding=0 width=80%> <tr> <td width=102>102 pixels</td> <td width=309>309 pixels</td> </tr> <tr> <td width=102>102 pixels</td> <td width=309>309 pixels</td> </tr> </table> A Simple Table with Absolute Width and Percentage Cells
<table border=1 cellspacing=0 cellpadding=0 width=424> <tr> <td width=25%>25%</td> <td width=75%>75%</td> </tr> <tr> <td width=25%>25%</td> <td width=75%>75%</td> </tr> </table> It is possible to put items in columns that are "too big to fit." In these cases, table behavior can be a little unexpected.
Next: Cellpadding/spacing |  | ||||||||||||||||||||||||||||||||||||||||||||
 Core | Top | Feedback | |||||||||||||||||||||||||||||||||||||||||||||||
