In welche Richtung wachsen BORDER bei <TD> ??

[Aquariophile]

Hallo!

Was ist der W3-Standard bei Bordern auf Spalten also <TD>

Und zwar ist ja bei elementen wie DIV und so der
Border laut W3-Standard _aussen_ dran und mindert die grösse
des Inhaltes nicht.

Wo sollen bei Border in <TD> laut W3 die border hin?
machen die....

1. Zwischenraeume zwischen den einzelnen <TD> wo der Border platz findet
   oder
2. geht der border nach innen in den TD rein und mindert die grösse des inhaltes
   der
3. nach innen aber der inhalt wird ned kleiner und der <TD> grösser
   oder
4. in die naechste TD rein
   oder....
   oder..?
   usw...

Danke
Aquariophile

[Simon Reinhardt]

Hi!

Und zwar ist ja bei elementen wie DIV und so der
Border laut W3-Standard _aussen_ dran und mindert die grösse
des Inhaltes nicht.

Wo sollen bei Border in <TD> laut W3 die border hin?
machen die....

1. Zwischenraeume zwischen den einzelnen <TD> wo der Border platz findet

So sollte es, glaube ich, laut dem Box-Modell sein. Der Innenraum der <TD> bekommt seinen per width zugewiesenen Platz und die Rahmenstärke entweicht zwischen die Zellen bzw. am Rand nach außen. Insgesamt ist die Tabelle also größer.
Wenn ich mich nicht irre, gilt allgemein:
Gesamtbreite = MarginLinks+BorderLinks+PaddingLinks+Width+PaddingRechts+BorderRechts+MarginRechts,
wobei Width die angegebene Breite plus eine evtl. durch übergroßen Inhalt zu Stande kommende Breite ist. Kompliziert wird es dann, wenn man die CSS-Attribute min-width oder max-width benutzt. :)

Aber eigentlich kannst Du das ja mal ausprobieren: konstruiere eine Tabelle mit allen möglichen CSS-Angaben und messe dann anhand eines Screenshots aus, wieviel größer die Tabelle/Zelle ist, als in width angegeben.

VG Simon

[molily]

Hallo,

Wo sollen bei Border in <TD> laut W3 die border hin?

Der Innenraum der <TD> bekommt seinen per width zugewiesenen Platz und die Rahmenstärke entweicht zwischen die Zellen bzw. am Rand nach außen. Insgesamt ist die Tabelle also größer.

Scheinbar nicht, einige Browser schränken die Zellengröße um die Hälfte der Rahmenstärke ein, die andere Hälfte »entweicht« nach außen (eventuell in andere Zellen). Ob das vorgeschrieben ist, habe ich noch nicht detailliert in Erfahrung gebracht (http://www.w3.org/TR/REC-CSS2/tables.html#collapsing-borders/http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap17.html#heading-17.6.2). Soweit ich die Specs verstehe, ist es gewollt, dass der Rahmen auch über die Grenzen der Tabelle hinausragt, wodurch jedoch im Gegensatz zu anderen Blockelementen der Rahmen sogar außerhalb des Elternelements angezeigt werden kann.
Die Höhe und Breite wird durch die Zellenrahmen eingeschränkt, dadurch ist die Zelle theoretisch immer noch gleich groß (die Browser messen an verschiedenen Stellen), aber der Inhalt wird gestaucht (wiederum je nach Browser). Dies scheint jedoch ein nicht standardgemäßes Verhalten zu sein (?).

Wenn ich mich nicht irre, gilt allgemein:
Gesamtbreite = MarginLinks+BorderLinks+PaddingLinks+Width+PaddingRechts+BorderRechts+MarginRechts,

Meinen Untersuchungen nach gilt dieses Modell für Tabellenzellen in einer Tabelle mit border-collapse:collapse nicht - zumindest machen vier Browser vier verschiedene Visualisierungen daraus. Das angegebene padding sowie width ist keinesfalls sicher.

Zwei Beispiele:

Testfall und Screenshots: http://home.t-online.de/home/dj5nu/fanhost/css-tabellenrahmen.html

Testfall: http://home.t-online.de/home/dj5nu/fanhost/css-tabellenrahmen2.html
Bilder der jeweiligen Darstellung:
http://home.t-online.de/home/dj5nu/fanhost/css-tabellenrahmen2-mozilla13a.png
http://home.t-online.de/home/dj5nu/fanhost/css-tabellenrahmen2-msie6.png
http://home.t-online.de/home/dj5nu/fanhost/css-tabellenrahmen2-opera605.png
http://home.t-online.de/home/dj5nu/fanhost/css-tabellenrahmen2-opera7b2.png

Ich werde noch weitere Untersuchungen unternehmen und eventuell einen neuen Thread dazu aufmachen. Momentan lässt sich scheinbar nicht vom Code eindeutig auf die Darstellung schließen - scheinbar spinnen alle untersuchten Browser mehr oder weniger herum.

Aber eigentlich kannst Du das ja mal ausprobieren: konstruiere eine Tabelle mit allen möglichen CSS-Angaben und messe dann anhand eines Screenshots aus, wieviel größer die Tabelle/Zelle ist, als in width angegeben.

Siehe oben. Wenn davon ausgegangen wird, dass die Hälfte des Rahmens innerhalb der Zelle angezeigt wird, dann würde, angenommen der Rahmen ist im Schema drei Zeilen hoch (durch Sternchen gekennzeichnen), nur ein drei Zeilen hoher Zelleninhalt gezeigt, wobei die Zelle selbst trotz der Überlappung des Rahmens in den Zelleninhalt hinein weiterhin fünf Zeilen hoch ist (gestrichelte Mitte des Rahmens):

*******************            <-+
       *-*-*-*-*-*-*-*-*-*  <-+         | Rahmenbreite
       *******************    |       <-+
       |                 |    |              <-+
       |      TEXT       |    | Zellenhöhe     | Tatsächlich angezeigte Höhe
       |                 |    |              <-+
       *******************    |       <-+
       *-*-*-*-*-*-*-*-*-*  <-+         | Rahmenbreite
       *******************            <-+

Grüße,
Mathias

[Sven Rautenberg]

Moin!

Wo sollen bei Border in <TD> laut W3 die border hin?

Es hängt davon ab, welche Maße definiert sind, und welche sich folglich daran anpassen.

- Sven Rautenberg

[Aquariophile]

Servus Sven ;)
Du kuck, Das da ist der Source,
in Mozilla und Opera entsteht kein zwischenraum zwischen den TD, aber ich habe angst dass da vielleicht (vielleicht will es W3 ja dass da zwischenraum entsteht) irgendwann bei nachfolgenden Browserversionen dort wo KEIN so dicker Border ist ein Leerraum entsteht und dann Violett durchscheint...
LG
Aqua

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title></title>

<style type="text/css">
html
{
margin: 0; padding: 0;
height: 100%; width: 100%;
}

body {
color: #000000; background-color: #cc33ff;
font-family: Verdana,Arial,Helvetica,sans-serif;
margin: 0; padding: 0;
height: 100%; width: 100%;
}

#problem
{
border-bottom:15px solid black;
border-left:1px solid black;
border-right:1px solid black;
border-top:1px solid black;
}
</style>

</head>

<body>

<table style="border-spacing:0px; border-collapse:collapse;">
<tr>
<td style="border:1px solid black; margin:0px;">This is some content</td>
<td id="problem" style="margin:0px;">This is some content</td>
</tr>

<tr>
<td style="border:1px solid black; margin:0px;">This is some content</td>
<td style="border:1px solid black; margin:0px;">This is some content</td>
</tr>

</table>

</body>
</html>

[Sven Rautenberg]

Moin!

in Mozilla und Opera entsteht kein zwischenraum zwischen den TD, aber ich habe angst dass da vielleicht (vielleicht will es W3 ja dass da zwischenraum entsteht) irgendwann bei nachfolgenden Browserversionen dort wo KEIN so dicker Border ist ein Leerraum entsteht und dann Violett durchscheint...

Kann ja gar nicht. Du hast border-collapse:collapse; angegeben

- Sven Rautenberg