nicht angemeldet
Tabelle soll sich an Inhal in <th rowspan> Zelle anpassen.
Hallo zusammen,
möchte folgende Tabellenstruktur erstellen:
http://img81.imageshack.us/img81/352/tablestrukturog2.gif
In dieser Tabelle haben Zellen 1-5 fest definierte Größen. Die restlichen Zellen 6-8 könnten sich dann vertikal nach unten "ausbreiten", jenachdem wieviel Inhalt sich in Zelle 6 befindet.
Wie würde ich sowas erstellen? Die Tabelle müsste ja so aufgebaut sein, dass sich Zellen 7 und 8 automatisch nach unten an die Größe von Zelle 6 anpassen...
Habe mal versucht, mit Hilfe des <th rowspan"2"> Befehls zwei einzelne Zellen in eine große Zelle 6 zu verwandeln, in die ich dann den Content einfüge. Leider passt sich die gesamte Tabelle aber dann irgendwie nicht an die Höhe von Zelle 6 an. Zellen 4,5,7 und 8 kleben dann direkt oben an 1-3 und Zelle 6 mit dem Inhalt weit nach unten.
-
Hallo,
möchte folgende Tabellenstruktur erstellen:
schonmal sehr hilfreich zur Illustration ...
Habe mal versucht, mit Hilfe des <th rowspan"2"> Befehls zwei einzelne Zellen in eine große Zelle 6 zu verwandeln, in die ich dann den Content einfüge.
... aber zeig' mal deinen HTML-/ CSS-Code vor, damit man sehen kann, was du genau gemacht hast und wo ggf. der/ die Fehler liegen.
Gruß Gunther
-
... aber zeig' mal deinen HTML-/ CSS-Code vor, damit man sehen kann, was du genau gemacht hast und wo ggf. der/ die Fehler liegen.
Habe den Code mal oben gepostet.
Danke,
Tom
-
-
Hallo,
Hallo zusammen,
möchte folgende Tabellenstruktur erstellen:
Mh...
Den HTML-Code würde ich in etwa so schreiben:
<table border=1 width=40%>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>7</td><td rowspan=2>6/td><td>8</td></tr>
<tr><td valign=bottom>4</td><td valign=bottom>5</td></tr>
</table>In Zelle 4 und 5 würde ich dann jeweils eine Tabelle platzieren und in dieser dann den Inhalt. Mittels CSS bekommen dann alle Tabellen und jede Zelle einen Rahmen, bis auf Zelle 4, 5, 7 und 8. Wenn alles ordentlich angepasst wurde (margin:0px, border-collapse:collapse, etc.), sollte eigentlich die Tabelle deinem Bild entsprechen.
-
Danke schonmal für die Antworten.
Habe es mal versucht und bekomme jetzt die Tabelle so angezeigt:
http://img174.imageshack.us/img174/6171/tabellenproblemmw2.jpg
Wie man sieht, passen sich die beiden Zellen links und rechts nicht richtig an die Höhe der mittleren Zelle an....
Hier auch mal den Code, den ich dafür verwendet habe (den Content habe ich zur Übersichtlichkeit mal rausgenommen):
<!-- Test für Content Box -->
<table width="665px" border="0" align="center" cellpadding="0" cellspacing="0">
<tr style="height:15px">
<td style="background-image:url(images/box_ol.gif);background-repeat:no-repeat;background-position:top left;width:18px;""></td>
<td style="background-image:url(images/box_o.gif);background-repeat:repeat-x;background-position:top center;"></td>
<td style="background-image:url(images/box_or.gif);background-repeat:no-repeat;background-position:top right;width:18px;"></td>
</tr>
<tr>
<td style="background-image:url(images/box_l.gif);background-repeat:repeat-y;background-position:top left;width:18px;"></td>
<td rowspan="2" bgcolor="#ffffff" style="background-image:url(images/box_u.gif);background-repeat:repeat-x;background-position:bottom center;"><!-- CONTENT BEGIN -->
<!-- CONTENT END -->
</td>
<td style="background-image:url(images/box_r.gif);background-repeat:repeat-y;background-position:top right;width:18px;"></td>
</tr>
<tr style="height:45px">
<td valign="bottom" style="background-image:url(images/box_ul.gif);background-repeat:no-repeat;background-position:top left;width:18px;"></td>
<td valign="bottom" style="background-image:url(images/box_ur.gif);background-repeat:no-repeat;background-position:top right;width:18px;"></td>
</tr>
</table><!-- Ende des Tests -->
-
Hallo,
<td valign="bottom" style="background-image:url(images/box_ul.gif);background-repeat:no-repeat;background-position:top left;width:18px;">Hier eine Tabelle einfügen, die das Bild enthält. Dafür </td> <td valign="bottom" style="background-image:url(images/box_ur.gif);background-repeat:no-repeat;background-position:top right;width:18px;">Hier auch.</td>Oben in den <td> noch box_ul mit box_l bzw. box_ur mit box_r ersetzen und auf repeat-x setzen. Damit erhalten auch die beiden unteren äußeren Zellen das Hintergrundbild von den beiden mittleren äußeren Zellen.
-
*Hmpf*. Das "Dafür" aus meinem letzten Post ist überflüssig. Bitte nicht beachten.
-
Was mir gerade noch einfällt:
Eventuell benötigst du die Tabellen gar nicht. Schreib doch einfach für Zelle 4:
<td valign="bottom" style="background-image:url(images/box_l.gif);background-repeat:repeat-y;background-position:top left;width:18px;"><img src="images/box_ul.gif" border=0></td>Dasselbe für rechts (Zelle 5). Müsste eigentlich auch gehen.
-
Eventuell benötigst du die Tabellen gar nicht. Schreib doch einfach für Zelle 4:
<td valign="bottom" style="background-image:url(images/box_l.gif);background-repeat:repeat-y;background-position:top left;width:18px;"><img src="images/box_ul.gif" border=0></td>Wofür steht denn hier die Grafik "box_1.gif"? Muss ich also die Grafik für die unteren Ecken nicht als Hintergrund der Tabellen definieren, sondern als Grafik IN die jeweilige Zelle platzieren?
-
Uh... sorry mein Fehler. Nicht Zelle 4 sondern Zelle 7 war gemeint.
Der Code sollte wie folgt aussehen:
<table width="665px" border="0" align="center" cellpadding="0" cellspacing="0"> <tr style="height:15px"> <td style="background-image:url(images/box_ol.gif);background-repeat:no-repeat;background-position:top left;width:18px;""></td> <td style="background-image:url(images/box_o.gif);background-repeat:repeat-x;background-position:top center;"></td> <td style="background-image:url(images/box_or.gif);background-repeat:no-repeat;background-position:top right;width:18px;"></td> </tr> <tr> <td style="background-image:url(images/box_l.gif);background-repeat:repeat-y;background-position:top left;width:18px;"></td> <td rowspan="2" bgcolor="#ffffff" style="background-image:url(images/box_u.gif);background-repeat:repeat-x;background-position:bottom center;"> <!-- CONTENT BEGIN --> <!-- CONTENT END --> </td> <td style="background-image:url(images/box_r.gif);background-repeat:repeat-y;background-position:top right;width:18px;"></td> </tr> <tr style="height:45px"> <td style="background-image:url(images/box_l.gif);background-repeat:repeat-y;background-position:top left;width:18px;"><img src="images/box_lu.gif" border="0"></td> <td style="background-image:url(images/box_r.gif);background-repeat:repeat-y;background-position:top right;width:18px;"><img src="images/box_ru.gif" border="0"></td> </tr> </table>-
Uh... sorry mein Fehler. Nicht Zelle 4 sondern Zelle 7 war gemeint.
Naja, hätte mir auch einfach eine besser Reihenfolge bei der Numerierung einfallen lassen können ;-)
Der Code sollte wie folgt aussehen:
<table width="665px" border="0" align="center" cellpadding="0" cellspacing="0">
<tr style="height:15px">
<td style="background-image:url(images/box_ol.gif);background-repeat:no-repeat;background-position:top left;width:18px;""></td>
<td style="background-image:url(images/box_o.gif);background-repeat:repeat-x;background-position:top center;"></td>
<td style="background-image:url(images/box_or.gif);background-repeat:no-repeat;background-position:top right;width:18px;"></td>
</tr>
<tr>
<td style="background-image:url(images/box_l.gif);background-repeat:repeat-y;background-position:top left;width:18px;"></td>
<td rowspan="2" bgcolor="#ffffff" style="background-image:url(images/box_u.gif);background-repeat:repeat-x;background-position:bottom center;"><!-- CONTENT BEGIN -->
<!-- CONTENT END -->
</td>
<td style="background-image:url(images/box_r.gif);background-repeat:repeat-y;background-position:top right;width:18px;"></td>
</tr>
<tr style="height:45px">
<td style="background-image:url(images/box_l.gif);background-repeat:repeat-y;background-position:top left;width:18px;"><img src="images/box_lu.gif" border="0"></td>
<td style="background-image:url(images/box_r.gif);background-repeat:repeat-y;background-position:top right;width:18px;"><img src="images/box_ru.gif" border="0"></td>
</tr>
</table>Das bringt es leider auch nicht, wie man hier sehen kann: [url:http://img338.imageshack.us/img338/4844/tableproblem2ox5.jpg]-
Hallo,
Das bringt es leider auch nicht, wie man hier sehen kann:
[url:http://img338.imageshack.us/img338/4844/tableproblem2ox5.jpg]Das sollte aber was bringen. Kannst die bei der Tabelle bitte mal border="1" setzen und dann noch einmal das Bild hochladen, damit ich die Gitternetzlinien sehen kann? Theoretisch dürften die unteren Ecken gar nicht da oben sein. Ich hab's an meinem Rechner probiert und da waren die Ecken unten.
-
Hallo,
Das bringt es leider auch nicht, wie man hier sehen kann:
[url:http://img338.imageshack.us/img338/4844/tableproblem2ox5.jpg]Das sollte aber was bringen. Kannst die bei der Tabelle bitte mal border="1" setzen und dann noch einmal das Bild hochladen, damit ich die Gitternetzlinien sehen kann? Theoretisch dürften die unteren Ecken gar nicht da oben sein. Ich hab's an meinem Rechner probiert und da waren die Ecken unten.
Habe die Ränder der Tabelle mal rot anzeigen lassen und das sieht wirklich seltsam aus:
[url:http://img126.imageshack.us/img126/3406/tableproblem3ge4.jpg]
Liegt das vielleicht am Code, denn ich einfach mal so zum Test in die Zelle gepostet habe?!
<!-- CONTENT BEGIN --> <table cellpadding="1" align="center" cellspacing="2" border="0" width="600"> <tr align="center" valign="top"> <?php $featured_articles = mysql_query("SELECT * from ccms_article where featured='1' order by id desc limit 3"); while ($row = mysql_fetch_assoc($featured_articles)) { $title_start = preg_replace('/[^a-zA-Z0-9 *]/', '', $row[title]); $title_seo = str_replace(' ', '-', $title_start); echo " <td width=\"200\" align=\"left\"><table width=\"200\" border=\"0\" align=\"center\"> <tr align=\"center\"> <td valign=\"top\"> <div align=\"center\"><a href=\"article-$row[id]-$title_seo.html\" class=\"featured_sub\"><img alt=\"$row[title]\" align=\"left\" src=\"thumbnailer.php?type=featured&image=$row[image]\" style=\"border: 1px solid #131E26;\" width=\"50\" ></a></td><br> <td align=\"left\" valign=\"top\"> <SPAN class=\"featured_sub\"><a href=\"article-$row[id]-$title_seo.html\" class=\"featured_sub\">$row[title]</a><br /> $row[preview]</td></table></div> \n"; } ?> </tr> </table> <!-- CONTENT END -->-
Hallo,
Liegt das vielleicht am Code, denn ich einfach mal so zum Test in die Zelle gepostet habe?!
Du scheinst nicht sehr probierfreudig zu sein. Lass doch den Code mal weg und schaue doch erst einmal ob die Tabelle leer funktioniert. Dann siehst du sofort ob's daran liegt oder nicht.
Das Gitternetz in deinem Bild ergibt für mich überhaupt keinen Sinn. Theoretisch ist es überhaupt nicht möglich *so* eine Tabelle zu erzeugen.
Warum postest du eigentlich ständig Bilder von der Seite? Kannst du die Seite nicht mal ins Netz stellen? Das würde die Fehlersuche zum einen vereinfachen und zum anderen erheblich beschleunigen.
-
Das Gitternetz in deinem Bild ergibt für mich überhaupt keinen Sinn. Theoretisch ist es überhaupt nicht möglich *so* eine Tabelle zu erzeugen.
Genau, hat mich auch gewundert, was ich da wieder fabriziert habe! ;-)
Ich habe nur versucht, den Code selbst zu verstehen und konnte mir bislang halt nicht erklären, wieso in den untern Ecken plötzlich sowohl die Eckgrafiken (in der Zelle) als auch die Aussengrafiken (im Zellhintergrund) angezeigt werden sollten. Bei deiner Variante hätte man dann doch genauso gut einfach auf die zweite Tabellenreihe verzichten können, oder?! Das Problem ist nämlich dann, dass ich die Hintergrundtransparenz der Ecken nicht mehr funktioniert, weil die Aussengrafiken den duchsichtigen Hintergrund verdecken!
Warum postest du eigentlich ständig Bilder von der Seite? Kannst du die Seite nicht mal ins Netz stellen? Das würde die Fehlersuche zum einen vereinfachen und zum anderen erheblich beschleunigen.
Hatte absichtlich immer Bilder hochgeladen, weil ich an dem speziellen Templat immer herumgspielt habe und ein Link dann später im Posting nicht mehr auf das spezielle Beispiel führt. Wollte also den Thread für die Nachwelt noch selbsterklärend lassen ;-)
Dafür reiche ich dann jetzt mal eine Testseite nach:
[url:http://www.gamepals.de/boxtest.htm]-
Ich habe nur versucht, den Code selbst zu verstehen und konnte mir bislang halt nicht erklären, wieso in den untern Ecken plötzlich sowohl die Eckgrafiken (in der Zelle) als auch die Aussengrafiken (im Zellhintergrund) angezeigt werden sollten. Bei deiner Variante hätte man dann doch genauso gut einfach auf die zweite Tabellenreihe verzichten können, oder?! Das Problem ist nämlich dann, dass ich die Hintergrundtransparenz der Ecken nicht mehr funktioniert, weil die Aussengrafiken den duchsichtigen Hintergrund verdecken!
Mir ist auch aufgefallen, dass wenn ich für die Höhe der Zellen 7 und 8 (also die Aussenseiten) einen festen Wert eingebe, der Hintergrund über die entsprechende Pixelhöhe korrekt angezeigt wird. Kann dann nicht die Zellen 7 und 8 irgendwie dazu bringen, die restliche Höhe der Tabelle auszufüllen?
-
Hallo,
hier mal mein Ergebnis: http://812.knu-systems.de/temp/dd.htm
Es ist jetzt einfach eine Tabelle mit 2 Zeilen und 3 Spalten. Wie du siehst ist das Problem die Transparenz der unteren beiden Ecken. Was ebenfalls aufällt ist, dass der Text ziemlich nah an den Rand geht (besonders bei Firefox).
Das Hauptproblem waren aber deine wilden Doctype und Metaangaben am Anfang deiner Datei. Die Angabe "strict" war dann wohl zu strikt und das "UTF-8" liefert für Umlaute nur hübsche Symbole. Für letzteres empfehle ich die Angabe "@charset "ISO-8859-1";" als allererste Zeile in deiner CSS-Datei. (Siehe auch: http://de.selfhtml.org/css/formate/einbinden.htm#separat.)
Was die Tabelle betrifft, so gibt es zwei Möglichkeiten:
1. Für die Webseite kein Hintergrundbild verwenden und die bei box_ul und box_ur die transparenten Stellen die Hintergrundfarbe deiner Website geben oder was ich mehr empfehle
2. Die Bilder box_ul, box_u und box_ur in der Höhe aufsplitten, sodass du je zwei Bilder erhältst. Einmal den unteren Teil des Ausgangsbildes und ein einmal den oberen Teil. Des Verhältnis ist dir überlassen. Danach erweiterst du die Tabelle auf drei Zeilen und fügst die unteren Teile als Bild ein:
|-----------------------------------------------------------------------|
| box_ol als <img> | box_o als <img> und hintergrund | box_or als <img> |
|------------------------------------------------------------------------
| box_l als hinter-| Text | wie ganz links, |
| grund und oberer | | nur mit box_r und|
| Teil von box_ul | | box_ur |
| als <img> | | |
|-----------------------------------------------------------------------|
| unterer Teil von | box_u als <img> und hintergrund | wie ganz links |
| box_ul als <img> | | nur mit box_ur |
|-----------------------------------------------------------------------|So sollte es keine Probleme mit der Transparenz geben und der Text kommt auch nicht so dicht an den unteren Rahmen dran.
-
Korrigierte Tabelle:
|-----------------------------------------------------------------------|
| box_ol als <img> | box_o als <img> und Hintergrund | box_or als <img> |
|------------------------------------------------------------------------
| box_l als Hinter-| Text | wie ganz links, |
| grund und oberer | | nur mit box_r und|
| Teil von box_ul | oberer Teil von Box_u als | box_ur |
| als <img> | Hintergrund | |
|-----------------------------------------------------------------------|
| unterer Teil von | unterer Teil von box_u als <img>| wie ganz links |
| box_ul als <img> | und Hintergrund | nur mit box_ur |
|-----------------------------------------------------------------------|
-
-
-
-
-
-
-
-
-
-
-
Hm, habe das noch nicht ausprobiert - verstehe aber die Änderunge auch nicht ganz...
Zellen 1,2,3,4,5,7 und 8 enthalten als Hintergrund ja jeweils die Grafik, welche nachher den Rahmen der Box ergeben sollen.
<td valign="bottom" style="background-image:url(images/box_ul.gif);background-repeat:no-repeat;background-position:top left;width:18px;">Hier eine Tabelle einfügen, die das Bild enthält.Wieso soll ich dann z.B. (wie beschrieben) in Zelle 4 nochmal eine Tabelle einfügen? So wie ich das Problem verstanden habe, passen sich lediglich die Zellen 7 und 8 nicht mehr an die vertikale Höhe von Zelle 6 an, wodurch die beiden Zellen mit den unteren Eckgrafiken (4 und 5) nicht korrekt bis ans untere Ende der Tabelle verschoben werden. Oder habe ich deinen Änderungsvorschlag falsch verstanden?
-
-
