News
Angebote
       ?print">Druckversion
Druckversion
  Toolbox Tipps & Tricks HTML Toolbox
 
Tipp 3: Tabellen in HTML - Rahmen als Haarlinie

      Rahmen als Haarlinie
    Haarlinien sind eine feine Sache, sie sind derzeit sehr modern. Man kann die Struktur zusätzlich aufzulockern und Tabellen elegant in Szene setzen. Wenn man es richtig anstellt, dann passen sich die Haarlinien dynamisch an den Tabelleninhalt an.

    Doch schauen Sie sich zuerst das Ergebnis an:

   
 
Tabelleninhalt
und
noch
mehr
Tabelleninhalt
 Tabelleninhalt
und
noch
mehr
Tabelleninhalt
 
   


      Wie wurde es gemacht?

    Zuerst einmal ist das nichts Besonderes.
    Die 5*5 Zellen große Tabelle enthält jeweils GIFs (3b.gif) als Hintergrundgrafik in der gewünschten Farbe. Das ist schnell gemacht, man muss lediglich genau auf das Layout ("rowspan" bzw. "colspan") innerhalb der Zellen achten.
    Die beiden vertikalen Linien werden zusätzlich mit transparenten 1-Pixel GIFs (1pix.gif) aufgespannt.

    Damit sich die Tabelle dem Inhalt anpassen kann, wird die Grafik als Hintergrund eingesetzt. Das klappt jedoch erst mit allen 4er Browsern oder Neueren. Wer sich daran stört, kann GIFs mit fixen Größen einsetzen, muss dann aber bei Änderungen am Inhalt nachbessern.

    Den eigentlichen Inhalt nimmt dann eine zusätzliche Tabelle auf (im Quellcode blau gekennzeichnet), die auch aus verschiedenen Zellen bestehen und Hintergrundfarben aufnehmen kann.

    Und hier der entsprechende HTML-Code

    <table width=400 border=0 cellspacing=0 cellpadding=0 align="center">
    <tr>
    <td>&nbsp;</td>
    <td rowspan=5 background="pics/3b.gif><img src="pics/1pix.gif" width=1 height=15></td>
    <td>&nbsp;</td>
    <td rowspan=5 background="pics/3b.gif><img src="pics/1pix.gif" width=1 height=15></td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td><img src="pics/3b.gif" width=15 height=1></td>
    <td><img src="pics/3b.gif" width=400 height=1></td>
    <td><img src="pics/3b.gif" width=15 height=1></td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td valign="top">
      <table width=100% border=0 cellspacing=0 cellpadding=5
      align="center" bgcolor="#F0F0FF">
      <tr>
      <td valign="top" width=50%>Tabelleninhalt<br>
         und<br>noch<br>mehr<br>Tabelleninhalt</td>
      <td valign="top">&nbsp;</td>
      <td valign="top" width=50%>Tabelleninhalt<br>
         und<br>noch<br>mehr<br>Tabelleninhalt</td>
      </tr></table>
    </td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td><img src="pics/3b.gif" width=15 height=1></td>
    <td><img src="pics/3b.gif" width=400 height=1></td>
    <td><img src="pics/3b.gif" width=15 height=1></td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table>


    Das schöne an dieser Tabelle ist, dass sich die Haarlinien dynamisch an die entsprechenden Dimensionen der "Texttabelle" anpassen.

 

Last Updated: 28.11.2009 - Poly4Media: WebAdmin - © by Poly4Media® 2000-2009