✔ Grafische Tabelle in HTML

X

xThorx

Mitglied
Hallo zusammen,

ich habe folgendes Problem und hoffe, dass ihr mir helfen könnt (undn ich im richtigen Forum frage, wenn nicht dann sorry!):

Ich hab da z.B einen beschrifteten Farbverlauf den ich quasi als Überschrift der Tabelle haben möchte. Drumherum ist ein Rahmen und innen soll der Content geschrieben werden. Ist es jetzt irgendwie möglich immer wenn ich eine Tabelle per Html erstelle dieses Layout dann so hinzubekommen, dass der Rahmen mitsamt der Überschrift (beschrifteter Farbverlauf) angewandt wird?

Ich hoffe ich habe mich verständlich ausgedrückt.

Schwierig jetzt ist nur noch, dass der Content nicht immer gleich lang oder kurz ist und die Tabelle (besser der Rahmen) sich ja dann selbständig strecken oder kürzen müsste, hoffe ihr könnt mir helfen.

Falls noch Fragen sind, bin ja da:-)

Als Beispiel zu demw as ich wünsche mal folgenden Link...

http://www.boxedart.com

Gleich links die beiden tabellen mit stocked photos oder affiliate program

Vielen Dank!
 
Hallo.
Naja automatisch wird das wohl nicht gehen, da ja scheinbar auch jede Tabelle eine andere Überschrift hat. Um einen händisch eingefügten IMG-Tag wirst du nicht herumkommen.
Mit serverseitiger Programmierung kannst Du das natürlich automatisieren.

Einer Tabelle eine Graphik als Hintergrund zuzuweisen ist grundsätzlich möglich, nur wird das Bild dann automatisch gekachelt und nicht gestreckt. In so einem Fall müßtest Du mit Ebenen ( DIV-Tags) arbeiten, und den Content über das mit HTML (WIDTH und HEIGHT-Attribute) gestreckte Bild legen.

Vielleicht hat ja jemand eine bessere Lösung.

Der Thread gehört aber meiner Meinung nach eher ins HTML-Forum...

lg.
 
Hi,

vielleicht verstehe ich Dich auch falsch, aber ich würde dafür keine Tabellen, sondern DIV-Tags verwenden. Grafische Hintergründe kannst Du z.B. so festlegen:
HTML: 
<div id="mytable" style="position:absolute; width:120px;">
	<div id="header" style="display:block; width:120px; height:30px; background-image:url(top.gif)"></div>
	<div id="middle" style="display:block; width:120px; background-image:url(middle.gif);">
		<div id="content" style=" padding-left:5px; padding-right:5px;">
		Hier kann der Inhalt stehen!<br>
		Ein Farbverlauf in der Mittte der Tabelle ist leider schwieriger
		</div>
	</div>
	<div id="footer" style="display:block; width:120px; height:30px; background-image:url(bottom.gif)"></div>
</div>
- Ein Farbverlauf im mitteleren Bereich wüsste ich zwar nicht zu realisieren, da Hintergrundbilder m.E. nicht gestreckt werden können, aber vielleicht geht das ja schon in die Richtung, die Du Dir vorstellst.

Das sieht dann z.B. so aus (siehe Anhang).

Gruß
.
 

Anhänge

  • divtable.gif
    divtable.gif
    8,5 KB · Aufrufe: 142
Vielen Dank ersteinal für Eure schnelle Hilfe, das klappt wunderbar...

Muss da diesbezüglich aber nochmal nachhaken und zwar ob es auch möglich ist quasi den Header einfach nur als img tag einzubringen und direkt unten drunter (ohne Leerraum)einfach nur ne tabelle die vorher mit css definiert wurde mit links rechts unten Linien anzuknüpfen. so dass ich oben den header habe (das image tag) und der rest dann vom css dargestellt wird. Brauch z.b keinen footer in der Gesamttabelle...

Vielen Dank für die Hilfe!
 
Hi,

klar, warum nicht? Pack den Header als img in das DIV und darunter Deine Tabelle. Wenn Du den gesamten Rahmen mit CSS definierst, sollte das gehen. Wenn Du oben einen runden Rahmen brauchst, musst Du eben schauen, ob die CSS Rahmen zu dem Rahmen in Deinem Bild passen.

Gruß
.
 
Zuletzt bearbeitet:
Einfach gesagt, bei meinem Code-Beispiel unten entsteht ein Leerraum zwischen dem Image und der Tabelle, wo liegt da der Fehler?

Danke mal wieder!

Code: 
<html><head><title>border-width</title>
<style type="text/css">

#linksrechtsunten {
  border-left-width:1px;
  border-left-style:solid;
  border-left-color:red;
 
  border-right-width:1px;
  border-right-style:solid;
  border-right-color:green;
  
  border-bottom-width:1px;
  border-bottom-style:solid;
  border-bottom-color:green;
  text-align:justify; }

</style>
</head><body bgcolor="#FFFFFF" text="#000000">
<img src="Header.gif" alt="">
<p id="linksrechtsunten">Hier steht der Content</p>

</body></html>

Kann ich in Divs eigentlich auch Bilder in Originalgrösse anzeigen wenn ich das template zb vorher in photoshop erstellt habe oder muss ich dort immer die attribute width und height nutzen?

Nochmals vielen Dank!
 
Hi,

ich sehe bei Dir kein DIV-Tag. Du musst schon eine Breite vorgeben, damit der Text nicht rechts aus Deiner "Tabelle" hinausläuft:
HTML: 
<div id="mytable" style="width:120px">
	<img src="header.gif" alt="">
	<div id="rlu">Hier steht der Content</div>
</div>
(rlu entspricht hier Deinem "rechtslinksunten")

Gruß

P.S.: kann mal jemand diesen Thread nach HTML verschieben?
.
 
Sorry wenn ich so oft nachhaken muss aber wenn ich das so einbaue wie Datic beschrieben hat habe ich links unten und rechts unten am bild zu den linien links und rechts einen kleinen spalt frei! Kann man das irgendwie mit margin oder so umgehen, so dass es nahtlos aneinander gefügt wird?

Vielen Dank nochmal
 
Hmm, allerdings nur im IE. Ich bin kein CSS-Profi, aber mach doch einfach in Deinem Content ein geringes negatives Margin und ein entsprechendes positives Padding:
HTML: 
#rlu {
  margin-top:-3px;
  padding-top:3px;
  border-left-width:1px;
  border-left-style:solid;
  border-left-color:red;
...
}

Gruß
.
 
Klappt einwandfrei nur das i tüpfelchen noch und dann dürfte das hier erledigt sein!

Mir läuft der Content nämlich nach rechts aus der tabelle mit diesem code:

Code: 
<div id="mytable"  style="width:163px">
	<img src="header.gif" alt="">
	<div id="linksrechtsunten" style="width:163px">Hier steht der Content</div>
</div>

Wie kann ich den jetzt festsetzen, dass er immer weiter nach unten verläuft?

Vielen vielen Dank!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück