Bilder tabellarisch anordnen?

5 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet
Niklas
22.12.2016, 09:59

Tach'chen,

bitte das <table>-Tag nicht für die Positionierung von Mediendateien nutzen, die sind nur für textbasierte Daten gedacht.

Ich empfehle dir, ein mehrspaltiges Layout zu entwerfen. Das kannst du komplett in einem HTML-Dokument erledigen, mittels des <style>-Tags, oder du setzt CSS ein, ganz wie du willst. Der Code bleibt der gleiche.

Das mehrspaltige Layout sollte so aufgebaut sein, dass du mehrere Container hast, die die Grafiken enthalten. Alle diese Container sind nochmal von einem Container umschlossen, der den eigentlichen Content-Bereich abgrenzt. 

Beide Elemente sind dann voneinander abhängig, aber du kannst alle Bilder zusammen anpassen &' hast eine zentrale Stellschraube.

Code-Beispiel I (HTML): 

<div class="spalten">
  <div class="left"><img src="grafik1" alt="alt-text" /></div>
  <div class="left"><img src="grafik2" alt="alt-text" /></div>
  <div class="left"><img src="grafik3" alt="alt-text" /></div>
  <div class="left"><img src="grafik4" alt="alt-text" /></div>
  <div class="left"><img src="grafik5" alt="alt-text" /></div>
</div>

Code-Beispiel II (CSS):

.spalten {
max-width: 1000px;
overflow: hidden;
}

.spalten .left {
display: inline-block;
width: 20%;
}

Das ganze Layout darf  maximal 1000px breit sein. Der Inhalt unter .spalten .left ist mit jeweils 20% definiert, alle 5 Bilder zusammen ergeben also 100% = 1000px. 

Dabei muss man zwar bedenken, dass der Platz fürs Margin oder Padding noch nicht einberechnet ist, aber den legst du dann einfach auf die 1000px drauf.

Beispiel: 

.spalten .left {
margin: 0 5px 0 5px; 
}
  • Das wären jeweils 5px links & rechts, bei fünf Bilder also 10x5px. D.h., dass die Hauptklasse .spalten 1050px breit sein müsste.

display: inline-block sorgt dafür, dass das Ganze anständig zentriert wird.

Ich hoffe, ich konnte helfen.

Beste Grüße,
Savix
Niklas  22.12.2016, 10:26

Sorry, ich habe etwas vergessen.

Ich empfehle dir, noch eine zusätzliche Angabe im Stylesheet zu definieren:

.spalten .left img {
width: 100%; 
}

Durch den Zusatz "img", definierst du alle Bilder und wie sie angezeigt werden sollen, unter der Klasse .spalten .left.


Unter .spalten. left sollte noch etwas verändert werden:

.spalten .left {
display: inline-block;
width: 19.68%;
}

Die Klasse .spalten kannst du noch um folgende Angabe ergänzen:

.spalten { 
margin: 0 auto 0 auto; 
}

Dadurch wird der gesamte Bereich zentriert dargestellt

So sieht es live aus: https://niklasfandrich.de/service/codebeispiele/mehrspaltiges-layout-mit-grafiken.php

Beste Grüße, 
Savix
threadi
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, Webseite
21.12.2016, 14:27

Tabellen sind hierfür das falsche Mittel da Bilder keine tabellarischen Informationen darstellen. Ein Beispiel für eine tabellarische Information wäre z.B. die Bundesliga-Tabelle.

Dein eigentliches Ziel ist, dass Du die Bilder in einer Art Schachbrett anordnen willst, mit 5 Bildern auch einer Zeile. Das kannst Du per CSS mit float oder display: flex erreichen. Beispiele findest Du hier:
https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Bilder_mit_Bildunterschriften#Der_Normalfall:_mehrere_Bilder_nebeneinander
https://www.mediaevent.de/tutorial/css-positionieren-float.html
Woher ich das weiß:Berufserfahrung – mit dem Internet verbunden seit 1993
MrMurphy
21.12.2016, 14:23

Hallo

Das table-Element ist nur für Tabellendaten gedacht. Bilder sind keine Tabellendaten.

Von daher sollten die Bilder jeweils von geeigneten Containern umschlossen werden, meist dem figure-Element.

Diese umschließenden Elemente bekommen unter Beachtung des Box-Modells eine Breite von 20%.

Die Anordnung der Bilder geschieht dann mittels Flexbox ( display: flex; ).

So kann bei schmaleren Bildschirmen die Anzahl der Bilder in einer Reihe auch problemlos verringert werden. 25% ergeben vier Bilder, 33.33% drei Bilder und so weiter.

Gruss

MrMurphy
Antropol
21.12.2016, 01:14

Die Tabelle über html und statt den Text in der Tabelle einfach Bilder einfügen.

wiki.selfhtml.org/wiki/HTML/Tabellen/Aufbau_einer_Tabelle

wiki.selfhtml.org/wiki/HTML/Multimedia_und_Grafiken/Grafiken
MAXVille71
21.12.2016, 01:13

du musst die Bilder in einen <img src="Hier kommt die URL rein" /> eingeben und dann kannst du den img tag in eine tabelle rein geben.