HTML und Tabellen:
3 wichtigsten HTML-Varianten:
- STRICT: bei dieser Variante sind nicht alle Attribute erlaubt(zB: font, align, centre, bgcolor). Stattdessen werden Stylesheets zur Formatierung verwendet. Eine weitere Besonderheit ist, dass alle Inhalte in <body> </body> in Block-Elementen stehen müssen.
- TRANSITIONAL: erlaubt Attribute, die bei STRICT nicht erlaubt sind. Hier müssen die Inhalte im Body als Text oder Inline-Element notiert sein.
- FRAMESET: ist fast ident zur Variante TRANSITIONAL, der einzige Unterschied besteht in der erforderlichen Elementverschachtelung unter des Wurzelelements html. Statt einem body-Elements benötigt man hier ein frameset-Element. Grundsätzlich wird am Anfang eines HTML-Dokuments die Variante durch den entsprechenden Code am Anfang angegeben.
CODES:
- STRICT: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
- TRANSITIONAL: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
- FRAMESET: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>
TABELLE:
–> bei einer Tabelle muss jede Reihe die gleiche Spaltenanzahl haben!!!
- AUFBAU:
Grundgerüst:
<table> Tabellenanfang
<tr> Beginn der 1. Zeile
<td> </td> 1.Spalte
<td> </td> 2.Spalte
<td> </td> 3.Spalte
</tr> Ender der 1. Zeile
für weitere Zeilen das ganze einfach wiederholen.
</table> Tabellenende
KOPFZEILE:
Tabellen können eine Kopfzeile haben:
<thead> Beginn der Kopfzeile
<tr>
<th> </th>
<th> </th> kopfzeile- Text ist fett und zentriert
<th> </th>
</tr>
</thead> Ende der Kopfzeile
- weitere Tabellen-Attribute:
(wird bei <table> dazu geschrieben)
cellspacing=”…” Zellenabstand
cellpadding=”…” Zeileninnenabstand
width=”…” Breite der gesamten Tabelle (in Pixel oder Prozent)
height=”…” Höhe der gesamten Tabelle
border=”…” Breite des Rahmen der Tabelle
align=”left” (bzw. ”center“ oder ”right”) Anordnung in der Zelle (waagrecht)
valign=”top (bzw. ” middle“ oder ” bottom ”) Anordnung in der Zelle (senkrecht) (wird bei <td> oder <th> dazu geschrieben)
width=”…” Breite einer Tabellenzelle
height=”…” Höhe einer Tabellenzelle
colspan=”…” Verbindet Zellen einer Zeile
style=”background-image:url (Bildname)” Hintergrundbild einer Zelle Unsere Arbeit der Stunde sieht wie folgt aus:
Die Codes für diese Arbeit kann ich leider nicht hinein stellen, da ich sie in der Schule abgespeichert habe.
