Banner

Layouteksempel 1 Layouteksempel 1a Layouteksempel 2 Layouteksempel 2a Layouteksempel 3 Layouteksempel 3a Layouteksempel 4 Layouteksempel 4a

Layout med 3 kolonner

Med flere end 10-12 websider på en website melder der sig et behov for at signalere, at siten er opdelt i forskellige sektioner, jf. eksemplerne med solsystemet. Der er mange måder at gøre det på. Den, der er anvendt her, anbefales ret bredt. Hvis du kan abstrahere fra dette eksempel, kan du f.eks. forestille dig, at en person på en site om solsystemets planeter klikker på hovedmenuens menupunkt "Mars". Dette resultaterer så i, at hovedmenuen forbliver den samme (med link til alle planeterne), men med ordet "Mars" fremhævet, indlæsningen af en artikel om Mars i indholdsdelen, og indlæsningen af en undermenu, der indeholder links til websiderne med fakta om Mars' atmosfære, topologi, baneforhold, er der liv på Mars osv.

Nu ser tabelkoden således ud:

<table width="100%" align="center" 
cellspacing="0" cellpadding="5" border="0">
    <tr><td colspan="3">
    
        <table width="100%" cellspacing="0" 
          cellpadding="10">
          <tr><td class="white">
          [ Banner ]
          </td></tr>
        </table>
    
    </td>
    </tr>
    <tr valign="top">
    <td width="150" align="right">
    
        <table width="100%" cellpadding="10" cellspacing="0">
          <tr><td class="yellow" align="right">
          [ Menuoverskrift ]
          </td></tr>
          <tr><td align="right" class="white">
          [ Menu ]
          </td></tr>
        </table>
        <br>
        <table width="100%" cellpadding="10" cellspacing="0">
          <tr><td class="yellow" align="right">
          [ Overskrift 1 ]</td></tr>
          <tr><td align="right" class="white">
          [ Nyhedsboks 1 ]
          </td></tr>
        </table>
        <br>
          <table width="100%" cellpadding="10" cellspacing="0">
          <tr><td class="yellow" align="right">
          [ Overskrift 2 ]</td></tr>
          <tr><td align="right" class="white">
          [ Nyhedsboks 2 ]
          </td></tr>
        </table>
    </td>
    <td>
        <table width="100%" cellspacing="0" cellpadding="10">
        <tr><td class="white">
        [ Indhold ]
        </td></tr>
        </table>
    </td>
    <td width="150">
        <table width="100%" cellpadding="10" cellspacing="0">
        <tr><td class="yellow" align="left">
        [ Undermenu ]</td></tr>
        <tr><td align="left" class="white">
        [ Links ]
        </td></tr>
        </table>
        </td>
    </tr>
    <tr><td> </td>
    <td colspan="2"> 
    
    <table width="100%" cellpadding="10">
      <tr><td class="white">
      [ Footer ]
      </td></tr>
    </table>
    
    </td></tr>
</table>

Foruden den class .white vi havde brug for i eksempel 2, har vi her også brug for en class .yellow til at lave den gule fremhævning af overskriften i kasserne, samt lidt manipulation med linket i den øverste kasse:

  .white {background-color:white;
  border:1px solid black;
  }
  .yellow {background-color:#f90;
  border:1px solid black;
  border-bottom:0;
  }
 .yellow a {color:#036;}