• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tabelle

Werbung:
Willkommen im Forum.

Zeig doch mal deinen Versuch.

Wenn du Probleme mit den Grundlagen von HTML und CSS hast, hilft ein Blick in die Quellensammlung:

- Quellensammlung

Ich glaube, etwa Little Boxes ist ganz gut für den Einstieg.
 
Werbung:
Hallo Marco.
Wo genau hängts jetzt? Meinst du die Unterteilung in "Details"? Oder meinst du etwas was mit Formatierung zu tun hat?

PS: News schreiben sich immernoch News und nicht New's ;)
 
Du könntest in das td-Element, das die Details enthält, einfach eine weitere Tabelle einsetzen (also zusätzliches table-Element). So wird's jedenfalls auf der verlinkten Seite gemacht.
 
Werbung:
Verstehe zwar nicht, was jetzt gerade daran so schwierig ist, zumal du das im Code der anderen Seite nachsehen kannst…

HTML:
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>New</title>
    </head>

    <body>

        <table>
            <tr>
                <th>Bild</th>
                <th>Details</th>
                <th>Zusatzinformation</th>
            </tr>
            <tr>
                <td>[Bild]</td>
                <td>
                    <table>
                        <tr>
                            <td>ID</td>
                            <td>mJ-05</td>
                        </tr>
                        <tr>
                            <td>Geschlecht</td>
                            <td>Weiblich</td>
                        </tr>
                    </table>
                </td>
                <td>[Zusatzinformation]</td>
            </tr>
        </table>

    </body>

</html>
 
Tabelle in Tabellenzelle erstellen - hast Du das wenigstens schon versucht? Im Zweifelsfall: schau dir den Quellcode der anderen Seite an.

Achja, und Rechtklicksperren sind nicht gerade beliebt, vor allem wenn man helfen soll.
 
Werbung:
Zumal Rechtsklicksperren sinnlos sind, weil der Besucher JS einfach abschalten kann.

Eine komplex verschachtelte Tabelle baut man am besten top-down. Im vorliegenden Beispiel existieren pro Datensatz 3 Spalten und 7 Zeilen unterschiedlicher Höhe.

Als simpelsten Ansatz könnte man den Zellen in der linken Spalte einfache, doppelte und dreifache Höhe geben. Das heißt, man baut eine Tabelle mit 12 x 3 = 36 Zellen und eliminiert anschließend die überflüssigen mittels Colspan und Rowspan.
 
Zuletzt bearbeitet:
Hallo

So habe mich mit euren Tips noch mal dran gesetzt,aber es soll nicht klappen,es fehlen die Tabellen.
Seht selbst.

Hier mein Code:

HTML:
<table id="SchlangenListe" style="height: 232px;" border="0" cellspacing="1" cellpadding="3" width="696">
<tbody>
<tr>
<th>Info</th> <th>Bild</th> <th>Beschreibung</th>
</tr>
<tr>
<td valign="top">
<table class="SchlangenInfobox" border="0" cellspacing="1" cellpadding="2">
<tbody>
<tr>
<td colspan="2"><span class="captions">ID</span> <strong>NZ11</strong></td>
</tr>
<tr>
<td colspan="2" align="center"><img src="images/icon_female.png" border="0" alt="sex_word" width="31" height="31" /></td>
</tr>
<tr>
<td colspan="2"><span class="captions">Schlupfdatum</span> 01.07.2011</td>
</tr>
<tr>
<td colspan="2"><span class="captions_right">Schlupfgewicht</span> 52 g</td>
</tr>
<tr>
<td colspan="2"><span class="captions">Aktuelles Gewicht</span> 300 g</td>
</tr>
<tr>
</tr>
<tr>
<td class="male" width="70" height="70" align="center" valign="middle"><a href="bestand/detail.php?id=000115"><img src="cache/83_0_0_250x167_zuchttiere_weib1-1.jpg" border="0" alt=" " width="110" height="74" /></a></td>
<td class="female" width="70" height="70" align="center" valign="middle"><a href="bestand/detail.php?id=000116"><img src="cache/83_0_0_260x173_images_stories_hc1-1.jpg" border="0" alt=" " width="110" height="73" /></a></td>
</tr>
</tbody>
</table>
</td>
<td align="center" valign="top"><img src="images/stories/spider.jpg" border="0" alt="test hier" width="282" height="197" /></td>
<td valign="top">
<h2>text hier</h2>
<p> </p>
<p>Leider die einzige Nachzucht dieses Jahr.</p>
<br />
<p>text hier</p>
<p> </p>
</td>
</tr>
</tbody>
<tbody>
</tbody>
</table>

und hier das Ergebniss:

test

Auch ist der Hintergrund von den Überschriften nicht farbig.

Kann mir einer helfen bitte?

mfg Marco
 
Also ich sehe da im Code Tabellen. (?)

Ah, meinst du, dass die keine Rahmen haben? Überleg mal, was border="0" tut.

- SELFHTML: HTML/XHTML / Tabellen / Gestaltung einer Tabelle

Auch ist der Hintergrund von den Überschriften nicht farbig.

- SELFHTML: Stylesheets / CSS-Eigenschaften / Hintergrundfarben und -bilder

Ich meine es nicht böse, aber das sind Dinge, die du in den verlinkten Einführungen (zum Beispiel von mir im zweiten Post im Thread) wunderbar nachlesen kannst. Dafür brauchst du uns nun wirklich nicht.
 
Werbung:
So war das nun auch nicht gemeint, aber du hast einfach auch selbst mehr davon, dich erst mal in die Materie einzulesen. Damit beantworten sich dann viele Fragen, die du jetzt hast oder die du in Zukunft haben wirst, von alleine. :)
 
Das weiss ich doch :-)
Bin euch ja auch Dankbar,nun weiss ich wieder ein wenig mehr und habs auch fast geschaft bis auf wenige Details.

test

Info - Bild - Beschreibung wollen einfach nicht in der Mitte bleiben

Dann sollte die große Tabelle so groß sein wie die kleine Tabelle in der Spalte 1 unter Info,habe dazu auch nichts gefunden,oder die falschen Suchbegriffe eingegeben.

Edit:komisch wenn ich die Tabelle in ner html datei aufm Desktop ablege und sie aufrufe,dann wird alles so angezeigt wie ich es möchte nur nicht auf der page.

Woran kann das liegen ?

www.mjpythons.de/bilder/index.html
 
Zuletzt bearbeitet:
Werbung:
Meinst Du die Spaltenüberschriften? Bei mir sind die im Firefox zentriert. Ist aber auch eher gut Glück, da deine HTML-Datei kein HTML-Grundgerüst und vor allem keinen Doctype hat. Ohne Doctype stellt jeder Browser einen Quellcode so gut dar wie er kann, aber eben nicht so wie es von dir wohl gedacht ist. Zudem kommt es dann erst recht zu erheblichen Abweichungen zwischen den Browsern.
 
Das sind Style eigenschaften, die du deiner Tabelle mit CSS hinzufügen kannst.

ein <th style="text-align: center;"> sollte den gewünschten Effekt bringen.
Dass der Fiorefox das schon zentriert anzeigt, kann daran liegen, dass er sein eigenes Stylesheet verwendet, in dem Überschriften einfach zentriert angezeigt werden, andere Browser das aber wieder anders machen.
 
Werbung:
Zurück
Oben