Die Ausrichtung von Tabellen und Zellen im HTML

Mit Ihren nun vorhandenen Grundkenntnissen sehen Sie sich jetzt Attribute an, mit denen Sie das Erscheinungsbild Ihrer Tabelle ändern können. Die Attribute, die Sie in dieser Lektion lernen, kontrollieren die Anzeigenbreite Ihrer Tabellen und Zellen, den Abstand zwischen Zelleninhalt und Längs- und Querspalten und die Breite der Rahmen.

Festlegen der Tabellenbreite

Die Tabellen- und Spaltenbreite der Tabelle aus dem vorhergehenden Beispiel wie Sie eine Tabelle erstellen wurde direkt durch den Browser festgelegt. In vielen Fällen ist das die beste Möglichkeit, um sicherzugehen, dass Ihre Tabellen in verschiedenen Browsern mit verschiedenen Bildschirmgrößen und- Breiten richtig angezeigt werden können; überlassen Sie einfach dem Browser die Entscheidung.

In anderen Fällen jedoch möchten Sie vielleicht mehr Kontrolle über die Tabellen- und Spaltenbreite haben, vor allem, wenn die Standardeinstellungen des Browsers wirklich seltsam sind. Im folgenden Teil werden Sie einige Möglichkeiten dafür kennen lernen. Das width-Attribut des <table>-Elements definiert die Breite der Tabelle auf der Seite. width kann einen Wert haben, der exakt die Breite der Tabelle anzeigt (in Pixeln) Der Wert kann auch in Prozent der entsprechenden Breite angegeben werden (wie zum Beispiel 50 oder 75%), was sich allerdings ändern kann, wenn die Größe des Fensters geändert wird. Wenn width spezifiziert ist, kann die Spaltenbreite innerhalb der Tabelle komprimiert oder expandiert werden, um mit der erforderlichen Breite übereinzustimmen.

Damit eine Tabelle einer 100%-Bildschirm-Anzeigen-Breite angepasst wird, fügen Sie das width-Attribut der Tabelle hinzu, wie es im folgenden Code gezeigt wird. Das Ergebnis sehen Sie in Abbildung.


<table border="1" width="100%">
	<caption>Vital Statistics</caption>
<tr>
 <th>Name</th>
 <th>Height</th>
 <th>Weight</th>
 <th>Eye Color</th>
</tr>
<tr>
<td>Alison</td>
 <td>5'4"</td>
 <td>140</td>
 <td>Blue</td>
</tr>
<tr>
<td>Tom</td>
 <td>6'0"</td>
 <td>165</td>
 <td>Blue</td>
</tr>
<tr>
<td>Susan</td>
 <td>5'1"</td>
 <td>97</td>
 <td>Brown</td>
</tr>
</table>

Die Ausrichtung von Tabellen und Zellen im HTML

Zu schmale Spalten für die Daten können unmöglich funktionieren, da der Browser in diesem Fall die von Ihnen gewünschte Breite so gut wie möglich annähert.

Sie sollten Ihre Tabellenbreiten immer in Prozent anstatt in konkreten Pixel-Werten angeben. Da Sie nicht wissen, wie groß das Browserfenster sein wird, erlauben Prozentwerte eine dem Browserfenster angepasste Größe. Die Verwendung konkreter Pixel-Werte könnte Ihre Tabelle in unangepasster Größe erscheinen lassen.

Ändern der Tabellenrahmen

Das border-Attribut des <tabel>-Tag ist das gängigste Attribut des <table>-Elements. Mit diesem Attribut bestimmen Sie, ob ein Rahmen um die Tabelle erscheinen soll oder nicht, und wenn ja, wie breit der Rahmen sein muss.

Das border-Attribut unterlag, seit seiner Aufnahme in HTML, einigen Veränderungen:

in HTML 2.0 haben Sie <table border> verwendet, um einen Rahmen um die Tabelle zu erstellen. Der Rahmen konnte in einem Grafik-Browser besonders schick und in einem Text-Browser als eine Folge kleiner Längsstriche erscheinen.
In HTML 3.2 und neueren Versionen ist die korrekte Verwendung vom border-Attribut ein wenig anders: es gibt die Rahmenbreite in Pixeln an. <table border="1"> erstellt einen1 Pixel breiten Rand, <table=border="2"> erstellt einen 2 Pixel breiten Rand usw. HTML 3.2 und neuere Browser zeigen höchstwahrscheinlich die alte HTML 2.0-Form von <table border> an, und zwar ohne Wert, mit einem 1-Pixel- Rand (wie Sie in <table border="1"> spezifiziert haben).
Um einen Rahmen zu erstellen, der keine Breite hat und nicht angezeigt wird, geben Sie <table border="0"> ein. Rahmenlose Tabellen sind vor allem bei Tabellenstrukturen für Layout-Zwecke geeignet, wenn Sie nicht unbedingt die Tabellenbe- grenzung auf Ihrer Webseite anzeigen wollen.

Sie können die Rahmenbreite um eine Tabelle herum auch ändern. Wenn border einen Nummernwert hat, wird die Rahmenbreite mit der Pixel breite bestimmt. Der Standardcode ist border="1". border="0" unterdrückt die Rahmenanzeige (als ob Sie das border-Attribut ganz ausgelassen hätten).

Abbildung zeigt eine Tabelle mit einer 10 Pixel Rahmenbreite und Rahmendefinitionen.


<table border="10" width="100%">

Zelleninnenabstände

Die Zelleninnenabstände (Cell Padding) beschreiben den Raum zwischen den Kanten der Zellen und dem Zellinhalt. Mit dem cellpadding-Attribut für das <table>-Tag können Sie diesen Wert überschreiben. Abbildungzeigt ein Beispiel für eine Tabelle mit einem Innenabstand von 10 Pixel. Das cellpadding-Attribut mit einem Wert von 0 bewirkt, dass die Kanten der Zellen den Zelleninhalt berühren (das sieht nicht besonders gut aus).

Hier ist der überarbeitete Code für Ihr <table>-Tag, welches das Cell-Padding auf 10 Pixel erhöht. Das Ergebnis sehen Sie in Abbildung:


<table border="10" width="100%" cellpadding="10">

cellpadding-Attribute mit dem Wert 0 bewirken, dass die Abgrenzungen der Zellen den Zelleninhalt berühren (was nicht gerade besonders gut aussieht).

Zellenabstände

Zellenabstände ähneln den Zelleninnenabständen, jedoch mit dem Unterschied, dass die Zellenabstände den Raum zwischen den Zellen beschreiben - das heißt, die Breite der schattierten Linien, die die Zellen voneinander abtrennen. Der Wert dafür wird im cellspacing-Attribut für das <table>-Tag spezifiziert. Der Standardabstand beträgt 2.

Der Zellenabstand bezieht sich auch auf den Teil der Umrandung der Tabelle, der sich an der Innenseite des Tabellenrahmens befindet (Der wiederum vom border-Attribut bestimmt wird). Experimentieren Sie damit, und Sie werden den Unterschied bemerken. So zeigt Abbildung ein Beispiel einer Tabelle mit einem Zellabstand von 8 und einem Rahmen von 4.


<table border="4" width="100%" cellpadding="10" cellspacing="8">

Spaltenbreiten

Sie können das width-Attribut auch für einzelne Zellen benutzen (<th> oder <td>), um die Breite der einzelnen Spalten anzugeben. Sie können, wie wir schon vorhin feststellen konnten, genauso wie bei Tabellenbreiten, die Spaltenbreite entweder in Pixeln oder in Prozent festlegen (die Prozente sind auf die ganze Tabellenbreite bezogen). Wie bei Tabellenbreiten, sollte Sie die Prozentangabe den Pixeln vorziehen, damit Ihre Tabelle unabhängig von der Fenstergröße angezeigt wird.

Spaltenbreiten sind vor allem dann nützlich, wenn Sie mehrere Spalten mit gleicher Breite - unabhängig von ihrem Inhalt - erstellen müssen (zum Beispiel für Seitenlayouts).

In Abbildung sehen Sie die Originaltabelle aus der oberen Abbildung. Diesmal nimmt die Tabelle jedoch 100% der Bildschirmanzeigenbreite ein. Die erste Spalte beträgt 40% der Tabellenbreite, die übrigen drei Spalten nehmen jeweils 20% der Tabellenbreite ein.

Um das Ganze zu vervollständigen, werden die Spaltenbreiten wie folgt mit den Kopfzellen in Verbindung gebracht:


<table border="1" width="100%">
	<caption>Vital Statistics</caption>
<tr>
<th width="40%">Name</th>
<th width="20%">Height</th>
<th width="20%">Weight</th>
<th width="20%">Eye Color</th>
</tr>

Was geschieht, wenn die Tabelle 80% der Bildschirmanzeigenbreite einnimmt, aber dieselben Kopfzellen wie im vorhergehenden Beispiel haben (40 Prozent, 20 Prozent, 20 Prozent, 20 Prozent)? Ändern Sie den Code leicht ab, indem Sie die Tabellenbreite auf 80%, wie im folgenden Beispiel, reduzieren. Wenn Sie die neue Tabelle nun in Ihrem Broswer öffnen, werden Sie feststellen, dass die Tabelle 80% der Anzeigenbreite einnimmt. Die vier Spalten betragen jetzt 40%, 20%, 20% und 20% der Tabellenbreite, wohlgemerkt. Wenn man es ganz genau ausdrückt, messen die Spalten 32%, 16%, 16%, 16% der Gesamtanzeigenbreite.


<table border="1" width="80%">
	<caption>Vital Statistics</caption>
<tr>
<th width="40%">Name</th>
<th width="20%">Height</th>
<th width="20%">Weight</th>
<th width="20%">Eye Color</th>
</tr>

Zeilenumbrüche in den Text einfügen

Zeilenumbrüche sind besonders nützlich, wenn es sich um eine Tabelle handelt, bei der die meisten Zellen klein sind und nur eine oder zwei Zellen mehr Daten enthalten. So lange die Bildschirmbreite ausreicht, bringt der Browser normalerweise einfach lange Zeilen hervor, was in einigen Tabellen ziemlich seltsam aussehen kann.


<tr>
<td>TC</td>
<td>7</td>
<td>Suspicious except when hungry, then friendly</td>
</tr>

Durch das Einfügen von Zeilenumbrüchen können Sie diese Zeile in eine schmälere Spalte zwängen, sodass das ganze mehr wie die Tabelle in Abbildung aussieht. Sehen Sie Änderung in der letzten Zeile des abgeänderten Codes:


<tr>
  <td>TC</td>
  <td>7</td>
  <td>Suspicious except
  <br />
	when hungry,
  <br />
    then friendly</td>
 </tr>

Andererseits wollen Sie vielleicht eine Tabelle erzeugen, bei der eine Zelle gegen Ihren Willen umbrochen wird, in der Sie alle Daten auf einer einzigen Zeile darstellen wollen. (Dies kann bei Formularelementen innerhalb von Tabellenzellen besonders wichtig werden, wenn Sie das Eingabefeld neben seiner Bezeichnung anordnen wollen.) In diesem Fall können Sie dem <th>- oder <td>-Tag das NOWRAP-Attribut hinzufügen, sodass der Browser alle Daten dieser Zelle auf einer Zeile lässt. Sie können dann immer noch <br>-Tags von Hand zu dieser Zelle hinzufügen und einen Zeilenumbruch an der Stelle bewirken, an der Sie ihn brauchen.

Das nowrap-Attribut gilt in HTML 4.0 als verworfen und wird durch Style Sheets ersetzt.

Seien Sie vorsichtig, wenn Sie Zeilenumbrüche in Tabellenzellen mit dem nowrap-Attribut festkodieren. Denken Sie daran, Ihre Tabelle wird in den unterschiedlichsten Bildschirm-Anzeigengrößen angesehen. Versuchen Sie die Anzeigengröße des Fensters zu ändern, in dem Ihre Tabelle erscheinen soll, und testen Sie, ob Ihre Tabelle auch bei unterschiedlichen Fensterbreiten funktioniert. In den meisten Fällen sollten Sie Ihrem Browser die Tabellenformatierung überlassen und nur, wenn es wirklich notwendig ist, geringfügig eingreifen.