News
Angebote
       ?print">Druckversion
Druckversion
  Toolbox Tipps & Tricks HTML Toolbox
 
Tipp 2: Tabellen in HTML - Schicke und flexible Rahmen

      Tabellen mit Grafikrahmen
    Die meisten von Ihnen haben das sicher schon einmal gesehen. Eine Tabelle mit abgerundeten Ecken und 3D-Effekt Rahmen. Die Programmierung ist jedoch gar nicht so aufwendig, denn hier werden lediglich ein paar Grafiken zur Unterstützung benötigt.

    Doch schauen Sie sich zuerst das Ergebnis an:

 
  Hier ist der eigentliche Textbereich, den Sie frei zur Verfügung haben.
Es folgen lediglich Dummyzeilen, um den Textbereich auszufüllen. Es folgen lediglich Dummyzeilen, um den Textbereich auszufüllen. Es folgen lediglich Dummyzeilen, um den Textbereich auszufüllen.
 
 


      Wie wurde es gemacht?
    Alles was Sie brauchen, ist eine 3 x 3 Zellen große Tabelle, vier kleine Grafiken für die Ecken, vier dünne Linien der Ränder und den Wert der Füllfarbe. Das Erstellen kann mit einem Grafikprogramm wie z.B. Paint Shop Pro 7 sehr einfach erfolgen:

    1. Sie sollten wissen, auf welcher Hintergrundfarbe die Tabelle später dargestellt wird. Erstellen Sie ein neues Bild mit ca. 320 x 240 Punkten.


    2. Weisen Sie dem Hintergrund die entsprechende Wunschfarbe zu.


    3. Wählen Sie im Menü "Ansicht": Raster - und wählen Sie die Funktion "An Raster ausrichten"


    4. Im "Formenwerkzeug" verwenden Sie ein "gefülltes Rechteck mit gerundeten Ecken" und ziehen ein ca. 260 x 180 Pixel großes Rechteck auf. Achtung: Antialiasing deaktivieren!


    5. Duplizieren Sie diese Ebene und wandeln Sie die Vektorebene in eine Rasterebene um. Dadurch können Sie sehr leicht der Vektorebene je nach Bedarf andere Farben zuordnen und daraus neue Rasterebenen zur Weiterverarbeitung generieren.


    6. Auf das gerundete Rechteck der Rasterebene wenden Sie nun aus dem Menü "Effekte": 3D-Effekte/Innenfase... an.


    7. Wählen Sie aus den Voreinstellungen z.B. "Rahmen" und ändern die Werte je nach Ihren Bedürfnissen.


    8. Mit dem Auswahlwerkzeug selektieren Sie anschließend nacheinander die vier Ecken und vier Teile aus den Rändern.


    9. Mit "Strg+C" und "Strg+V" kopieren Sie die jeweiligen Stücke und fügen sie in eine neue Auswahl ein.


    10. Die einzeln Grafiken speichern Sie als GIFs ab. Bitte keine Farbreduktion bzw. Dithering verwenden. Für die Randstücke genügt theoretisch ein 1-Pixel hohes waagrechtes und ein 1-Pixel breites senkrechtes Stück.


    11. Um zu vermeiden, dass die Tabelle Zwischenräume zeigt, müssen die "cell-" Angaben auf "0" gesetzt werden. Wo die kleinen Grafiken platziert werden, zeigt die schematische Darstellung mit blauem Rahmen.


    Hier unten sehen Sie die entsprechende Aufteilung der Tabellenzellen. Die Ecken der Tabelle sind als normale Bilder und die Randstücke als Hintergrundbilder in die entsprechenden Tabellenzellen eingefügt. Für die Hintergrundfarbe wurde hier ebenfalls ein kleines quadratisches GIF (1 Pixel würde genügen) abgespeichert.

 
  Hier ist der eigentliche Textbereich, den Sie frei zur Verfügung haben.
Es folgen lediglich Dummyzeilen, um den Textbereich auszufüllen. Es folgen lediglich Dummyzeilen, um den Textbereich auszufüllen. Es folgen lediglich Dummyzeilen, um den Textbereich auszufüllen.
 
 


      Die Grafiken und der HTML-Code
    Hier nun die einzelnen Elemente der Tabelle nach ca. 15 Minuten Arbeit.
lo.gif ob.gif ro.gif li.gif gelb.gif re.gif lu.gif un.gif ru.gif
    Und hier der entsprechende HTML-Code

    <table border=0 cellspacing=0 cellpadding=0>
    <tr>
    <td><img src="lo.gif" width=31 height=21 border=0></td>
    <td background="ob.gif">&nbsp;</td>
    <td><img src="ro.gif" width=32 height=21 border=0></td>
    </tr>
    <tr>
    <td background="li.gif">&nbsp;</td>
    <td width=350 background="gelb.gif">Hier ist der eigentliche Textbereich, den Sie frei zur Verfügung haben.lt;brgt;Es folgen lediglich Dummyzeilen, um den Textbereich auszufüllen. Es folgen lediglich Dummyzeilen, um den Textbereich auszufüllen. Es folgen lediglich Dummyzeilen, um den Textbereich auszufüllen.</td>
    <td background="re.gif">&nbsp;</td>
    </tr>
    <tr>
    <td><img src="lu.gif" width=31 height=22 border=0></td>
    <td background="un.gif" width=350>&nbsp;</td>
    <td><img src="ru.gif" width=32 height=22 border=0></td>
    </tr>
    </table>

    Das besonders schöne an dieser Tabelle ist, dass sich die Randstücke dynamisch an die entsprechenden Dimensionen der "Textzelle" anpassen.

 

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