|
|
|
|
 Wegweiser:
Startseite >>
Übersicht HTML-Kurs
>>
Kapitel 6: Tabellen editieren
| HTML Kurs - Kapitel 6: Tabellen editieren |
Manchmal kommt es vor, dass in einer Tabelle Einträge gruppiert werden sollen. Dazu benötigen Sie eine eigenen Überschrift, die sich über
mehrere Zeilen erstreckt.
HTML bietet Ihnen für diesen Zweck die Möglichkeit, mehrere Zeilen gezielt miteinander zu verbinden.
Der Befehl dazu lautet colspan.
Diesem Attribut weisen Sie die Anzahl der Spalten zu, über sie sich die Zelle erstrecken soll.
Beispiel:
<table border>
<tr>
<th colspan="3">Überschrift über allen Spalten</h1>
</tr>
<tr>
<td>Inahlt 1</td>
<td>Inhalt 2</td>
<td>Inhalt 3</td>
</tr>
</table>
|
<< So sieht`s aus >>
Dieses Spiel funktioniert natürlich auch in die andere Richtung (zeilenweise).
er Befehl hierzu lautet rowspan.
Beispiel:
<table border>
<tr>
<th rowspan="3">Überschrift aller Zeilen</h1>
<td>Inahlt 1</td>
</tr>
<tr>
<td>Inhalt 2</td>
</tr>
<tr>
<td>Inhalt 3</td>
</tr>
</table>
|
<< So sieht`s aus >>
Bis jetzt, haben es wir dem Browser überlassen, wie breit die Tabelle angezeigt wird. Sie können es jedoch auch selbst festlegen.
Hierzu dienen die Befehle width und height.
Beispiel:
<table border width="90%" height="300">
<tr>
<td>Text 1</td>
<td>Text 2</td>
<td>Text 3</td>
</tr>
</table>
|
<< So sieht`s aus >>
Wenn Sie nun die Fensterbreite der Beispielseite ferändern, werden Sie merken, dass Sich die Tabelle
der Seitengröße anpasst und immer 90% der Fensterbreite einnimmt, wohingegen wir der Tabellenhöhe einen
festen Pixelwert zugeordnet haben.
Einzelen Zeilen und Spalten können ebenfalls manipuliert werden. So lassen sich für jede Zeile bestimmte Zeilenhöhen angeben,
bei den Spalten könne Sie Spaltenweise die Breite verändern.
Beispiel:
<table border>
<tr>
<td height="200">Text 1</td>
<td>Text 2</td>
<td>Text 3</td>
</tr>
<tr>
<td height="100">Text 4</td>
<td>Text 5</td>
<td>Text 6</td>
</tr>
</table>
|
<< So sieht`s aus >>
Wie bereits erwähnt, können Sie die Spaltenbreite selbst festlegen.
Dazu benötigen Sie den Befehl width.
Beispiel:
<table border>
<tr>
<td width="200">Text 1</td>
<td width="120">Text 2</td>
<td width="80">Text 3</td>
</tr>
<tr>
<td>Text 4</td>
<td>Text 5</td>
<td>Text 6</td>
</tr>
</table>
|
<< So sieht`s aus >>
Natürlich können Sie bei allen Größenangaben auch prozentualle Werte angeben, dann passt sich die Tabelle
dem Browserfenster an.
Da die bis jetzt gezeigten Beispiele ein wenig langweilig waren, kommen wir nun darauf zu sprechen,
wie man seine Tabelle mit Farbe hinterlegen kann.
Die Hintergrundfarbe einer Tabelle definieren Sie mit dem Befehl bgcolor.
Beispiel:
<table border bgcolor="red">
<tr>
<td>Text 1</td>
<td>Text 2</td>
</tr>
<tr>
<td>Text 3</td>
<td>Text 4</td>
</tr>
</table>
|
<< So sieht`s aus >>
Natürlich können Sie auch den Rand einer Tabelle einferben.
Dieser Befehl lautet bordercolor=.
Wenn Sie jedoch den 3D Effekt des Rahmens beibehalten wollen, müssen Sie ncoh folgende Angaben machen:
bordercolorlight= und bordercolordark=
Beispiel:
<table border bgcolor="red" bordercolor="green"
bordercolorlight="lightgreen" bordercolordark="darkgreen">
<tr>
<td>Text 1</td>
<td>Text 2</td>
</tr>
<tr>
<td>Text 3</td>
<td>Text 4</td>
</tr>
</table>
|
<< So sieht`s aus >>
Neben den farbigen Veränderungen der Tabellenlinien können Sie auch deren Breite bzw. Aussehen ferändern.
Mit dem Attribut border= könne Sie festlegen wie dick der Rahmen dargestellt werden soll.
Das Attribut cellspacing= legt fest wie dick die Gitternetzlinien angezeigt werden sollen.
Um den Abstand des Zelleninhaltes von den Gitternetzlinien zu verändern benutzen Sie cellpadding=.
Beispiel:
<table border="10" cellspacing="10" cellpadding="10">
<tr>
<td>Text 1</td>
<td>Text 2</td>
</tr>
<tr>
<td>Text 3</td>
<td>Text 4</td>
</tr>
</table>
|
<< So sieht`s aus >>
|
|
|
