[HTML/CSS] Tabelle mit Gitternetzlinien gestalten

[Mr. Snoot]

Hio,

ich überarbeite gerade ne Tabelle, die leider einen etwas ungünstigen Aufbau hat


Der Code sieht im Grunde so aus:

<table width="100%">
 <tr>
  <td></td>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td rowspan="6" valign="top"></td>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td rowspan="6" valign="top"></td>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td rowspan="2" valign="top"></td>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td rowspan="5" valign="top"></td>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
 </tr>
</table>

Das Problem ist, dass ich überall Gitternetzlinien sehen will, außer in der zweiten Spalte innerhalb einer Zeile (also die 4 Zeilen, die jeweils durch ein rowspan zusammengefasst sind).

Hier mal als Bild:



Graue Linien sollen später sichtbar sein, rote nicht (eingezeichnet damit man besser sieht, wo sich Zellen befinden)


Bisher habe ich mittels zig einzelnen Formatierungen mehr oder weniger für jede einzelne Zelle einen entsprechenden Rahmen gesetzt. Das sah mal so aus (nicht lachen ):

table.etch {
		font-size:11px;
		border:1px solid gray;
}

td.etcha {
		border-top:1px solid gray;
		border-bottom:0px solid gray;
		border-left:1px solid gray;
		border-right:0px solid gray;
}
td.etchb {
		border-top:1px solid gray;
		border-bottom:0px solid gray;
		border-left:1px solid gray;
		border-right:1px solid gray;
}

td.etchc {
		border-top:0px solid gray;
		border-bottom:0px solid gray;
		border-left:1px solid gray;
		border-right:0px solid gray;
}

td.etchd {
		border-top:0px solid gray;
		border-bottom:0px solid gray;
		border-left:1px solid gray;
		border-right:1px solid gray;
}

td.etche {
		border-top:0px solid gray;
		border-bottom:1px solid gray;
		border-left:1px solid gray;
		border-right:0px solid gray;
}

td.etchf {
		border-top:0px solid gray;
		border-bottom:1px solid gray;
		border-left:1px solid gray;
		border-right:1px solid gray;
}

Ich habe also für alle Zellen, die die gleichen Rahmen haben sollen dann eine bestimmte Klasse definiert. Wie man sehen kann ist das äußert dämlich

Tja, was kann man da am besten machen?


Mit Kopf-, Körper- und Fußbereichen komm ich auch nicht weiter, weil ich nur einen Kopf und einen Fuß definieren darf. Außerdem sehen die Rahmen über die HTML-Variante immer schei*e aus. In CSS lassen sich Gitternetzlinien wohl noch nicht anders realisieren, oder doch?


Oder hat jemand ne ganz andere Idee? Ansonsten bliebe mir vielleicht die Lösung, von der fertigen Tabelle ein Bild zu machen, und dass dann zu verwenden. Aber das ist halt bei Änderungen in der Tabelle auch nicht das wahre (Qualität wäre allerdings als gif mit 14 kb gar nicht schlecht)

edit: da fällt mir grad ein, dass ich noch eine ähnliche Tabelle habe die ich auch noch überarbeiten muss und die ich keinesfalls als Bild machen kann; von daher fällt das also ins Wasser.

 

[syntec]

So wie ich das sehe willst Du eigentlich weniger Linien haben als Du oben im Text angibst da ich da sehr viel rot sehe und weniger grau (Umrandung, einige Zellen).

Daher solltest Du schon den Weg gehen erstmal generell den Rahmen auszuschalten - das geht auch kürzer als in Deinem Quelltext:

border: 0;

Anschließend machst du die erste Klasse mit einer Rahmendefinition die du brauchst - um das Übersichtlicher zu gestalten solltest Du nicht überall dieses 0px reinschreiben, besser so:

border: 1px solid grey;
border-bottom: none; (oder 0)
border-right: none;

Und dann also von oben nach unten abarbeiten - mit ein paar Klassen wirst Du hinkommen - etwas eleganteres fällt mir da auch nicht ein weil ich nicht genau weiß was in die Tabelle überhaupt reinsoll

 

[Mr. Snoot]

Ja gut, das mit den ganzen Nullen muss natürlich raus. Hatte das nur mal auf die Schnelle per copy'n'paste erstellt und dann entsprechend 0 oder 1 gesetzt

Die Tabelle sieht fertig so aus:




Ist halt die Frage ob es gar nicht anders geht, weil sehr elegant ist es ja nicht, wenn man die Zellen alle einzeln einrahmen muss.


Ich brauch auf jeden Fall die Angabe für:

- eine Zelle mit Rahmen: o u l r
- eine Zelle mit Rahmen: o l r
- eine Zelle mit Rahmen: l r
- eine Zelle mit Rahmen: u l r

Und dann entsprechend zuweisen. Ob ich das von vorne oder hinten angehe dürfte egal sein (Rahmen generell aus und dann teilweise einschalten oder Rahmen generell an und teilweise ausschalten).



edit: ach mein Gott, jetzt fällts mir grad wie Schuppen aus den Haaren

Ich hatte bisher das Problem, das aneinandergrenzende Rahmen nicht zusammengefallen sind und daher 2 statt 1 Pixel breit waren. Daher musste ich bspw. einer Zelle rechts einen Rahmen geben und der rechts angrenzenden Zelle links eben keinen, damit man nur eine Linie hat und nicht beide. Mit border-collapse lässt sich das natürlich beheben, damit fliegt ja mindestens der halbe CSS-Code schonmal raus, weil ich nicht alle Zellen mit unterschiedlichen Rahmen ausstatten muss.

Nur mal schnell testen, wie lang das dann vergleichsweise wird.


Sodalla, der CSS-Code verkürzt sich damit von 63 Zeilen auf 25 bzw. von 1128 auf 264 Zeichen. Na wenn das nichts ist

table.aetzen
{
	font-size:11px;
	font-family:Verdana;
	border-collapse:collapse;
}

td.aetzen0
{
	border:1px solid gray;
}

td.aetzen1
{
	border-style:solid;
	border-color:gray;
	border-width:0 1px 0 0;
}

td.aetzen2
{
	border-style:solid;
	border-color:gray;
	border-width:0 1px 1px 0;
}