Creative Page Layout with Tables


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.


By the Way

Although laying out pages with invisible tables is a highly popular and useful technique, it is technically discouraged by the World Wide Web Consortium (W3C), the standards body that oversees the future of the Web. The W3C promotes style sheets as the proper way to lay out pages, as opposed to using tables. Although I agree with the W3C in principle, tables are simply too useful for page layout to completely ignore them. Don't worry, I teach you the style sheet approach to page layout in Hour 14, "Using Style Sheets for Page Layout." Style sheets are ultimately much more powerful than tables, so you definitely should lean toward using them for pages with more complex designs. However, tables aren't entirely wrong for simple layouts and some pesky layouts that are tricky to arrange using style sheets. As an example, a three-column page is notoriously difficult to code properly using style sheets.


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 &quot;Big T&quot; 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:l&#97;ncastert@musiccitym&#97;fi&#97;.com?subject=         Fan Question&amp;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.


Did you Know?

For an example of how you can use tables for creative layout, check out "The Site of the '90s" at http://www.samspublishing.com/.

Your real-world site will probably be a bit tamer than the LOOK sitebut some of you will start getting even crazier ideas.…





SAMS Teach Yourself HTML and CSS in 24 Hours
Sams Teach Yourself HTML and CSS in 24 Hours (7th Edition)
ISBN: 0672328410
EAN: 2147483647
Year: 2005
Pages: 345

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net