Websiteentwicklung: XHTML: Tabellen
Aus Wikibooks
Inhaltsverzeichnis |
Tabellen dienen dazu, tabellarische Daten wiederzugeben. Sie werden aber von vielen Webautoren fehlerhaft eingesetzt, um z.B. Elemente zu positionieren. Diese Methode ist zwar einfach, spätestens bei komplexeren Designs kommt es aber zu einem erheblichen Verwaltungsaufwand. Auch die Tatsache, dass Screenreader Probleme mit dem Lesen von sogenannten Layouttabellen haben, sollte nicht unbeachtet bleiben.
Um Tabellen zu erstellen, braucht man 3 verschiedene Tags: <table>, das die Tabelle definiert, <tr>, das eine neue Zeile anfängt, und <td>, das eine neue Zelle definiert.
[Bearbeiten] Beispiel
<table>
<tr>
<th>Überschrift, 1. Spalte</th>
<th>Überschrift, 2. Spalte</th>
<th>Überschrift, 3. Spalte</th>
</tr>
<tr>
<td>1. Zeile, 1. Spalte</td>
<td>1. Zeile, 2. Spalte</td>
<td>1. Zeile, 3. Spalte</td>
</tr>
<tr>
<td>2. Zeile, 1. Spalte</td>
<td>2. Zeile, 2. Spalte</td>
<td>2. Zeile, 3. Spalte</td>
</tr>
<tr>
<td>3. Zeile, 1. Spalte</td>
<td>3. Zeile, 2. Spalte</td>
<td>3. Zeile, 3. Spalte</td>
</tr>
</table>
[Bearbeiten] Erklärung
Die Tabelle wird mit <table> eingeleitet. Dann kommt ein <tr> Tag. So wird eine neue Zeile angefangen. Es folgt dann ein <td> Tag, das eine neue Zelle definiert (bzw. <th>, um eine Zelle mit einer Überschrift zu definieren). Hier kommt nun der Zelleninhalt. Dann wird das td-Tag (bzw. <th>) abgeschlossen, es folgen nun so viele neue Zellen, wie Sie wollen. Sie können auch nur 1 Zelle pro Zeile definieren. Das ist aber das Minimum. Wenn sie dann keine neue Zelle für diese Zeile benötigen, wird diese mit </tr> (bzw. </th>) abgeschlossen. Sie können nun wieder so viele neue Zeilen definieren wie Sie möchten. Es sind keine Grenzen gesetzt. Die Tabelle wird dann mit </table> abgeschlossen.
[Bearbeiten] Tabellenformatierung, Abstände
Wie Sie bereits gelernt haben, werden die Style-Angaben direkt in das zu formatierende Tag geschrieben. (Natürlich gibt es auch noch die 2 anderen Methoden). Mit CSS können Sie nun die Zwischenräume zwischen den Zellen bestimmen, den Abstand vom Zelleninhalt zum Zellenrand, Hintergrundfarbe der Tabelle oder Zelle, Rahmenfarbe, Rahmenart, usw. Wir schauen aber in diesem Kapitel nur die Abstände an. Der Rest wird im nächsten Kapitel erklärt. Tipp: Diese 2 CSS-Angaben zur Bestimmung der Abstände können Sie auch in anderen Tags wie p, div, usw. benutzen. Probieren Sie aus, in welchem Tag welche Angabe wie funktioniert.
Die Abstände zwischen den einzelnen Zellen bestimmen Sie mit der Eigenschaft margin:. Als Wert kommt eine Zahl mit der Einheit, z.B. 12pt. Dann folgt wie immer ein Strichpunkt (;). Natürlich können Sie den Abstand auch nur für eine bestimmte Seite bestimmen. Das machen Sie dann mit margin-left, margin-bottom, margin-right, margin-top. Achtung: Wenn Sie einen Abstand für eine oder mehrere Seiten bestimmt haben, dürfen Sie nicht mehr margin verwenden, um bei den restlichen Seiten einen Abstand zu bestimmen.
Die Abstände zwischen Text und Zellenrand bestimmen Sie mit padding. Sie können auch hier, wie oben, die Abstände nur für eine Seite bestimmen.
Diese zwei Eigenschaften schreiben Sie in das <td> Tag. Da es ziemlich mühsam ist bei einer größeren Tabelle jedesmal die Styleangaben in jedes td-Tag zu schreiben, ist es einfacher, wenn Sie die CSS-Angaben direkt im head-Bereich oder in einer externen CSS-Datei machen. So ersparen Sie sich viel Mühe beim Ändern eines Abstandes.
[Bearbeiten] Rahmenbreite
Es ist auch möglich, die Rahmenbreite zu verändern. Das machen Sie auch wieder mit CSS, und zwar mit der Eigenschaft border-width: dann kommt wie immer der Wert, hier in Pixel (px), Punkt (pt), Zentimeter (cm), usw. Sie können auch nur für eine bestimmte Seite die Rahmendicke verändern. Das machen Sie mit border-left-width, border-bottom-width, border-right-width und border-top-width.
[Bearbeiten] Art des Rahmens
Als letztes können Sie auch noch die Art des Rahmens verändern. Es gibt zum Beispiel gestrichelte, gepunktete oder einfache Linien. Das sind aber nicht alle Möglichkeiten. Weiter unten sehen Sie eine kleine Definition, welche Rahmentypen Sie verwenden können. Diese Eigenschaft lautet border-style:, natürlich können Sie, wie auch bei der Rahmenbreite und den verschiedenen Abständen, die Rahmenangabe für jede Seite einzeln definieren. Die Angabe, für welche Seite die Formatierung gelten soll, schreiben Sie zwischen border und style. Bsp: border-left-style:. Es sind folgende Werte möglich:
none kein Rahmen hidden kein Rahmen dotted gepunktet dashed gestrichelt solid einfache Linie double doppelte Linie groove 3D-Effekt ridge 3D-Effekt inset 3D-Effekt outset 3D-Effekt
[Bearbeiten] Beispiel mit CSS im Head-Bereich:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Beispiel mit CSS-Angaben im Head-Bereich</title>
<style type="text/css">
<!--
table {
border-style: double;
border-width: 3px;
border-color: black;
font-family: "comic sans ms", arial, sans-serif;
font-size:14pt;
color:blue;
}
th.spalte1 {
border-style: double;
margin-left: 10px;
margin-right:20px;
}
td.spalte2 {
border-bottom-style: double;
border-top-style:double;
border-left-style:solid;
border-right-style:solid;
}
-->
</style>
</head>
<body>
<table>
<tr>
<th class="spalte1">Name:</th>
<td class="spalte2" style="border-right-width: 10px;">Muster</td>
</tr>
<tr>
<th class="spalte1">Vorname:</th>
<td class="spalte2" style="border-left-width: 10px;">Peter</td>
</tr>
</table>
</body>
</html>
