HTML und XHTML

Tabellen

machen wir mal eine

Unsere erste Tabelle hat überhaupt keine Schikanen und bleibt dadurch sehr einfach.

In den Übungsdateien befindet sich ein Ordner mit dem Namen buecher und darin die Datei index.html. In dieser Datei wollen wir unseren Kunden eine Bücherliste in Form einer Tabelle anzeigen.

`<table>`

Übung 38

Öffne die Datei buecher/index.html und füge nach dem Text, der sich bereits darin befindet, ein <table>-Element ein.

Wie du aus dem Vorhergehenden weisst, wird dadurch auf dem Schirm noch gar nichts sichtbar werden. Aber wir nehmen's Schritt für Schritt. Bis jetzt sollte es in deiner Datei ungefähr so aussehen:

<p>In Zusammenarbeit mit <a href="http://amazon.de">Amazon.de</a> können wir Ihnen
 diese Bücher nun auch online zum Verkauf anbieten.
 Neben jedem Buch finden Sie einen <q>jetzt kaufen</q>-Knopf,
 der Ihnen mehr Informationen bringt und die
 nötigen Schritte zum Kauf des Buches unterstützt.</p>

<table>

</table>

Hoffentlich hast du auch an das </table>-Tag gedacht. Das <table>-Element ist nicht leer (auch wenn wir jetzt noch nichts hinein geschrieben haben), also muss es durch ein Abschluss-Tag beendet werden.

`<tr>`

Nun enthält eine Tabelle ja <tr>-Elemente. In unserem Falle wollen wir fünf Bücher empfehlen und brauchen dafür also sechs <tr>-Elemente (ein zusätzliches für die Titelzeile).

Übung 39

Erstelle nun innerhalb des soeben angelegten <table>-Elementes sechs <tr>-Elemente.

Auch die <tr>-Elemente sind nicht leer. tr steht übrigens für Table Row, also für Tabellen-Zeile.

Wenn du die Elemente erstellt hast, sollte es etwa so aussehen:

<p>In Zusammenarbeit mit <a href="http://amazon.de">Amazon.de</a> können wir Ihnen
 diese Bücher nun auch online zum Verkauf anbieten.
 Neben jedem Buch finden Sie einen <q>jetzt kaufen</q>-Knopf,
 der Ihnen mehr Informationen bringt und die
 nötigen Schritte zum Kauf des Buches unterstützt.</p>

<table>

<tr></tr>

<tr></tr>

<tr></tr>

<tr></tr>

<tr></tr>

<tr></tr>

</table>

<td>

Übung 40

Zu jedem Buch haben wir fünf Angaben, also brauchen wir innerhalb jedes <tr>-Elements fünf <td>-Elemente.

Denk daran, dass Abstände (Leerschläge, Tabulatoren und Zeilenumbrüche) im HTML-Text manchmal hilfreich sind, um die Übersicht zu behalten.

td steht für Table Data. Ich habe die <td>-Elemente eingefügt und mit Leerschlägen und Zeilenumbrüchen eine gewisse Darstellung in den HTML-Code gebracht, die aufzeigt, welche Elemente in welchen andern enthalten sind. Das Resultat könnte etwa so aussehen:

<p>In Zusammenarbeit mit <a href="http://amazon.de">Amazon.de</a> können wir Ihnen
 diese Bücher nun auch online zum Verkauf anbieten.
 Neben jedem Buch finden Sie einen <q>jetzt kaufen</q>-Knopf,
 der Ihnen mehr Informationen bringt und die
 nötigen Schritte zum Kauf des Buches unterstützt.</p>

<table>

   <tr>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
   </tr>
   <tr>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
   </tr>
   <tr>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
   </tr>
   <tr>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
   </tr>
   <tr>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
   </tr>
   <tr>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
   </tr>

</table>

Damit haben wir bereits eine Tabelle angelegt. Sie hat sechs Zeilen zu je fünf Zellen.

Übrigens sollten alle Zeilen gleich viele Zellen haben. Das leuchtet sicher ein. Abweichungen sind allerdings möglich (nichts und niemand kann dich schliesslich daran hindern, irgendwo einfach aus Jux und Tollerei mal eine zusätzliche Zelle zu liefern oder eine zu unterdrücken). Allerdings wird sich der Browser dann irgendwie zu helfen wissen (magic!) und das Resultat entspricht dann nicht notwendigerweise deinen Vorstellungen.

Nun haben wir also eine wundervolle Tabelle mit dreissig Zellen, die alle noch immer leer sind. Dem wollen wir als nächstes abhelfen. Der Inhalt gehört in die <td>-Elemente (schliesslich steht das d in td ja für Daten. In den <td>-Elementen kann's nun aber nicht nur Text haben, sondern praktisch alles, von Überschriften und Links über Bilder bis zu vollständigen Tabellen. In solchen Extremfällen wird der HTML-Code dann doch einigermassen komplex und erfordert etwas Konzentration (und den Einsatz von noch mehr Leerschlägen), aber wenn man Tabellen für das einsetzt, wozu sie gedacht sind, werden wir solchen Auswüchsen selten begegnen.

Übung 41

Füllen wir also unsere Tabelle mit Inhalt.

Das ist relativ einfach. Als erstes schreiben wir die Spalten-Überschriften. Sie werden die fünf Zellen der ersten Zeile belegen. Schreib sie also ab (oder kopier sie aus dieser Aufgabenstellung). Sie lauten:
Umschlag
Titel
Autor
Preis
jetzt kaufen

Nun sollte die erste Zeile ungefähr so aussehen:

<table>

   <tr>
       <td>Umschlag</td>
       <td>Titel</td>
       <td>Autor</td>
       <td>Preis</td>
       <td>jetzt kaufen</td>
   </tr>

Übung 42

Fehlt noch der Rest der Daten. Im Verzeichnis zeug deiner Übungsdateien findest du eine Datei mit dem Namen die_buecher.txt. Sie enthält alle nötigen Angaben. Du brauchst keinen weiteren Code mehr zu erstellen, kopiere einfach die Angaben zu den Büchern aus die_buecher.txt an die entsprechenden Stellen in unserer HTML-Datei.

Das war eine mechanische Angelegenheit. Das Resultat siehst du hier:


<table>

   <tr>
       <td>Umschlag</td>
       <td>Titel</td>
       <td>Autor</td>
       <td>Preis</td>
       <td>jetzt kaufen</td>
   </tr>
   <tr>
       <td><img src="../images/buecher/afrika_s.jpg" alt="Buchumschlag" /></td>
       <td>Afrikanische Küche</td>
       <td>Dodo Liade</td>
       <td>$21.60</td>
       <td><a href="http://www.amazon.de/exec/obidos/ASIN/3934552005/homepapa-21">jetzt kaufen</a></td>
   </tr>
   <tr>
       <td><img src="../images/buecher/currys_s.jpg" alt="Buchumschlag" /></td>
       <td>Indische Currys. Die 50 besten Originalrezepte aus allen Teilen des Landes</td>
       <td>Camellia Panjabi</td>
       <td>$10.00</td>
       <td><a href="http://www.amazon.de/exec/obidos/ASIN/3884728113/homepapa-21">jetzt kaufen</a></td>
   </tr>
   <tr>
       <td><img src="../images/buecher/indien_s.jpg" alt="Buchumschlag" /></td>
       <td>Das große indische Kochbuch</td>
       <td>Julie Sahni</td>
       <td>8.95</td>
       <td><a href="http://www.amazon.de/exec/obidos/ASIN/3453404319/homepapa-21">jetzt kaufen</a></td>
   </tr>
   <tr>
       <td><img src="../images/buecher/thai_s.jpg" alt="Buchumschlag" /></td>
       <td>Thailändische Küche</td>
       <td>Cornelia Zingerling, Noi D. Malee</td>
       <td>$5.95</td>
       <td><a href="http://www.amazon.de/exec/obidos/ASIN/3809412074/homepapa-21">jetzt kaufen</a></td>
   </tr>
   <tr>
       <td><img src="../images/buecher/lexikon_s.jpg" alt="Buchumschlag" /></td>
       <td>Lexikon der Kräuter und Gewürze</td>
       <td>Ulrike Bültjer</td>
       <td>$23.00</td>
       <td><a href="http://www.amazon.de/exec/obidos/ASIN/380941283X/homepapa-21">jetzt kaufen</a></td>
   </tr>

</table>

Homepapa
MÃ¤rz 2004

Vorheriger Abschnitt:
the magic

NÃ¤chster Abschnitt:
komplizierter