convertible table(s) 


  <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Chapter 7: Convertible Tables</title>

style(s) 


  <style type="text/css" media="screen">
  body {
     margin: 0;
     padding: 30px;
     font-family: "Lucida Grande", Arial, sans-serif;
     font-size: small;
     background: #b5b5b5;
     }

link(s) / tag 


  a { 
   color: #77985C; 
   }

forum(s) / class 


  .forums {
     line-height: 1.5em;
     background: #919191;
     }

table(s) / class 


  table {
     width: 100%;
     position: relative;
     top: -4px;
     left: -4px;
     border: 1px solid #000;
     background: #fff;
     }

table(s) / caption(s) 


  table caption {
     margin: 0;
     padding: 8px 20px;
     text-align: left;
    border: 1px solid #000;
     border-bottom: none;
    background: #fff;
     }

table(s) / entry(s) 


  table th, table td {
     margin: 0;
     padding: 8px 20px;
     text-align: center;
     border-bottom: 1px solid #b5b5b5;
     }

table(s) / header(s) 


  table th {
     color: #999;
     }

table(s) / name(s): class 


  table .name {
     text-align: left;
     }

table(s) / row(s): tag 


  table tr {
     background: #e6e6e6;
     }
  table tr.alt {
     background: #f1f1f1;
     }
  table td a {
     display: block;
     font-weight: bold;
     }
  </style>
  </head>

body 


  <body>
  
  <div class="forums">
  
  <table cellspacing="0">
     <caption>The Films</caption>
   <tr>
    <th scope="col" class="name">Forum Name</th>
    <th scope="col">Topics/Messages</th>
    <th scope="col">Last Post</th>
   </tr>

row(s) 


   <tr class="alt">
    <td class="name"><a href="/forum/">Name of Forum</a> This is the description of the forum.  This is another line of descriptive text.</td>
    <td>9313/163773</td>
    <td>Feb 28, 2005 04:21 PM</td>
   </tr>
   <tr>
    <td class="name"><a href="/forum/">Name of Forum</a> This is the description of the forum.  This is another line of descriptive text.</td>
    <td>9313/163773</td>
    <td>Feb 28, 2005 04:21 PM</td>
   </tr>
   <tr class="alt">
    <td class="name"><a href="/forum/">Name of Forum</a> This is the description of the forum.  This is another line of descriptive text.</td>
    <td>9313/163773</td>
    <td>Feb 28, 2005 04:21 PM</td>
   </tr>

end 


  </table>
  
  </div>
  
  </body>
  </html>