Größe der Tabellenspalte auf Inhalt anpassen-html?
Hallo,
ich versuche jetzt schon seit Tagen diese Tabelle und es klappt einfach nicht. Ich will das die Spalte mit ,,Bild“ nicht so breit ist, sondern ungefähr so wie das bild selbst
Wenn ich das Bild noch groß reinmache ist es auch gleich groß, dann mache ich das bild aber mit width kleiner und die Spalte bleibt so breit
hat jemand ideen? habe wirklich schon alle chat gpt codes benutzt und nichts klappt ich wäre euch sehr dankbar
bild im anhang
Falls es jemand was bringt:
css:
body {
font-size: 15pt;
color: white;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
font-family: Constantia;
background-color: #FF6666;
text-align: center;
}
.table-container {
display: flex;
justify-content: center;
align-items: center;
border: 3px solid #FF6666;
padding: 10px;
background-color: #FF6666;
width: fit-content;
margin: auto;
}
table {
border-collapse: collapse;
width: 35%;
margin: auto;
display: flex;
}
td {
padding: 10px;
border: 1px solid black;
font-size: 15pt;
width: fit-content;
}
th {
color: #8A0102;
font-size: 20pt;
padding: 10px;
border: 1px solid black;
}
.table-image {
max-width: 100%;
height: auto;
}
html:
<body>
<h1> Sehenswürdigkeiten </h1>
<div class="table-container">
<table>
<tr>
<th>Sehenswürdigkeit</th>
<th>Bild</th>
</tr>
<tr>
<td><em> Der Eiffelturm </em> <br>
Der Eiffelturm ist das Wahrzeichen von Paris. <br>
Er ist seit 1889 in Betrieb und erreicht <br> eine unfassbare Höhe von 330 Metern! <br> Ihr findet ihn im 7. Arrondissement <br> und glaubt mir: Defintiv ein Must-Look! <br
Vor allem in der Dunkelheit glitzert er immer zur vollen Stunde
</td>
<td><img src="IMG_0693.jpeg" alt="Der Eiffelturm bei Nacht" class="table-image" width="30%"></td>
</tr>
<tr>
<td>Info 2</td>
<td><img src="image2.jpg" alt="Bild 2"></td>
</tr>
<tr>
<td>Info 3</td>
<td><img src="image3.jpg" alt="Bild 3"></td>
</tr>
</table>
</div>
1 Antwort
Die Breite einer Tabellenspalte richtet sich stets nach dem breitesten Inhalt aus, der in der jeweiligen Spalte liegt. Dieses Verhalten kann nur gebrochen werden, indem man zum Beispiel die Breite der Spalte / einer Zelle in der Spalte / der Tabelle explizit setzt.
Was bei deinem geteilten Code auffällt:
- Es ist offensichtlich ein anderer Stand als der, der auf dem Bild zu sehen ist.
- In der ersten Tabellenzelle ist der letzte br-Tag unvollständig und auch die HTML-Entity für den Umlaut ist falsch (richtig wäre: ö - die bessere Lösung wäre es allerdings, dem HTML-Dokument eine passende Zeichenkodierung vorzugeben und Umlaute dann wie gewohnt zu schreiben).
- Das em-Element dient nicht dazu, Überschriften zu kennzeichnen. Es betont Textbausteine innerhalb eines Texts (Beispiel: "You cannot pass!"). In deinem Fall soll eine Erläuterung/Erklärung zu einem Textbaustein (Der Eiffelturm) erfolgen, wofür ein i-Element geeignet wäre.
<td>
<i>Der Eiffelturm</i> ist das Wahrzeichen von Paris.<br>
<!-- ... -->
- Das width-Attribut deines Bildes hat einen invaliden Wert. Erwartet wird eine Zahl, ohne irgendeine angehängte Einheitsangabe. Wenn du die Breite eines Bildes konkret mit einem prozentualen Wert definieren möchtest, benötigst du CSS (width-Property).