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

Hilfe!!! Bild vor einer Tabelle einfügen

R

Rici

Neues Mitglied
Hallo liebe Mitglieder,

ich benötige dringend Hilfe. Und zwar muss ich vor ein Abschlussprojekt eine HTML Webseite erstellen. Ich tue mich damit etwas schwer. Die Webseite geht um eine Bar/Lounge und die Getränkekarte habe ich per Tabelle in HTML eingefügt.

Diese Tabelle habe ich in 5 Tabellen unterteilt je nach Kategorie (Alkoholfreie Getränke, Alkoholische Getränke, etc.). Jetzt möchte ich gerne vor jede Tabelle/Kategorie ein entsprechend passendes Bild einfügen.

Aber ich bekomme es einfach nicht hin, dass das Bild mittig vor dieser Tabelle ist. :-( :-( :-( Egal was ich mache, das Bild erscheint immer über der Tabelle und nicht davor.

Habt ihr einen Tipp was ich machen muss?

Vielen Dank schon mal.
 
Hallo

Habt ihr einen Tipp was ich machen muss?
Zum Vergrößern anklicken....

Ohne deinen kompletten Quelltext mit CSS und den Bildern zu kennen? Wohl eher nicht.

Allgemein: Du solltest auf die Tabellen zum Layouten verzichten und Flexbox verwenden.

Gruss

MrMurphy
 
Wir erarbeiten das Projekt anhand eines Buches. Da steht leider nix von Flexbox :-(

Das ist der Quelltext einer Tabelle.

table border="1" align="center" width="454">
<tbody>
<tr>
<td width="423" valign="top" colspan="3">
<p align="center">
<strong>Alkoholfreie Getränke</strong>
</p>
</td>
</tr>
<tr>
<td width="205" valign="top">
<p>
<strong>Wasser</strong>
</p>
<p>
(medium/naturell)
</p>
</td>
<td width="96" valign="top">
<p>
0,2 L
</p>
<p>
0,4 L
</p>
</td>
<td width="123" valign="top">
<p>
2,00 €
</p>
<p>
4,00 €
</p>
</td>
</tr>
<tr>
<td width="205" valign="top">
<p>
<strong>Softdrinks</strong>
</p>
<p>
(Cola, Cola-Light, Fanta, Sprite, etc.)
</p>
</td>
<td width="96" valign="top">
<p>
0,2 L
</p>
<p>
0,4 L
</p>
</td>
<td width="123" valign="top">
<p>
2,40 €
</p>
<p>
4,60 €
</p>
</td>
</tr>
<tr>
<td width="205" valign="top">
<p>
<strong>Säfte</strong>
</p>
<p>
(Kirschsaft, Apfelsaft, Ananassaft)
</p>
</td>
<td width="96" valign="top">
<p>
0,2 L
</p>
<p>
0,4 L
</p>
</td>
<td width="123" valign="top">
<p>
2,20 €
</p>
<p>
4,00 €
</p>
</td>
</tr>
<tr>
<td width="205" valign="top">
<p>
<strong>Alkoholfreies Bier </strong>
</p>
<p>
(Bier, Radler, Weizen, Malzbier)
</p>
</td>
<td width="96" valign="top">
<p>
0,33 L
</p>
</td>
<td width="123" valign="top">
<p>
2,50 €
</p>
</td>
</tr>
</tbody>
<br />
</table>
 
Hier hast Du was zum Spielen.
Code: 
<!DOCTYPE html>
<html lang="de">
<head>
<title>Getränkekarte</title>
<meta charset="UTF-8">
<style>
table {
 border-collapse:collapse;
 border:1px solid #000;
 width:100%;
 min-width:640px;
 margin:auto;
}

table td {
 border:1px solid #000;
 padding:10px;
 font-weight:bold;
 vertical-align:top;
}

table td span {
 display:block;
 padding-top:10px;
}

table th {
 text-align:center;
 padding:20px;
 border:1px solid #000;
 width:150px;
}

table th:nth-of-type(1) {
 padding:0;
 vertical-align:top;
}

table th img {
 width:100%;
}

div table td:nth-of-type(2),
div table td:nth-of-type(3),
table td:nth-of-type(1) span  {
   font-weight:normal;
}


</style>

</head>
<body>

<table>
<tr>
<th rowspan="5"><img src="bild.jpg" alt=""></th>
<th colspan="3">Alkoholfreie Getränke</th>
</tr>
<tr>
<td>Wasser<span>(medium/naturell)</span></td>
<td>0,2 L<span>0,4 L</span></td>
<td>2,00 €<span>4,00 €</span></td>
</tr>
<tr>
<td>Softdrinks<span>(Cola, Cola-Light, Fanta, Sprite, etc.)</span></td>
<td>0,2 L<span>0,4 L</span></td>
<td>2,40 €<span>4,60 €</span></td>
</tr>
<tr>
<td>Säfte<span>(Kirschsaft, Apfelsaft, Ananassaft)</span></td>
<td>0,2 L<span>0,4 L</span></td>
<td>2,20 €<span>4,00 €</span></td>
</tr>
<tr>
<td>Alkoholfreies Bier<span>(Bier, Radler, Weizen, Malzbier)</span></td>
<td>0,33 L</td>
<td>2,50 €</td>
</tr>
</table>

</body>
</html>
 
Zuletzt bearbeitet:
Danke, das ist lieb. Aber ich komme einfach nicht klar :-(

Bin in HTML wirklich nicht gut und will diese Projektarbeit einigermaßen schaffen :-(
 
Hallo

Ohne ein gewisses Grundlagenwissen werden wir dir kaum helfen können.

Ich habe trotzdem mal für alle Interessierten eine Beispielspeisekarte mit aktuellem HTML und CSS sowie deinen Vorgaben mit einem responsive Layout erstellt:

http://boratb.bplaced.net/index21.html

Gruss

MrMurphy
 
Wow! das sieht klasse aus. Genauso könnte ich es mir vorstellen. Die Frage ist nur bekomm ich das hin :)

Ein gewisses Grundlagenwissen liegt vor, aber eben nur gewisse Grundlagen. Weder Detail noch Fachwissen...

Ist für diese Projektarbeit auch alles blöd gelaufen. Innerhalb von 3 Wochen HTML lernen und Abgabe ist etwas knapp...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben