Layout

Lektion 5 - Tabellen

Bisher hast du alles, was du deiner Webseite hinzugefügt hast, untereinander gereiht. Mit Tabellen bekommst du auch einiges nebeneinander.

 

5.1 Spalten, Zeilen und Zellen

Eine Tabelle besteht aus Zeilen und Zellen, die untereinander Spalten ergeben.

 
<= Zeilen =>
S
p
a
l
t
e
n
Zelle
Zelle
Zelle
Zelle
Zelle
Zelle
Zelle
Zelle
Zelle
Zelle
Zelle
Zelle
Zelle
Zelle
Zelle

Diese Tabelle ist 5 Spalten breit und 3 Zeilen lang. 5 Spalten mal 3 Zeilen ergibt 15 Zellen. In die Zellen kann man beliebigen HTML-Code einfügen.

Eine Tabelle besteht aus 3 verschiedenen Tags. Dem table-Tag, das die Tabelle einleitet und beendet, dem tr-Tag, das Zeilen einleitet und beendet und dem td-Tag, das Spalten einleitet und beendet. Der Bereich innherhalb der td-Tags macht die Zellen aus.

 

Dies ist eine Tabelle mit einer Spalte und einer Zeile. Insgesamt gibt es also nur eine Zelle.

 

<table>
    <tr>
        <td>
Zelle</td>
    </tr>
</table>

<table> und </table> umschließt die Tabelle. <tr> und </tr> umschließt eine Zeile. <td> und </td> umschließt eine Zelle in einer Zeile.

     

<table>
    <tr>
        <td>
Zelle</td>
        <td>
Zelle</td>
        <td>
Zelle</td>
    </tr>
</table>

Drei td-Tags nebeneinander ergeben drei nebeneinanderliegende Zellen, was drei Spalten ausmacht.

     
     

<table>
    <tr>
        <td>
Zelle</td>
        <td>
Zelle</td>
        <td>
Zelle</td>
    </tr>
    <tr>
        <td>
Zelle</td>
        <td>
Zelle</td>
        <td>
Zelle</td>
    </tr>
</table>

Hier siehst du, wie nach Beenden der ersten Zeile durch das schließende tr-Tag die nächste Zeile eingeleitet wird. Wieder ist die Tabelle drei Spalten lang. Du musst darauf achten, dass jede Zeile gleich viele Spalten hat, sonst bekommt dein Browser bei der übersetzung Probleme, hier feld auf einmal die letzte Zelle der zweiten Spalte:

     
   

Ein Planer könnte so aufgebaut sein:

 
Montag
Dienstag
Mitwoch
Donnerstag
Freitag
Samstag
Sonntag
Frühstück              
Brunch              
Mittagessen              
Kaffeepause              
Abendessen              

<table>
    <tr>
        <td>
&nbsp;</td>
        <td>

            <p align="center"><b>Montag</b></p>
        </td>
        <td>

            <p align="center"><b>Dienstag</b></p>
        </td>
        <td>

            <p align="center"><b>Mitwoch</b></p>
        </td>
        <td>

            <p align="center"><b>Donnerstag</b></p>
        </td>
        <td>

            <p align="center"><b>Freitag</b></p>
        </td>
        <td>

            <p align="center"><b>Samstag</b></p>
        </td>
        <td>

            <p align="center"><b>Sonntag</b></p>
        </td>
    </tr>
    <tr>
        <td>
Fr&uuml;hst&uuml;ck</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
    </tr>

    <tr>
        <td>
Brunch</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
    </tr>

    <tr>
        <td>
Mittagessen</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
    </tr>

    <tr>
        <td>
Kaffeepause</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
    </tr>

   <tr>
        <td>
Abendessen</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
    </tr>

</table>

6 tr-Tags stehen für 6 Zeilen, 8 td-Tags innerhalb dieser machen 8 Spalten und damit 8 Zellen pro Zeile aus, was insgesamt 6 mal 8 Zellen also 48 Zellen sind.

Innerhalb der Zellen kannst du nun alles an PHP-Code anwenden, was du kennst. Du kannst in die Zellen sogar weitere Tabellen einfügen.

 

Zelle

img
 
 
   
   

 

5.2 Eigenschaften von Tabellen

Wie du bestimmt bemerkt hast, sehen diese Tabellen, wenn du sie laut dem Code in deine Webseite einfügst, anders aus. Auch Tabellen kann man formatieren. Im table-Tag können folgende Eigenschaften übergeben werden:

Schlüsselwort

width
align
border
bordercolor
bgcolor
cellspacing
cellpadding

Bedeutung

Breite
Ausrichtung
Randbreite
Randfarbe
Hintergundfarbe
Zellraum
Zellauffüllung



   
   

<table width="200" align="center" border="2" bordercolor="#990000" bgcolor="#99CC99" cellspacing="4" cellpadding="0">
    <tr>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
    </tr>
    <tr>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
    </tr>
</table>

Width kannst du wie bei den Bildern in Pixel angeben, oder auch in % im Verhältnis zur ganzen Seite. Zum Beispiel width="50%". Align kennst du bereits aus den p-Tags. Zur Auswahl stehen dir left, right und center. Border ist die Randbreite, genau wie bei den Bildern. Auch hier musst du die Breite in Pixeln eintragen. Bordercolor ist die Randfarbe, hier kannst du jeden wünschenswerten Hexadezimalwert eintragen, genauso wie bei bgcolor, der Hintergrundfarbe der Tabelle. Mit Cellspacing bestimmst du, wie viele Pixel Abstand zwischen den Zellen in der Tabelle sein soll, und mit Cellpadding, wie viele Pixel Abstand der Inhalt einer Zelle von seinem Rand haben soll.

 

5.3 Eigenschaften von Zellen

Du kannst auch einzelnen Zellen innerhalb der td-Tags formatieren:

Schlüsselwort

width
height
align
bgcolor
valign

Bedeutung

Breite
Höhe
Horizontale Inhaltsausrichtung
Hintergundfarbe
Vertikale Inhaltsausrichtung



Mitte Oben  
     
     
     

<table width="300" border="1" cellspacing="0" cellpadding="0" align="center">
    <tr>
        <td width="20" bgcolor="#CC0000">

           <font color="#FFFFFF">Mitte</font>
        </td>
        <td height="50" align="center" valign="top">
Oben</td>
        <td width="30%">
&nbsp;</td>
    </tr>
    <tr>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
    </tr>
    <tr>
        <td>
&nbsp;</td>
        <td bgcolor="#3333CC">
&nbsp;</td>
        <td height="30">
&nbsp;</td>
    </tr>
    <tr>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
        <td bgcolor="#FF00FF">
&nbsp;</td>
    </tr>
</table>

Mit Width und Height legst du Breite und Höhe einer Zelle fest. Achte darauf, dass alle Zellen der gleichen Spalte von Width betroffen sind, und alle Zellen der gleichen Zeile von Height. Mit Align kannst du festlegen, wie der Inhalt der Zelle ausgerichtet sein soll. Bgcolor steht auch hier für Hintergrundfarbe. Mit dem Schlüsselwort valign kannst du festlegen, dass der Inhalt der Zelle nicht mittig angezeigt wird (siehe Mitte), sondern oben (siehe Oben). Das passiert mit der Eigenschaftszuweisung valign="top".

 

5.4 Colspan und Rowspan

Colspan und Rowspan sind weitere Eigenschaften von Zellen. Mit Colspan kann man eine Zelle über mehere Zeilen verlängern, und mit Rowspan über mehrere Spalten.

rowspan
colspan
   
 
colspan + rowspan
 

Beginnen wir mit Colspan:

 
   

Diese Tabelle besteht aus 2 Zeilen und 2 Spalten. Die erste Zelle der ersten Zeile geht über 2 Spalten, in diesem Falle also über die ganze Tabelle.

<table width="300" border="2">
    <tr>
        <td colspan="2">
&nbsp;</td>
    </tr>
    <tr>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
    </tr>
</table>

Im ersten tr-Tag, das die erste Zeile einschließt, ist nur ein td-Tag zu finden, das allerdings die Eigenschaft colspan="2" besitzt und sich daher über die 2 Spalten der zweiten Zeile erstreckt.

Ein weiteres Beispiel:

       
     
       

<table width="300" border="2">
    <tr>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
    </tr>
    <tr>
        <td>
&nbsp;</td>
        <td colspan="2">
&nbsp;</td>
        <td>
&nbsp;</td>
    </tr>
    <tr>
        <td>
&nbsp;</td>
        <td >
&nbsp;</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
    </tr>
</table>

Diese Tabelle besteht aus 4 Spalten und 3 Zeilen. Die zweite Zelle der zweiten Spalte erstreckt sich über 2 Spalten.

 

Mit rowspan funktioniert das ähnlich:

   
 

<table width="300" border="2">
    <tr>
        <td rowspan="2">
&nbsp;</td>
        <td>
&nbsp;</td>
    </tr>
    <tr>
        <td>
&nbsp;</td>
    </tr>
</table>

Diese Tabelle besteht aus 2 Spalten und 2 Zeilen. Die erste Zelle der ersten Spalte ersteckt sich über 2 Zeilen. Da dies die erste Zelle der 2. Zeile betrifft, wird in der 2. Zeile nur ein td-Tag angeführt.

Ein weiteres Beispiel:

     
   
   
   

<table width="300" border="2">
    <tr>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
        <td rowspan="2">
&nbsp;</td>
    </tr>
    <tr>
        <td>
&nbsp;</td>
        <td rowspan="3">
&nbsp;</td>
    </tr>
    <tr>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
    </tr>
    <tr>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
    </tr>
</table>

Die Tabelle besteht aus 4 Spalten und 3 Zeilen. Die dritte Zelle der 1. Spalte erstreckt sich über 2 Zeilen, und die zweite Zelle der zweiten Spalte ersteckt sich über 3 Zeilen. Die tr-Tags stehen, ich sage es noch einmal, für die Zeilen. Im ersten tr-Tag das dritte td-Tag ist die 3. Spalte der ersten Zeile. Da sie in die zweite Zeile rutscht, gibt es im 2. tr-Tag bereits ein td-Tag weniger. Im 2. tr-Tag das 2. td-Tag ist unsere 2. Zelle der 2. Zeile. Sie ersteckt sich über 3 Zeilen. Also wird aus dem nächsten und übernächsten tr- Tag jeweils ein td-Tag entfernt.

 

Nun kann man colspan und rowspan in einer Tabelle unterbringen:

Name: daisydark
Userbild
img
Status: Schüler

Nahrung

img img img


<table width="300" border="2">
    <tr>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
        <td rowspan="3">
&nbsp;</td>
    </tr>
    <tr>
        <td >
&nbsp;</td>
        <td>
&nbsp;</td>
    </tr>
    <tr>
        <td colspan="2">
&nbsp;</td>
    </tr>
</table>

So eine Tabelle kann man sich z. B. als Schülerseite vorstellen. Sie besteht aus 3 Spalten und 3 Zeilen. Die 3. Zelle der 1. Zeile geht über 3 Zeilen. Je ein td-Tag muss also aus dem nächsten und übernächsten tr-Tag entfernt werden. Die erste Zelle der 3. Zeile geht über 2 Spalten, und bleibt damit als einziges td-Tag im letzten tr-Tag enthalten.

Und ein Letztes noch

     
   
 

<table width="300" border="2">
   <tr>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
        <td>
&nbsp;</td>
   </tr>
   <tr>
        <td>
&nbsp;</td>
        <td colspan="2" rowspan="2">
&nbsp;</td>
   </tr>
   <tr>
        <td>
&nbsp;</td>
   </tr>
</table>

Diese Tabelle besteht aus 3 Spalten und 3 Zeilen. Die Zweite Zelle der zweiten Zeile geht über 2 Spalten, also muss ein td-Tag aus der gleichen Zeile entfernt werden. Außerdem geht diese Zelle über 2 Zeilen. Da sie Zelle nun aber auch über 2 Spalten geht, müssen aus der nächsten Zeile 2 Zellen entfernt werden.

 

5.5 Tabellenlayout

Nun kannst du dir in etwa vorstellen (bzw. jetzt nicht mehr, am Anfang der Lektion vielleicht schon noch ;), wie man Inhalt von Webseiten nebeneinander bekommt. Ein einfaches Tabellenlayout könnte z. B. (verkleinert) so aussehen:

  Meine kleine Webseite

imgimg
img
img

Willkommen auf meiner Webseite!

img

Hier lerne ich Schritt für Schritt HTML. Das Grundgerüst ist bereits aufgesetzt, grade versuche ich mich am Text. Es kann nicht mehr lange dauern, dann wird hier der erste Link und das erste Bild angezeigt werden. Bis dahin werde ich fleißig die Aufgaben auf dieser Seite ausführen, damit ich bald meine eigene Webseite mit meinem eigenen Inhalt erstellen kann, die von der ganzen Welt betrachtet werden kann.

Die ganze Tabelle ist 90% breit, mit einer Zellauffüllung von 10, damit die Schrift etwas eingerückt ist, und einem Zellraum von 0, damit keine Lücken entstehen. Es gibt keinen Rahmen, die Rahmenbreite ist 0. Insgesamt besteht die Tabelle aus 2 Spalten und 2 Zeilen, wobei die 1. Zelle der 1. Zeile über 2 Spalten geht. Die 1. Zelle der 2. Zeile ist 130 Pixel breit, und hat, wie die 1. Zelle der 1. Zeile einen lilanen Hintergrund. Die 2. Zelle der 2. Zeile hat einen helleren Hintergrund, denn hierauf befindet sich der Inhalt der Webseite.

<table width="90%" border="0" cellspacing="0" cellpadding="5" align="center">
    <tr>
        <td colspan="2" bgcolor="#9900CC" valign="top">
            <p align="center">
                <font color="#FFFF00">&nbsp; &nbsp; <b>
Meine kleine Webseite</b></font>
            </p>

        </td>
    </tr>
    <tr>
        <td width="130" bgcolor="#9900CC" valign='top'>

            <p align="center">
                <a href="seiten/uebermich.html">
                    <img src="bilder/but_uebermich.gif" width="89" height="25" border="0" >
                </a><br>
                <a href="bilder/fotos/galerie1.html">
                    <img src="bilder/but_galerie.gif" width="89" height="25" border="0" >
                </a><br>
                <a href="seiten/vorhaben.html">
                    <img src="bilder/but_plaene.gif" width="89" height="25" border="0" >
                </a><br>
                <a href="seiten/lektion05.html">
                    <img src="bilder/but_uebung.gif" width="89" height="25" border="0" >
                </a>
            </p>
        </td>
        <td bgcolor="#CCCCFF" valign='top'>

            <p align="center">
                <font size="5" color="#FF0000">
                    <b><u>
Willkommen auf meiner Webseite!</u></b>
                </font>
            </p>
            <p align="center">

                <img src="seite/blumen/3.gif" width="80" height="80">
            </p>
            <p align="justify">

                Hier lerne ich Schritt f&uuml;r Schritt HTML. Das Grundger&uuml;st
               ist bereits aufgesetzt, grade versuche ich mich am Text. Es kann nicht
               mehr lange dauern, dann wird hier der erste Link und das erste Bild
               angezeigt werden. Bis dahin werde ich flei&szlig;ig die Aufgaben auf dieser
               Seite ausf&uuml;hren, damit ich bald meine eigene Webseite mit meinem eigenen
                Inhalt erstellen kann, die von der ganzen Welt betrachtet werden kann.
            </p>
        </td>
    </tr>
</table>


hr

5.6 Übungen

5.6.1 Füge in die Seite uebermich.html eine Tabelle mit 2 Spalten und einer Zeile ein. Die Zellauffüllung soll 5 Pixel sein und kein Rahmen soll vorhanden sein. Die Tabelle ist in der Mitte der Seite. Füge in die linke Zelle das Bild bilder/passfoto.jpg ein. In die rechte Zelle fügst du erneut eine Tabelle ein, mit 2 Spalten und 3 Zeilen. In den linken Zellen schreibst du untereinander je fett gedruckt Name, Geburtstag und Sternzeichen, und in die entsprechenden Zellen der nächsten Spalte schreibst du in normaler Schriftgröße deine Angaben.
Verschachtelte Tabellen sind ein Weg, Colspan und Rowspan zu umgegen!

img

ODER

...du hast dich nicht abschrecken lassen und erstellst eine Tabelle mit 3 Spalten und 4 Zeilen. die 1. Zelle der ersten Spalte soll über 4 Zeilen gehen. In ihr fügst du das Bild bilder/passfoto.jpg ein. Die 1. Zelle der 2. Spalte der 4. Zeile (Die 1. Zelle der 1. Spalte der 4. Zeile wurde bereits durch die 1. Zelle der 1. Spalte der 1. Zeile gelöscht) geht über 2 Spalten und dient nach unten hin als Platzhalter, damit die Zellen des Steckbriefs nicht mit der länge des Bildes auseinandergehen. Und so ist die Höhe der Zellen der 2. und dritten Spalte in der 1. bis zur 3. Zeile 25. In die 2. Zelle der 1. Zeile schreibst du in fettdruck 'Name'. In die 1. Zelle der 2. Spalte der 2. Zeile (die 1. Zelle der 1. Spalte der 2. Zeile wurde ebenfalls bereits durch die 1. Zelle der 1. Spalte der 1. Zeile gelöscht) schreibst du in fettdruck Geburtstag, und in der Zelle darunter Sternzeichen. Die benachbarten Zellen füllst du jeweils mit der Antwort aus.

img

 

5.6.2 Fülle die Seite seiten/lektion05.html mit verschiedenen Tabellen.

5.6.3 Entwerfe dein eigenes Tabellenlayout und gestalte deine Startseite index.html um.

« zurück Inhalt | Fragen       Kurs weiter »
Layout