Tabellen formatieren mit CSS

[Otto Wyss]

Ich möchte eine Tabelle mit CSS formatieren, habe aber Probleme mit dem Innenabstand. Wenn ich z.B.

table.eintragsliste {
  border: solid 1px;
  padding-left: 20px;
  padding-right: 20px;
  vertical-align: middle;
}

definere, hat dies keinen Einfluss auf den Zellenabstand links/rechts. Was muss ich angeben, damit es auch beim IE6 geht?

Und wie erreiche ich Borders auch zwischen den Zellen, nicht nur um die Tabelle?

[suit]

Wenn du das <table />-Element formatierst, hat das keinen Einfluss auf die <tr />- oder gar <td />- oder <th />-Elemente.

[Otto Wyss]

Man kann also nicht irgendwie das Cellspacing einer Tabelle angeben, wie man es in HTML kann?

Und für die Cell-Borders geht es auch nicht?

[Elya]

Hallo Otto,

Man kann also nicht irgendwie das Cellspacing einer Tabelle angeben, wie man es in HTML kann?

doch: aber überlege, welchem Element *genau* Du diese Eigenschaft geben willst. Nicht der Tabelle, sondern der einzelnen Zelle. Also:

table.eintrag td {

}

Und für die Cell-Borders geht es auch nicht?

doch, genau so ,-)

Gruß aus Köln-Ehrenfeld,

Elya

[Otto Wyss]

doch: aber überlege, welchem Element *genau* Du diese Eigenschaft geben willst. Nicht der Tabelle, sondern der einzelnen Zelle. Also:

table.eintrag td {

Aha, danke. Geht das auch irgendwie für td und th gemeinsam?

»» Und für die Cell-Borders geht es auch nicht?

doch, genau so ,-)

Ja stimmt ;-)
Trotzdem, gibt es keine CSS-Äquivalent für das "rules" in HTML? Z.B. wenn man nur Gruppen will?

[suit]

Aha, danke. Geht das auch irgendwie für td und th gemeinsam?

sicher: CSS 2.1; 5 Selectors (5.2.1 Grouping)

[Gunnar Bittersmann]

@@suit:

»» Aha, danke. Geht das auch irgendwie für td und th gemeinsam?
sicher: CSS 2.1; 5 Selectors (5.2.1 Grouping)

BTW: Da 'tr' nur 'th'- und 'td'-Elemente enthalten darf, ginge es auch mit 'tr>*'. Allerdings nicht im IE < 7.

Live long and prosper,
Gunnar

[suit]

BTW: Da 'tr' nur 'th'- und 'td'-Elemente enthalten darf, ginge es auch mit 'tr>*'. Allerdings nicht im IE < 7.

Aus Gründen der Lesbarkeit würde ich tr > * empfehlen. :)

[Gunnar Bittersmann]

@@suit:

Aus Gründen der Lesbarkeit würde ich tr > * empfehlen. :)

Geschmackssache. ' ' hat ja in Selektoren die Sonderbedeutung Nachfahrenselektor, wenn es zwischen einfachen Selektoren steht. Steht es zwischen einfachen Selektor und '>' (bzw. '+'), ist die Bedeutung nicht gegeben – irgendwie inkonsistent.

Ich finde 'foo bar', 'foo>bar', 'foo+bar' konsistenter als 'foo bar', 'foo > bar', 'foo + bar'.

Live long and prosper,
Gunnar

[suit]

Ich finde 'foo bar', 'foo>bar', 'foo+bar' konsistenter als 'foo bar', 'foo > bar', 'foo + bar'.

Da hast du recht, aber es ist imho lesbarer :)

In einer Gleichung kannst du auch (5+5-8)*2=4 schreiben, oder alternativ (5 + 5 - 8) * 2 = 4 oder ganz anders 2(+5 +5 -8) = 4

Aus Gründen der Lesbarkeit würde ich mich hier für die 2. Variante entscheiden.

[Otto Wyss]

Der IE6 scheint aber damit Probleme zu haben ich habe nun

table.eintragsliste th, td {
  border: solid 1px;
  padding-left: 4px;
  padding-right: 4px;
  vertical-align: middle;
}

womit jetzt alle "th, td" in allen Tabellen diese Eigenschaften haben, nicht nur diejenige mit Klasse "eintragsliste".

[Elya]

Hallo Otto,

table.eintragsliste th, td {
  border: solid 1px;
  padding-left: 4px;
  padding-right: 4px;
  vertical-align: middle;
}

womit jetzt alle "th, td" in allen Tabellen diese Eigenschaften haben, nicht nur diejenige mit Klasse "eintragsliste".

hihi, *den* Fehler kenne ich ;-) mit dem Komma trennst Du die einzelnen Selektoren voneinander ab, um beiden die nachstehenden Eigenschaften zu verpassen. Du hast also jetzt alle th-Elemente innerhalb der Tabelle "eintragsliste" und alle td-Elemente formatiert. Um nur die td innerhalb "eintragsliste" zu formatieren, brauchst Du ebenfalls den spezifischeren Selektor:

table.eintragsliste th,
 table.eintragsliste td {

}

Gruß aus Köln-Ehrenfeld,

Elya

[suit]

Man kann also nicht irgendwie das Cellspacing einer Tabelle angeben, wie man es in HTML kann?

Die Tabelle hat kein "Cellspacing" oder ähnliches, Die Tabelle hat wie jedes andere Element einen Außenabstand, einen Innenabstand und eine Rahmen.

Und für die Cell-Borders geht es auch nicht?

Wie bereits erwähnt, wenn du mit CSS ein <table />-Element formatierst, ist davon NUR das <table />-Element betroffen - alle andere Elemente interessieren sich einen feuchten Kehricht dafür.

Wenn du ein <h1 />-Element einfärbst, interessieren sich die Textabsätze (<p />) auch nicht dafür.

Wenn du also die Zellen eine Tabelle (<td />) formatieren willst, formatiere die Zellen der Tabelle. Wenn also die Zellen einen Rahmen haben sollen, dann kannst du das Problemlos machen.

[Gunnar Bittersmann]

@@Otto Wyss:

Und wie erreiche ich Borders auch zwischen den Zellen, nicht nur um die Tabelle?

Indem du den Zellen Rahmen gibst. Irgendwie logisch.

Vermutlich sind auch die Rahmenmodelle für dich interessant. [CSS2 §17.6]

Live long and prosper,
Gunnar