Tabellen - Grundlagen

 
 
   Vivisimo:
 
 
IgfSek2 Html-Kurs     JavaScript SelfHtml

Inhalt

IGFSEK2.DE

01: Der Editor
02: Grundlagen
03: Seitenaufbau
04: Zeilen u. Absätze
05: Überschriften
06: fett und kursiv...
07: hoch und tief...
08: Trennlinien
09: Listen, ...
10: Hyperlinks
11: Relative Links
12: Grafiken
12+:Bildbearbeitung
13: Farben
14: Tabellen
15: Frames
16: Cascading...

Woraus besteht ein Tabellenaufbau?

Tabellen bestehen aus Reihen und Spalten. Diese werden wir nun schrittweise aufbauen.

Grundlage ist der HTML-TAG <table>. Damit fängt jede Tabelle und und mit dem entsprechenden END-TAG hört diese auf. Wichtig ist, daß beide gesetzt werden.

 <table>
</table>

Mit diesem Code passiert noch gar nichts, da weder eine Anzahl der Spalten noch die Anzahl der Zeilen angegeben wurde.

Als nächstes legen wir eine Zeile mit <tr> an. Das tr steht für engl. table row = Tabellen Reihe

 <table>
<tr>
</tr>
</table>

Auch jetzt wird noch nichts angezeigt - es fehlen die Tabellendatenzellen noch - also der HTML-TAG <td>, das für das engl. table data = Tabellen Daten steht

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

Auch jetzt wird noch wenig angezeigt, da kein Inhalt da ist. Tragen wir als Inhalt in unsere Tabelle "1.Zeile, 1. Spalte" ein.

 <table>
<tr>
<td>
1.Zeile, 1. Spalte
</td>
</tr>
</table>
INHALT 1

Irgendwie sieht es auch noch nicht anders aus, wie unsere bisherigen HTML-Seiten - also soll der Rahmen der Tabelle noch angezeigt werden.

 <table border=1>
<tr>
<td>
Inhalt 1
</td>
</tr>
</table>
INHALT 1

Und nun kommen noch mehr Spalten in Form von <td> hinzu

 <table border=1>
<tr>
<td>
Inhalt 1
</td>
<td>
Inhalt 2
</td>
</tr>
</table>
INHALT 1 INHALT 2

So, das gleiche noch mit mehr Zeilen - beides kann nach belieben variiert werden.

 <table border=1>

<tr>
<td> INHALT ZELLE 1 </td>
<td> INHALT ZELLE 2 </td>
</tr>

<tr>
<td> INHALT ZELLE 3 </td>
<td> INHALT ZELLE 4 </td>
</tr>

</table>
INHALT 1 INHALT 2
INHALT 3 INHALT 4

So sollte ein Tabellenaufbau dann aussehen. Achte auf die Einrückungen, die die einzelnen Zellen verdeutlichen.

Um die Übersichtlichkeit und Probleme zu umgehen sollte besonders bei Tabellen auf sauberen Code geachtet werden. Also auf jeden Fall mit Einrückungen arbeiten!