The proper and conventional way to use tables is for tabular arrangements of text and numbers. Web designers realized that tables could go beyond that usage and serve as a means of laying out entire pages. For example, a table with invisible borders can be used as a guide for arranging graphics and columns of text any way you please. Take a look at Listing 11.3, which contains the table layout for a familiar page that now relies on tables for a much more efficient layout. The resulting page is displayed in Figure 11.3. Figure 11.3. HTML tables give you greater flexibility and control when you're laying out your web pages.
Listing 11.3. Using Tables for a More Efficient Multicolumn Page Layout<table cellspacing="5"> <tr> <td colspan="3"> <div style="font-family:verdana, arial; font-size:18pt; font-weight:bold"> 16 - Terry Lancaster</div> </td> </tr> <tr style="height:10px"> <td> <img src="/books/4/158/1/html/2/tlancaster.jpg" alt="Terry "Big T" Lancaster" /> </td> <td style="vertical-align:top"> <div style="font-family:verdana, arial; font-size:12pt; color:navy"> <span style="font-weight:bold">Nickname:</span> Big T<br /> <span style="font-weight:bold">Position:</span> RW<br /> <span style="font-weight:bold">Height:</span> 6'3"<br /> <span style="font-weight:bold">Weight:</span> 195<br /> <span style="font-weight:bold">Shoots:</span> Left<br /> <span style="font-weight:bold">Age:</span> 40<br /> <span style="font-weight:bold">Birthplace:</span> <a href="http://en.wikipedia.org/wiki/Nashville%2C_Tennessee"> Nashville, TN</a> </div> </td> <td style="vertical-align:top"> <div style="font-family:verdana, arial; font-size:12pt; color:navy"> <span style="font-weight:bold">Favorite NHL Player:</span> <a href="http://www.nhl.com/players/8448091.html">Brett Hull</a><br /> <span style="font-weight:bold">Favorite NHL Team:</span> <a href="http://www.nashvillepredators.com/">Nashville Predators</a> <br /><span style="font-weight:bold">Favorite Southern Fixin:</span> <a href="http://southernfood.about.com/od/potatorecipes/r/blbb442.htm"> Skillet Fried Potatoes</a><br /> <span style="font-weight:bold">Favorite Meat and Three:</span> <a href="http://www.hollyeats.com/Swetts.htm">Swett's</a> (<a href="http://maps.google.com/maps?q=2725+clifton+ave,+nashville,+tn" rel="external">map</a>) <br /> <span style="font-weight:bold">Favorite Country Star:</span> <a href="http://www.patsycline.com/">Patsy Cline</a><br /> <span style="font-weight:bold">Favorite Mafia Moment:</span> "<a href="mcmplayer_chale.html">Chet</a> finishing the game with his eyelid completely slashed through." </div> </td> </tr> <tr> <td colspan="3"> <table style="width:100%; text-align:right; font-family:verdana, arial; font-size:11pt; color:navy" border="1" > <tr style="background-color:navy; color:white"> <th style="text-align:left">Season</th> <th>GP</th> <th>G</th> <th>A</th> <th>P</th> <th>PIM</th> <th>PPG</th> <th>SHG</th> <th>GWG</th> </tr> <tr style="background-color:white"> <td style="text-align:left">Summer 2005</td> <td>11</td> <td style="width:75px">7</td> <td>5</td> <td>12</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> <tr style="background-color:#EEEEEE"> <td style="text-align:left">Winter 2004</td> <td>24</td> <td>14</td> <td>14</td> <td>28</td> <td>2</td> <td>0</td> <td>0</td> <td>5</td> </tr> <tr style="background-color:white"> <td style="text-align:left">Summer 2004</td> <td>18</td> <td>9</td> <td>9</td> <td>18</td> <td>2</td> <td>0</td> <td>0</td> <td>2</td> </tr> <tr style="background-color:#EEEEEE"> <td style="text-align:left">Spring 2004</td> <td>19</td> <td>7</td> <td>17</td> <td>24</td> <td>0</td> <td>0</td> <td>0</td> <td>1</td> </tr> </table> </td> </tr> <tr> <td colspan="3"> <div style="font-family:verdana, arial; font-size:12pt"> <a href="mailto:lancastert@musiccitymafia.com?subject= Fan Question&body=What's your secret?">Contact Terry.</a> </div> </td> </tr> </table> I realize that this is a lot of code but most of it you've already seen. It's the code for one of the hockey player pages except it has been reworked to use tables to achieve a more efficient page layout. While I worked on building this table, I left the borders visible so that I could make sure everything was placed the way I wanted. Then, before incorporating this table into the final web page, I removed the border="1" attribute from the outer <table> tag to make the lines invisible. There are actually three different tables in Listing 11.3 and Figure 11.3. The first table is used to arrange the images and text into four rows. The second table takes up the second row, and takes care of providing three columns of information within the subtable. The final table is the hockey stats table, which is simply placed on a row of its own in the main table. If you're having trouble visualizing the layout of the hockey player tables, check out Figure 11.4, which shows how the tables relate to each other on the page. Figure 11.4. Visualizing the arrangement of tables without the actual content can help greatly in figuring out a table layout design.
|