Tabelle: Rahmen von table, td und th?

[Rouven]

Hallo,

ich hab in Vergangenheit schon ein paar Sachen mit CSS formatiert und will mir für jetzt erstellte Seiten/Anwendungen die border-Attribute komplett abgewöhnen. Ein Vor-/Nachteil (je nach Anwendung) des alten Attributs ist jedoch seine Durchgängigkeit - Hat ein Table border="1", dann ist alles gerahmt. Wenn ich jetzt eine Tabelle in meiner Seite mit einer bestimmten Klasse versehen will, mit dem Ziel das Tabelle UND Zellen gerahmt sind, geht das mit einem CSS Format, oder muss ich dann die td/th auch noch mit dem class-Attribut versehen?

Danke!

MfG
Rouven

[Thomas Luethi]

Hallo,

ich hab in Vergangenheit schon ein paar Sachen mit CSS formatiert und will mir für jetzt erstellte Seiten/Anwendungen die border-Attribute komplett abgewöhnen.

Gerade das Border-Attribut bei Tabellen ist IMHO nicht unbedingt "boese" - im Gegenteil.

Das Border-Attribut bei Tabellen ist in HTML 4.01 uebrigens
_nicht_ als "deprecated" eingestuft:
http://www.w3.org/TR/1999/REC-html401-19991224/index/attributes.html

Eine Tabelle mit tabellarischen Daten - und nur solche sollte man ja
bekanntlich haben - wird doch durch ein sichtbares Gitterlinien-Netz
beser lesbar. Und das erreicht man fuer die Browser ohne CSS nur mit
<table border="1">

Der Default ist bei den meisten Browsern naemlich "kein Rahmen".
Bei Layouttabellen kann man sich das Border-Attribut deshalb schenken;
<table>
reicht dort vollkommen aus...

Was _ich_ hingegen aus meinen Seiten eliminiere, sind die
beiden uebrigen Layout-Attribute: cellpadding und cellspacing.
Diese sind _IMHO_ nur "optischer Schnickschnack", und sie
lassen sich auch gut mit CSS ersetzen, wenigstens fuer
moderne Browser:
http://www.tiptom.ch/homepage/faq.html?q=tableborder

Erstaunlicherweise sind aber auch diese beiden Attribute
in HTML 4.01 noch nicht als "deprecated" eingestuft,
und sie kommen auch in der XHTML 1.0 Strict DTD vor,
und sogar im Tabellen-Modul von XHTML 1.1.

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
<!ATTLIST table
  %attrs;
  summary     %Text;         #IMPLIED
  width       %Length;       #IMPLIED
  border      %Pixels;       #IMPLIED
  frame       %TFrame;       #IMPLIED
  rules       %TRules;       #IMPLIED
  cellspacing %Length;       #IMPLIED
  cellpadding %Length;       #IMPLIED
  >

http://www.w3.org/TR/xhtml-modularization/DTD/xhtml-table-1.mod
<!ATTLIST %table.qname;
      %Common.attrib;
      summary      %Text.datatype;          #IMPLIED
      width        %Length.datatype;        #IMPLIED
      border       %Pixels.datatype;        #IMPLIED
      %frame.attrib;
      %rules.attrib;
      cellspacing  %Length.datatype;        #IMPLIED
      cellpadding  %Length.datatype;        #IMPLIED

Ein Vor-/Nachteil (je nach Anwendung) des alten Attributs ist jedoch seine Durchgängigkeit - Hat ein Table border="1", dann ist alles gerahmt. Wenn ich jetzt eine Tabelle in meiner Seite mit einer bestimmten Klasse versehen will, mit dem Ziel das Tabelle UND Zellen gerahmt sind, geht das mit einem CSS Format, oder muss ich dann die td/th auch noch mit dem class-Attribut versehen?

In CSS bezieht sich border genau auf das Element, fuer welches
Du es definierst. Es wird nicht vererbt, auch nicht von der Tabelle
an ihre Zeilen, Spalten oder Zellen.

table { border: ... }
bezieht sich also nur auf den Aussen-Rahmen der Tabelle als ganzes;
fuer das Gitternetz brauchst Du noch
td, th { border: ... }

Natuerlich kannst Du die Border-Angaben auch
gebuendelt so definieren:
table, td, th { border:... }

Gruesse,

Thomas

[Rouven]

Hi Thomas,

table { border: ... }
bezieht sich also nur auf den Aussen-Rahmen der Tabelle als ganzes;
fuer das Gitternetz brauchst Du noch
td, th { border: ... }

Natuerlich kannst Du die Border-Angaben auch
gebuendelt so definieren:
table, td, th { border:... }

das macht aber doch die Verwendung von Klassen umständlich, oder?
Wenn ich jetzt eine Tabelle "komplett" rahmen will, dann sagen wir ich lege eine Klasse .gerahmt { border:... } an. Wenn ich das jetzt umsetzen will, dann mache ich also:
table class=
td class="
th class="
(OK, wenn ich border-collapse verwende, kann ich mir zumindest den Table sparen). Aber irgendwie finde ich das etwas lästig...

MfG
Rouven

[Thomas Luethi]

Hallo Rouven,

das macht aber doch die Verwendung von Klassen umständlich, oder?

Nein. Es ist nicht umstaendlich.

Befasse Dich mit Selektoren, insbesondere mit Verschachtelung:
http://selfhtml.teamone.de/css/formate/zentrale.htm#verschachtelte_elemente

Wenn ich jetzt eine Tabelle "komplett" rahmen will, dann sagen wir ich lege eine Klasse .gerahmt { border:... } an. Wenn ich das jetzt umsetzen will, dann mache ich also:
table class=
td class="
th class="

Nein, es ist ueberhaupt nicht notwendig, jeder einzelnen Zelle
auch noch eine Klasse zu geben.
Es reicht, der Tabelle eine Klasse zu geben.
Die Zellen sind ja schliesslich Kinder der Tabelle.

HTML:
<table class="gerahmt">
 <tr>
   <th>...</th>
   <td>...</td>
<!-- u.s.w. -->

CSS:
table.gerahmt, table.gerahmt td, table.gerahmt th
  { border: ... }

So einfach ist das... ;-)

Gruesse + gute Nacht,

Thomas

[Rouven]

Jo,

das war's - thanks a lot!

MfG
Rouven