Breitenangaben von Tabelle und Spalten

[Ilja]

yo,

bin gerade dabei ein paar informationen über html tabellen auszugeben. das layout der website realisiere ich brav über css und es gelingt mir bis jetzt auch besser als ich angedacht habe. die formatierung der tabellen nehme ich zum großen teil auch über css wahr. allerdings stoße ich dabei auf das problem, dass jede tabelle sich in der breite und den einzelnen spalten immer unterscheiden. es gleichen sich quasi keine tabellen, was die breitenangaben betrifft. ich bräuchte also für jede tabelle eine eigene klasse mit unterschiedlichen breitenangaben für die tabelle und jeweiligen spalten. das erscheint mir ein wenig viel.

meine frage ist nun, schreibt ihr die breitenangaben von tabellen uns spalten auch in die css datei oder aber direkt ins hmtl, gibt es da vielleicht einen trick ?

auch habe ich mir ein schickes buch über CSS geholt und ich finde es sehr gut geschrieben. allerdings habe ich immer noch probleme, welche css eigenschaften ich auf welche html tags anwenden kann. gibt es da irgendwo eine gute übersicht ?

Ilja

[Ashura]

Hallo Ilja.

die formatierung der tabellen nehme ich zum großen teil auch über css wahr. allerdings stoße ich dabei auf das problem, dass jede tabelle sich in der breite und den einzelnen spalten immer unterscheiden.

Gibt es irgendwo ein Beispiel online zu betrachten? Ich könnte mir höchstens vorstellen, dass sich die Tabelle ihrer Natur gemäß ihrem Inhalt anpasst.

allerdings habe ich immer noch probleme, welche css eigenschaften ich auf welche html tags anwenden kann. gibt es da irgendwo eine gute übersicht ?

Eigentlich ganz einfach: du kannst alle Eigenschaften auf jedes Element anwenden. Das Problem hierbei ist „lediglich“, dass manche einfach keinerlei Wirkung zeigen. (Siehe z. B. area-Element.)

Einen schönen Mittwoch noch.

Gruß, Ashura

[Ilja]

yo Ashura,

Gibt es irgendwo ein Beispiel online zu betrachten? Ich könnte mir höchstens vorstellen, dass sich die Tabelle ihrer Natur gemäß ihrem Inhalt anpasst.

leider nicht, da sie nur im Intranet eingesetzt werden soll. Allerdings muss ich meine situation noch mal besser erläutern. das problem ist nicht, dass ich gleiche tabellen habe, die sich unterschiedliche darstellen, sondern die tabellen sollen/müssen sich unterscheiden, was die breitenangaben der tabele und der einzelnen spalten betrifft. meine frage ist nun, wo gebe ich am besten die erwte für die breite an. in der css datei müßte ich viel angaben machen und da die tabellen soweieso sich nie in der breitenangabe gleichen, wäre der vorteil einer zentralen datei nicht mehr so richtig gegeben. deswegen meine frage, ob man in diesem falle, doch alles in dem html-seiten schreibt oder ob es da einen trick gibt.

Eigentlich ganz einfach: du kannst alle Eigenschaften auf jedes Element anwenden. Das Problem hierbei ist „lediglich“, dass manche einfach keinerlei Wirkung zeigen. (Siehe z. B. area-Element.)

dann würde mich interessieren, welche eigenschaften auf welche tags eine wirkung haben. gibt es da eine übersicht ?

Ilja

[Ashura]

Hallo Ilja.

meine frage ist nun, wo gebe ich am besten die erwte für die breite an. in der css datei müßte ich viel angaben machen und da die tabellen soweieso sich nie in der breitenangabe gleichen, wäre der vorteil einer zentralen datei nicht mehr so richtig gegeben.

Hm, warum sollte es nicht? Muss das Stylesheet auch im IE funktionieren?
Wenn nicht, dann kannst du die gesamte Palette der CSS2-Selektoren verwenden und somit bei Bedarf jede Zelle einzeln formatieren.

deswegen meine frage, ob man in diesem falle, doch alles in dem html-seiten schreibt oder ob es da einen trick gibt.

Die Breitenangaben fest ins HTML zu schreiben würde ich allerhöchstens als allerletzte Möglichkeit ansehen, da du damit sehr viel Flexibilität opferst.

dann würde mich interessieren, welche eigenschaften auf welche tags eine wirkung haben. gibt es da eine übersicht ?

Mir ist keine bekannt, weshalb ich dir leider nur zu Trial-and-Error raten kann. Irgendwann hat man im Gefühl, was wo möglich ist.

Einen schönen Mittwoch noch.

Gruß, Ashura

[Ilja]

yo,

Hm, warum sollte es nicht?

gehen wir davon aus, ich hätte 10 tabellen, die alle unterschiedlich breit sind und auch deren spalten unterscheiden sich innerhalb der jeweiligen tabelle in den breiten. dann hätte ich sehr viele klassen in der css und würde ich dort etwas ändern, würde es auch nur eine tabelle betreffen. es bläht halt die CSS datei auf und hat nicht wirklich einen vorteil. Deswegen meine frage, ob es dafür einen Trick gibt, das besser gestalten zu können.

Muss das Stylesheet auch im IE funktionieren?

unbedinkt IE 6+, da es nur intern laufen soll und wir hier an allen Rechner mit dem IE arbeiten. Deshalb muss es auf jeden fall auf dem IE laufen ("gut aussehen").

Gruß und Dank
Ilja

[Ashura]

Hallo Ilja.

Deswegen meine frage, ob es dafür einen Trick gibt, das besser gestalten zu können.

Der Trick wäre hier, erweiterte Selektoren zu verwenden, was Klassen überflüssig machen würde.

Muss das Stylesheet auch im IE funktionieren?

unbedinkt IE 6+, da es nur intern laufen soll und wir hier an allen Rechner mit dem IE arbeiten. Deshalb muss es auf jeden fall auf dem IE laufen ("gut aussehen").

In diesem Fall hast du wohl kaum eine Wahl. Entweder Klassen, oder direkte Notation im HTML.

Wenn nötig, bedanke dich bei MS für die eifrige Weiterentwicklung des IEs.

Einen schönen Mittwoch noch.

Gruß, Ashura

[Struppi]

Muss das Stylesheet auch im IE funktionieren?

unbedinkt IE 6+, da es nur intern laufen soll und wir hier an allen Rechner mit dem IE arbeiten. Deshalb muss es auf jeden fall auf dem IE laufen ("gut aussehen").

Das ist schlecht, da der IE leider nicht

  
tr  td  
{  
/* 1. Spalte */  
}  
tr  td + td  
{  
/* 2. Spalte */  
}  
tr  td + td + td  
{  
/* 3. Spalte */  
}  

kann

Struppi.

[Ingo Turski]

Hi,

gehen wir davon aus, ich hätte 10 tabellen, die alle unterschiedlich breit sind und auch deren spalten unterscheiden sich innerhalb der jeweiligen tabelle in den breiten. dann hätte ich sehr viele klassen in der css und würde ich dort etwas ändern, würde es auch nur eine tabelle betreffen.

Ich würde in diesem Fall gar kein CSS verwenden, sondern das hierfür vorgesehene colgroup.
Die Gesamtbreite der Tabellen ergibt sich dann auch aus der Summe der Spaltenbreiten.

Eine ganz andere Möglichkeit wäre, auf Breitenangaben einfach zu verzichten - Tabellen haben die besondere Eigenschaft, diese sinnvoll selbst anhand der Inhalte zu setzen.

freundliche Grüße
Ingo

[Axel Richter]

Hallo,

gehen wir davon aus, ich hätte 10 tabellen, die alle unterschiedlich breit sind und auch deren spalten unterscheiden sich innerhalb der jeweiligen tabelle in den breiten. dann hätte ich sehr viele klassen in der css und würde ich dort etwas ändern, würde es auch nur eine tabelle betreffen. es bläht halt die CSS datei auf und hat nicht wirklich einen vorteil. Deswegen meine frage, ob es dafür einen Trick gibt, das besser gestalten zu können.

Hier mal ein Beispiel für eine HTML-Tabelle mit CSS-Layout für die häufigsten aktuellen Browser:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Datentabelle</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
<!--  
/*Tabelle 01*/  
/*Allgemeines für alle Browser*/  
#tbl01 { width:70ex; border:1px solid black; background-color:#FFFFFF; }  
#tbl01 caption { font-weight:bold; }  
#tbl01 td, #tbl01 th { border:1px solid black; }  
  
/*Spaltenformatierung für IE, der CSS für das COL-Element weitesgehend ünterstützt*/  
#tbl01 col.sp01 { width:45%; text-align:left; background-color:#DFDFDF; }  
#tbl01 col.sp02 { width:30%; text-align:left; background-color:#CFCFCF; }  
#tbl01 col.sp03 { width:25%; text-align:right; background-color:#BFBFBF; }  
  
/*Spaltenformatierung für Browser, die CSS für das COL-Element nicht vollständig unterstützen*/  
#tbl01 tr>th, #tbl01 tr>td { width:45%; text-align:left; background-color:#DFDFDF; }  
#tbl01 tr>th+th, #tbl01 tr>td+td { width:30%; text-align:left; background-color:#CFCFCF; }  
#tbl01 tr>th+th+th, #tbl01 tr>td+td+td { width:25%; text-align:right; background-color:#BFBFBF; }  
  
-->  
</style>  
</head>  
<body>  
<table id="tbl01" summary="Tabelle mit Personaldaten Name, Vorname und Geburtsdatum">  
<caption>Tabelle 1, Personendaten</caption>  
<colgroup>  
 <col class="sp01">  
 <col class="sp02">  
 <col class="sp03">  
</colgroup>  
<thead>  
<tr>  
 <th scope="col">Name</th>  
 <th scope="col">Vorname</th>  
 <th scope="col">Geburtsdatum</th>  
</tr>  
</thead>  
<tbody>  
<tr>  
 <td>Müller</td>  
 <td>Klaus</td>  
 <td>22.06.1967</td>  
</tr>  
<tr>  
 <td>Maier-Jansen</td>  
 <td>Janina</td>  
 <td>02.06.1978</td>  
</tr>  
</tbody>  
</table>  
</body>  
</html>  

Ausnahmsweise gilt hier mal, dass der IE mit der Formatierung von COL-Elementen am besten klar kommt. Andrere, sonst standardkonforme Browser setzen hier nur width und background um.

Weitere Tabellen bekommen dann andere IDs und können dann mit ähnlichem CSS formatiert werden. Das CSS ist allerdings für jede Tabelle einmal notwendig, wenn sich alle Formate unterscheiden sollen.

Zum Lesen zusätzlich zu SelfHTML:
über Tabellen: http://www.w3.org/TR/html4/struct/tables.html
über CSS Selektoren: http://www.w3.org/TR/CSS21/selector.html

viele Grüße

Axel

[JB]

Hallo,

gehen wir davon aus, ich hätte 10 tabellen, die alle unterschiedlich breit sind und auch deren spalten unterscheiden sich innerhalb der jeweiligen tabelle in den breiten. dann hätte ich sehr viele klassen in der css und würde ich dort etwas ändern, würde es auch nur eine tabelle betreffen. es bläht halt die CSS datei auf und hat nicht wirklich einen vorteil. Deswegen meine frage, ob es dafür einen Trick gibt, das besser gestalten zu können.

Wenn Du 10 Tabellen individuell unterschiedliche Breiten geben willst wird sich das nicht vermeiden lassen.

Irgendwoher müssen die Tabellen ja wissen wie Breit sie und ihre Spalten/Zellen sein sollen. Ohne irgendeine Angabe passen sie sich automatisch an, aber das ist ja nicht gewünscht. Dafür muss irgendwo stehen wie breit sie sind. Durch CSS ist das doch schon übersichtlicher und komfortabler als ohne.

:)

Ich finde wenn in solch einem Fall die Tabellen sich automatisch dem Inhalt anpassen, dass muss nicht "schlecht ausehen".

Wenn das Problem ist das die CSS zu "aufgebläht" wird: Du kanst die CSS-Formatierungen für die Tabellen in eine extra CSS-Datei auslagern und sie nur wenn sie benötigt wird in HTML verlinken. Zur not machst Du dir für 10 Tabellen-Arten 10 CSS-Dateien und lädst immer nur jene die Du auch in HTML verwendest. (Oder kennt jemand einen Grund warum man das nicht machen darf? Ich weiß nur das es funktioniert).

[Axel Richter]

Hallo,

Zur not machst Du dir für 10 Tabellen-Arten 10 CSS-Dateien und lädst immer nur jene die Du auch in HTML verwendest. (Oder kennt jemand einen Grund warum man das nicht machen darf?

Man darf. Man sollte das aber genau überdenken. Jede einzelne CSS-Ressource wird natürlich mit einem eigenen HTTP-Request vom Server angefordert, wie Bilder-, Script- und andere Ressourcen auch. Jeder HTTP-Request erzeugt Traffic-Overhead (HTTP-Response-Header) und einen LOG-Eintrag. Wenn die einzelne CSS-Ressource nur wenige Zeilen CSS enthalten würde, kann es besser sein, lieber eine gesamt Tabellen-CSS-Ressource einzubinden, die auch Eigenschaften für Tabellen enthält, die im aktuellen Dokument dann nicht benötigt werden.

viele Grüße

Axel

[MudGuard]

Hi,

Hallo,

Zur not machst Du dir für 10 Tabellen-Arten 10 CSS-Dateien und lädst immer nur jene die Du auch in HTML verwendest. (Oder kennt jemand einen Grund warum man das nicht machen darf?
Man darf. Man sollte das aber genau überdenken. Jede einzelne CSS-Ressource wird natürlich mit einem eigenen HTTP-Request vom Server angefordert, wie Bilder-, Script- und andere Ressourcen auch. Jeder HTTP-Request erzeugt Traffic-Overhead (HTTP-Response-Header) und einen LOG-Eintrag.

Dazu kommt noch, daß üblicherweise die Anzahl der Ressourcen, die ein Browser gleichzeitig vom selben Server anfordert, beschränkt ist.

cu,
Andreas

[Axel Richter]

Hallo,

Dazu kommt noch, daß üblicherweise die Anzahl der Ressourcen, die ein Browser gleichzeitig vom selben Server anfordert, beschränkt ist.

Huch? Du meinst die angebliche Beschränkung auf zwei TCP-Verbindungen gleichzeitig zu einem einzelnen Server? Gelesen habe ich das auch schon. Hast Du das in einer Spezifikation irgendwo genauer festgelegt gefunden? Oder ist das eine serverspezifische Beschränkung, z.B. vom Apache?

Mit HTTP/1.1 können ja aber durchaus mehrere Ressourcen über eine TCP-Verbindung angefordert und ausgeliefert werden, ohne die Verbindung nach jedem Response wieder zu beenden.

viele Grüße

Axel

[Axel Richter]

Hallo,

Dazu kommt noch, daß üblicherweise die Anzahl der Ressourcen, die ein Browser gleichzeitig vom selben Server anfordert, beschränkt ist.
Du meinst die angebliche Beschränkung auf zwei TCP-Verbindungen gleichzeitig zu einem einzelnen Server? Oder ist das eine serverspezifische Beschränkung, z.B. vom Apache?

Unsinn, natürlich ist es eine Beschränkung der Browser.

FireFox: about:config

network.http.max-connections-per-server
network.http.max-persistent-connections-per-server

Beim IE muss man was an der Registry schrauben, um die Werte zu vergrößern.

Bleibt Die Frage, wo steht, dass dies so zu sein hat.

viele Grüße

Axel

[MudGuard]

Hi,

Bleibt Die Frage, wo steht, dass dies so zu sein hat.

Hab ich irgendwo behauptet, daß das so sein _muß_?

Ich sage nur, daß es _üblicherweise_ so _ist_.
Man kann das zwar umkonfigurieren, aber das machen ja die wenigsten.
Also muß man damit rechnen, daß die Anzahl gleichzeitiger Requests zum selben Server begrenzt ist.

cu,
Andreas

[Axel Richter]

Hallo,

Bleibt Die Frage, wo steht, dass dies so zu sein hat.
Hab ich irgendwo behauptet, daß das so sein _muß_?

Nein.

Es war ein Missverständnis, weil ich mal irgendwo gelesen hatte, dass es eine serverseitige Beschränkung wäre. Jetzt hab ich auch gefunden, wo. Microsoft behauptet, es wäre eine Vorgabe der HTTP-Spezifikation. Dort habe ich es allerdings nicht gefunden. Daher die Frage.

viele Grüße

Axel

[Der Martin]

Moin Ilja,

Eigentlich ganz einfach: du kannst alle Eigenschaften auf jedes Element anwenden. Das Problem hierbei ist „lediglich“, dass manche einfach keinerlei Wirkung zeigen. (Siehe z. B. area-Element.)
dann würde mich interessieren, welche eigenschaften auf welche tags eine wirkung haben. gibt es da eine übersicht ?

wohl kaum. Eine solche Übersicht wäre auch kaum praktisch machbar, da die Wirkung und Wirksamkeit von CSS-Eigenschaften sehr oft nicht nur vom HTML-Element abhängt, auf das sie angewendet werden, sondern auch vom Kontext. Und viele CSS-Eigenschaften haben Wechselwirkungen untereinander, so dass man ihnen eigentlich gar nicht einzeln eine konkreten Auswirkung zuordnen kann.

Wie Ashura schon sagte, braucht es wohl einfach eine gehörige Portion Erfahrung und Fingerspitzengefühl - beides Werte, die sich mit etwas Übung von selbst irgendwann einstellen.

Schönen Tag noch,
 Martin