Back to the very first page/zurück zur allerersten Seite

HTML-Tabellen, Bilder in "Rahmen"


Startseite
Homepage-Bastler
        
Grundlagen HTML Grafiken einfügen Tabellen Linksammlung
Javaspielereien I Javaspielereien II schwebende
Navigationsleiste
Frames Formulare
Beispielseite I Beispielseite II Beispielseite III Beispielseite IV Frame Beispielseite
Hintergründe Buttons Cliparts    

Tabellen bieten den großen Vorteil, dass Texte und Bilder ganz genau auf einer Seite plaziert werden können. Dabei ist für den Betrachter auf Anhieb gar nicht zu erkennen, dass es sich um eine Tabelle handelt. Man benutzt dafür Tabellen ohne Rahmen, also unsichtbare Tabellen. Außerdem bieten Tabellen aber auch noch die Möglichkeit der Betonung eines ausgewählten Bereichs mit Hilfe eines farbigen Rahmens.

Tabellen können ganz genau in ihrer Größe, Farbe, Rahmendicke und Rahmenfarbe bestimmt werden. Man kann sogar den Anstand des Textes zum Spaltenanfang und -ende oder den Abstand der einzelnen Spalten und Zeilen zueinander angeben, doch darauf will ich hier noch nicht eingehen.

Oft werden Tabellen auch ineinander verschachtelt. das heißt, dass in einer Tabelle mit zum Beispiel zwei Spalten, in der ersten Spalte eine weitere Tabelle steht, die drei Spalten hat und in der zweiten Spalte ein Bild in einer extra Tabelle mit dickem Rahmen steht. Hier sollte man genaustens darauf achten, nicht den Überblick zu verlieren, denn wenn man auch nur ein einziges Mal das Ende-Tag der Tabelle, der Zeile oder Spalte vergisst, erscheint im Browser nur ein leeres Blatt Papier. Auch das Vergessen einer einzigen spitzen Klammer bei den Tags hat den gleichen Effekt.

 

zurück zur Ausgangsseite Homepage-Erstellung




 

Unsichtbare Tabelle

Beispieltabelle nach
nebenstehendem Muster:
<table>
<tr>


<td> hier kommt der Text, der in der 1. Spalte der 1. Reihe stehen soll</td>

</tr>
</table>
  • Jede Tabelle besteht aus waagerechten Zeilen und senkrechten Spalten. Sie wird aus folgenden Tags zusammengebaut:

    <table> = der Anfangs-Tag der Tabelle
    <tr> = der Anfangs-Tag der Zeile
    <td> = der Anfangs-Tag der Spalte
    hier kommt der Text, der in der ersten Spalte der ersten Reihe stehen soll
    </td> = der Ende-Tag der Spalte
    </tr> = der Ende-Tag der Zeile
    </table> = der Ende-Tag der Tabelle

    Zum Kopieren für Deine Seite:
    <table>
    <tr>
    <td>
    Inhalt
    </td>
    </tr>
    </table>


  • Soll die Tabelle mehr als eine Spalte haben, so füge ich nach dem Ende-Tag der Spalte einen weiteren Anfangs- und Ende-Tag für eine Spalte ein.

    Beispieltabelle nach
    nebenstehendem Muster:
    <table>
    <tr>


    <td> hier kommt der Text, der in der 1. Spalte der 1. Reihe stehen soll</td>



    <td>
    hier kommt der Text, der in der 2. Spalte der 1. Reihe stehen soll</td>


    </tr>
    </table>
    <table border="0"> = der Anfangs-Tag der Tabelle
    <tr> = der Anfangs-Tag der 1. Zeile
    <td> = der Anfangs-Tag der 1. Spalte
    hier kommt der Text, der in der 1. Spalte der 1. Reihe/Zeile stehen soll
    </td> = der Ende-Tag der 1. Spalte
    <td> = der Anfangs-Tag der 2. Spalte
    hier kommt der Text, der in der 2. Spalte der 1. Reihe/Zeile stehen soll
    </td> = der Ende-Tag der 2. Spalte
    </tr> = der Ende-Tag der 1. Zeile
    </table> = der Ende-Tag der Tabelle

    Zum Kopieren für Ihre Seite:
    <table>
    <tr>
    <td>
    Inhalt 1
    </td>
    <td>
    Inhalt 2
    </td>
    </tr>
    </table>


  • Soll die Tabelle mehr als eine Zeile haben, kopiere ich den Teil, der beim Anfangs-Tag der Zeile beginnt und beim Ende-Tag der Zeile aufhört und setze ihn direkt im Anschluß an den Ende-Tag der Zeile ein.

    Beispieltabelle nach
    nebenstehendem Muster:
    <table>
    <tr>







    <tr>


    <td> hier kommt der Text, der in der 1. Spalte der 1. Reihe stehen soll</td>
    <td> hier kommt der Text, der in der 1. Spalte der 2. Reihe stehen soll</td>

    </tr>





    </tr>
    </table>
    <table border="0"> = der Anfangs-Tag der Tabelle
    <tr> = der Anfangs-Tag der Zeile
    <td> = der Anfangs-Tag der Spalte
    hier kommt der Text, der in der ersten Spalte der ersten Reihe/Zeile stehen soll
    </td> = der Ende-Tag der Spalte
    </tr> = der Ende-Tag der Zeile
    <tr> = der Anfangs-Tag der Zeile
    <td> = der Anfangs-Tag der Spalte
    hier kommt der Text, der in der ersten Spalte der zweiten Reihe/Zeile stehen soll
    </td> = der Ende-Tag der Spalte
    </tr> = der Ende-Tag der Zeile
    </table> = der Ende-Tag der Tabelle

    Zum Kopieren für Ihre Seite:
    <table>
    <tr>
    <td>
    Inhalt A
    </td>
    </tr>
    <tr>
    <td>
    Inhalt B
    </td>
    </tr>
    </table>


  • Es können beliebig viele Spalten und Zeilen nach obigem Muster eingefügt werden.
    Das Ganze hört sich theoretisch ganz kompliziert an, ist es aber nicht - lediglich gewöhnungsbedürftig :-). Schauen Sie einfach den Quelltext der untenstehenden Tabellen an und Sie wissen sicher, was ich meine.


Und hier nun ein Beispiel für eine unsichtbare Tabelle:

erste Zeile:
Dieser Text steht in der ersten Spalte der unsichtbaren Tabelle und zwar bündig am oberen Rand, was durch den Befehl valign="top" im td-Tag bestimmt wird.
  erste Zeile:
  • Jede Tabelle beginnt und endet mit dem Table-tag.
  • Dazwischen werden die Zeilen und Spalten geschrieben. Man beginnt mit der ersten Zeile, die mit dem Tag <tr> eingeleitet wird. Danach tippt man <td>, was den Beginn der ersten Spalte anzeigt.
  • Die Spalte wird mit einem </td> und danach die Zeile mit einem </tr> wieder gechlossen.
zweite Zeile:
Diesmal steht der Text mittig in der Spalte, was automatisch geschieht, wenn keine weitere Angabe im td-Tag gemacht wird.
 

zweite Zeile:
  • Danach beginnt man mit der zweiten Zeile wieder bei Spalte eins. Sieh Dir doch mal den Quelltext dieser Tabelle an. Dann siehst Du es ganz deutlich.

 
dritte Zeile:
Dieser Text steht in der ersten Spalte der unsichtbaren Tabelle und zwar bündig am unteren Rand
  dritte Zeile:
  • Die Spaltenbreite dieser unsichtbaren Tabelle habe ich auf je 45% der Gesamtbreite festgelegt plus einem Zwischenraum von 10% der Gesamtbreite. Die Breite der einzelnen Spalten wird durch den Befehl width="45%" in den entsprechenden td-Tag angegeben.
  • Die Gesamtbreite der Tabelle bestimmen Sie durch den Tag width="800" im table-Tag. Die Angabe ist die Pixel-Zahl.


 

zurück zur Ausgangsseite Homepage-Erstellung


Tabelle mit Rahmen

Und nun folgt die gleiche Tabelle mit Rahmen (border="1"), wobei die Rahmendicke hier ganz dünn ist, nämlich in Größe 1.
Außerdem habe ich die Tabelle eingefärbt. Das geht zeilen- oder spaltenweise oder wie hier auch für die ganze Tabelle, je nachdem in welchem Tag (table, tr oder td) ich den Befehl für den Hintergrund eingebe. Der Befehl lautet bgcolor="#FFFFA0".

erste Zeile:
Dieser Text steht in der ersten Spalte der Tabelle und zwar bündig am oberen Rand, was durch den Befehl valign="top" im td-Tag bestimmt wird.
  erste Zeile:
  • Jede Tabelle beginnt und endet mit dem Table-Tag.
  • Dazwischen werden die Zeilen und Spalten geschrieben. Man beginnt mit der ersten Zeile, die mit dem Tag <tr> eingeleitet wird. Danach tippt man <td>, was den Beginn der ersten Spalte anzeigt.
  • Die Spalte wird mit einem </td> und danach die Zeile mit einem </tr> wieder gechlossen.
zweite Zeile:
Diesmal steht der Text mittig in der Spalte, was automatisch geschieht, wenn keine weitere Angabe im td-Tag gemacht wird.
 

zweite Zeile:
  • Danach beginnt man mit der zweiten Zeile wieder bei Spalte eins. Sieh Dir doch mal den Quelltext dieser Tabelle an. Dann siehst Du es ganz deutlich.

 
dritte Zeile:
Dieser Text steht in der ersten Spalte der Tabelle und zwar bündig am unteren Rand
  dritte Zeile:
  • Die Spaltenbreite dieser Tabelle habe ich auf je 45% der Gesamtbreite festgelegt plus einem zwischenraum von 10%. Die Breite der einzelnen Spalten wird durch den Befehl width="45%" in den entsprechenden td-Tag angegeben.
  • Die Gesamtbreite der Tabelle bestimmen Sie durch den Tag width="670" im table-Tag. Die Angabe ist die Pixel-Zahl.


Achtung: die Breite der Spalten vergrößert sich automatisch, wenn der Inhalt größer ist, als die angegebene Pixelzahl, z. B. wenn man in die obige Tabelle ein Bild stellen würde, was größer ist als die vorgegebenen 45% von 670 Pixel.


zurück zum Seitenanfang








Bilder in einer Tabelle mit farbigem Rahmen


Die Grafik bzw. das Bild/Photo steht in einer Tabelle, die aus nur einer Zeile und nur einer Spalte besteht.

Der rote breite Rahmen wird durch den Befehl border="15" und bordercolor="#FF0000" erzeugt, was der Farbe rot entspricht.

Wenn es geht, schauen Sie doch mal dieses Bild mit Netscape und mit dem Internet Explorer an. Sie werden dabei bemerken, dass in Netscape der Rahmen zweifarbig ist und dreidimensional aussieht, im Internet Explorer jedoch nur eine Farbe hat und platt aussieht. Dies können Sie nicht beeinflussen. Es ist einfach eine verschiedene Auslegung des HTML-Codes.

zurück zum Seitenanfang


zurück zur Ausgangsseite Homepage-Erstellung


Zurück zur ersten Seite Zurück zum Inhaltsverzeichnis Zum Übersichtsplan/to Sitemap