Definieren von Tabellen mit Rand (dBooks

HTML

Primer


					Probleme
					Tabellenrand
					Planung
					Hintergründe

PageMap

(Umfang 299 Seiten)


		Sponsoring


	Namen für Sonderzeichen "sichere" Farben Übersicht der HTML-Tags spez. Seiten zu HTML








	Auswahl dBooks: Suche und verwandte Themen








	Verschiedenes

Tabellenrand

Nicht immer genügen die Standardrahmen den Ansprüchen. Mit Hintergrundfarben kann man hier nachhelfen�

Tabellenzellen werden ohne Bild-Platzhalter nur dann in der gewünschten Breite dargestellt , wenn die Summe aller Breitenangaben der Zellen auch die Breite der Tabelle ergibt.

Diese einfache Regel, die normalerweise unter allen gängigen Browsern funktioniert, versagt, wenn Inhalte größer als der zugewiesene Zellenplatz sind. Hier geben die Browser dem Inhalt Priorität und verkleinern nach Möglichkeit (sprich Inhalten) den Platz der anderen Zellen. Dies kann dazu führen, daß dann die gewünschte Umrandung verschwindet.

Darüberhinaus ist natürlich auch der eingeräumte Platz der Umgebung wichtig, oft mit kuriosen Effeken. So neigt der NN dazu, Tabellen, die größer als die umgebende Tabellenzelle sind, wie eine Art Layer über die Tabellenzelle hinaus darzustellen. Eine genaue Planung ist deshalb wichtig.

Für die gewünschte Darstellung mit Rahmen sollte man auf alle Fälle Bilder als Platzhalter für die Mindestbreite der Zellen einbauen. Für die Übersichtlichkeit sollte die erste Tabellenzeile alle Bemaßungen enthalten.

Ergebnis

Aus den unten gelisteten Versuchen wurde schließlich der folgende Standard für Rahmen eingeführt. Durch die Höhenangaben im oberen und unteren Zellenrand interpretiert auch Amaya die Tabelle wie gewünscht.

Ergebnis


	Inhalt

Quellcode

<table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="yellow">
   <tr height="1">
      <td width="1"><img src="../pixel_tr.gif" border="0" width="1" height="1" alt=""></td>
      <td width="297" bgcolor="black"><img src="../pixel_tr.gif" border="0" width="297" height="1" alt=""></td>
      <td width="2"><img src="../pixel_tr.gif" border="0" width="2" height="1" alt=""></td>
   </tr>
   <tr>
      <td bgcolor="black"><br></td>
      <th>Inhalt</th>
      <td bgcolor="black"><br></td>
   </tr>
   <tr height="2">
      <td></td>
      <td bgcolor="black"><img src="../pixel_tr.gif" border="0" width="1" height="2"></td>
      <td></td>
   </tr>
</table>

Beispiele


Attribut	NN						MSIE					Mos.	Op.			HTML
Attribut	1.1	2	3	4	4.6	6	2	3	4	5	5.5	2.1	3.6	4	5	2	3	3.2	4
Breite 1
Nur mit Zellenbreitenangaben am Rand.
Breite 2
Nur mit Zellenbreitenangaben.
Breite 3
Mit Zellenbreitenangaben und unsichtbaren Bildern am Rand..
Breite 4
Mit Zellenbreitenangaben und Bildern.
Breite 5
Ohne Zellenbreitenangaben und unsichtbaren Bildern
Breite 6
Falsche Breite in der Mitte
Breite 7
Keine Breite der gesamten Tabelle angegeben
Höhe 1
Höhe in Tabellenzelle
Höhe 2
Höhe in Tabellenzelle definiert in TableRow.
Höhe 3
Höhe in Tabellenzelle mit Bildern und Höhendefinition in tr-Element.
Höhe 4
Höhe in Tabellenzelle nur mit Bildern

wird unterstützt

wird größtenteils unterstützt

wird teilweise unterstützt

wird nicht unterstützt

keine direkte Funktion

gefährlich

Links


		Unkommentierte Links: google.de: Suche: HTML Tabellen Trick Rahmen(de) google.de: Suche: HTML Tables line border trick Dr Web: Webdesign Praxis - Gerundete Tabellen Link empfehlen

(München, 2001-01-22 00:00:00 / )

Der Betreiber von www.dBooks.de übernimmt keine Verantwortung für den Inhalt und die Richtigkeit der Angaben auf den verlinkten Websites. Zu den üblichen NoNos gibt es keine direkten Verweise.

(Umfang dBook HTML: 299 Themenseiten )
letzte Generierung Sun, 03 Jun 2001 09:26:54 GMT 238
© Werner Diwischek