Tabelle via CSS ändern

[gary]

Guten Morgen zusammen,

Ich habe ein scheinbar schlechtes Tabellenlayout (altmodisch und langweilig). Jetzt möchte ich per CSS meinen Tabellen sagen, das sie für alle Seiten ein anderes Design verwenden sollen.

Bisher habe ich einen Doppelrahmen. Es gibt zwei Ideen:

Version A:
Der Abstand des Doppelrahmens soll geweitet werden, so dass eine Grafik den Zwischenraum füllt.Also der Abstand des inneren und des Äusseren Rahmens grösser und den Zwischenraum mit dem gebürsteten Metalmuster ausfüllen.

Version B:
Ein neuer dicker Rahmen,der ebenfalls mit dem Metalmuster gefüllt ist, aber zusätzlich "runde" aässere Ecken.

Das Ganze soll etwa so
ungefähr aussehen...

Ist das mit grossem Aufwand verbunden, oder gut nachträglich zu realisieren?

Viele Grüsse gary

[Cheatah]

Hi,

Ich habe ein scheinbar schlechtes Tabellenlayout (altmodisch und langweilig). Jetzt möchte ich per CSS meinen Tabellen sagen, das sie für alle Seiten ein anderes Design verwenden sollen.

ähm, eine Seifenkiste frisch zu lackieren und vorne einen Mercedesstern dranzupappen, macht das Ding noch nicht straßentauglich. CSS muss auf einem semantischen Markup aufsetzen, sonst ist es machtlos.

Das Ganze soll etwa so
ungefähr aussehen...

Irrelevant. Dein HTML-Code ist fiderporstig[tm], er steht Dir und Deinen Wünschen im Weg. *Egal* welches Layout Du draufsetzen möchtest. Erst wenn Du einen sinnbehafteten HTML-Code verfasst hast, kannst Du quasi beliebige Layout-Varianten per CSS vermitteln.

Ist das mit grossem Aufwand verbunden,

CSS auf Tabellenlayout zu setzen ist aufwändig, ja. Jede Anpassung am Layout wird Dir konstant hohe Aufwände erzeugen. Der Initialaufwand, den HTML-Code nutzbringend zu verfassen, ist möglicherweise höher, verringert aber alle Folgeaufwände immens.

Cheatah

[gary]

Hi Cheatah,

ähm, eine Seifenkiste frisch zu lackieren und vorne einen Mercedesstern dranzupappen, macht das Ding noch nicht straßentauglich.

Sieht aber dann wenigstens frisch lackiert aus...

Irrelevant. Dein HTML-Code ist fiderporstig[tm], er steht Dir und Deinen Wünschen im Weg. *Egal* welches Layout Du draufsetzen möchtest. Erst wenn Du einen sinnbehafteten HTML-Code verfasst hast, kannst Du quasi beliebige Layout-Varianten per CSS vermitteln.

Das da:

<link rel="stylesheet" type="text/css" href="design.css">

ist auf _jeder_ Seite vorhanden. da hätte ich keinen Aufwand im Quelltext. Ich müsste wirklich nur die design.css ändern.

CSS auf Tabellenlayout zu setzen ist aufwändig, ja. Jede Anpassung am Layout wird Dir konstant hohe Aufwände erzeugen. Der Initialaufwand, den HTML-Code nutzbringend zu verfassen, ist möglicherweise höher, verringert aber alle Folgeaufwände immens.

Na, keine quick & Dirty Lösung im Ärmel?

Viele Grüsse

gary

[gary]

Hallo nochmal,

Und wie wäre es, wenn man zum Beispiel in den Ecken sowas
per css einpflanzt?

Ich habe oben Kugeln und unten hohle Kreise. Wie sieht es aus?

Kann man das table-Element überhaupt so "frisieren"?

Viele Grüsse gary

[gary]

Hi to all,

Version A:
Der Abstand des Doppelrahmens soll geweitet werden, so dass eine Grafik den Zwischenraum füllt.Also der Abstand des inneren und des Äusseren Rahmens grösser und den Zwischenraum mit dem gebürsteten Metalmuster ausfüllen.

Ich habe das im Netz gefunden:

border-spacing

Damit kann man den Zwischenraum dehnen. Gibt es ein Befehl in CSS, das dem Zwischenraum miteiner Grafik belegen kann?

Grüsse gary

[Harlequin]

Yerf!

Gibt es ein Befehl in CSS, das dem Zwischenraum miteiner Grafik belegen kann?

Nicht direkt. Aber evtl. funktioniert es, wenn du der Tabelle das Hintergrundbild gibst und den Zellen eine Hintergrundfarbe (damit diese nicht transparent sind).

Gruß,

Harlequin

[gary]

Hi Harlequin,

Nicht direkt. Aber evtl. funktioniert es, wenn du der Tabelle das Hintergrundbild gibst und den Zellen eine Hintergrundfarbe (damit diese nicht transparent sind).

Das ist meine design.css:

table {
   width: 75%;
   border: 2px double #ffcc00;
}

td {
   border: 1px double #ffcc00;
}

h4 {
   text-align:left;
   font-family:Arial, sans-serif;
   font-size:14px;
   font-weight:bold;
}

p.agbformat {
   text-align:left;
}

Das heisst ich brauche das:
style="background-image:url(background.jpg)"
Also:
style="background-image:http://www.vam-shop/metall_smooth.jpg"
Oben hat es eine Klammer, die brauche ich aber nicht, oder?
Muss das in den table-Befehl?

Grüsse gary

[Harlequin]

Yerf!

Das heisst ich brauche das:
style="background-image:url(background.jpg)"
Also:
style="background-image:http://www.vam-shop/metall_smooth.jpg"
Oben hat es eine Klammer, die brauche ich aber nicht, oder?

Doch, die braucht man:

background-image:url(http://www.vam-shop/metall_smooth.jpg);

Muss das in den table-Befehl?

Weniger Befehl, sondern Regel. Aber ja, genau da mit rein wo auch schon border und width angegeben sind.

Gruß,

Harlequin

[gary]

Hi Harlequin,

Ja, funktioniert.Und man kann sehen, dass das Hintergrundbild auch im Zwischenraum angezeigt wird. Gut. Wie formatiere ich den Hintergrnd in den eigentlichen Zellen in der Tabelle, schwarz? Also ich meine alle Einzelzellen (Da wo text und Zahlen und Rollfelder drin stehen)

Ach herje,ich hoffe du kommst draus, wsas ich dir eigentlich sagen will... *g*

Viele Güsse gary

PS.: deine Änderung ist schon online http://www.vam-shop.com

[Harlequin]

Yerf!

Ach herje,ich hoffe du kommst draus, wsas ich dir eigentlich sagen will... *g*

Ist ja im Prinzip das, was ich in meinem Vorschlag schon mit erwähnt hab: die zellen der tabelle brauchen einen Hintergrund. Und genau so kann man das auch in CSS schreiben:

table td {background-color:black;}

Das Leerzeichen zwischen table und td ist der Nachfahrenselektor. Damit werden dann alle td innerhalb einer Table angesprochen. Wobei mir grad auffällt: du hast ja eh nur eine Tabelle / td darf eh nur innerhalb von table vorkommen:

td {background-color:black;}

ist in dem Fall kürzer. Das obere kannst du verwenden, wenn du mehrere Tabellen unterschiedlich formatieren willst. Dann einfach mit Klassen oder IDs ergänzen.

Gruß,

Harlequin

[gary]

Merci Harlequin,

Das Einschwärzen der Zellhintergründe war erfolgreich. Danke. Wenn du noch ein bischen Zeit hast, hier noch mal mein design.css:

table {
   width: 75%;
   border: 2px double #ffcc00;
   background-image:url(http://www.vam-shop.com/metall_smooth.jpg);
}

td {
   border: 1px double #ffcc00;
   border-space: 10px;
   background-color:black;
}

h4 {
   text-align:left;
   font-family:Arial, sans-serif;
   font-size:14px;
   font-weight:bold;
}

p.agbformat {
   text-align:left;
}

Die CSS _Regel_ border-space geht nicht. Hab ich in der Syntax mist gebaut?

PS.: Irgendwo im Web hab ich das mit border-space gelesen, und kann es nicht mehr finden. In der Selfhtml-Bücherei kannich so eine Formatierung nirgends finden.

Herzliche Grüsse gary

[Harlequin]

Yerf!

Die CSS _Regel_ border-space geht nicht. Hab ich in der Syntax mist gebaut?

Ja.

PS.: Irgendwo im Web hab ich das mit border-space gelesen, und kann es nicht mehr finden. In der Selfhtml-Bücherei kannich so eine Formatierung nirgends finden.

In Self-HTML findet sich border-spacing. Allerdings funktioniert das im IE angeblich nicht. Hier wird wohl nur cellspacing helfen, auch wenns kein CSS ist...

Gruß,

Harlequin

[gary]

Hi Harlequin,

Hat alles soweit geklappt. Weisst du ob es für JPG eine kb Grenze gibt, damit CSS es als Hintergrund nehmen kann?

Ich frage desshalb weil:

http://www.vam-shop.com/metall_smooth.jpg (22kB)
wird akzeptiert,

http://www.vam-shop.com/metal_sw_hor_long.jpg (119 kB)
hingegen nicht.

Ich habe die Datei umbenannt in:

http://www.vam-shop.com/metall_sw.jpg
Dachte der Name wäre zu lang. Aber er nimmt die datei nicht.

Grüsse gary

[Harlequin]

Yerf!

http://www.vam-shop.com/metal_sw_hor_long.jpg (119 kB)
hingegen nicht.

Ich habe die Datei umbenannt in:

http://www.vam-shop.com/metall_sw.jpg
Dachte der Name wäre zu lang. Aber er nimmt die datei nicht.

Überprüf mal den Dateinamen, bei mir kommt wenn ich das direkt aufrufe immer ein "The requested URL /metall_sw.jpg was not found on this server.".

Evtl. liegts auch an Groß-/Kleinschreibung.

Gruß,

Harlequin

[gary]

Hi Harlequin,

Jetzt geht es. War wohl eines der Dinge, die man nicht erklären kann (Rubrik Akte X)

Danke für die Hilfe.

Vielen Dank gary

PS.:Wie findest du jetzt das Tabellenlayout - immer noch langweilig?
Kannst ja deinen Senf unter "Seitenbewertung" kundtun ;-)

Bye