Tabelle mit 3 Bilder „sauber“ darstellen

Das ganze wollte ich über eine Tabelle machen,

Das ist nicht mehr zeitgmäß. Tabellen sollten nicht für Layouts missbraucht werden.

Muss keine Tabelle-Lösung sein, letztlich sollen die drei Bilder und die Beschreibungen nur „sauber „dargestellt werden (Bilder gleich groß, symetrisch, die ganze Seitenbreite einnehmen (also jedes Bild 1/3) …)

Das ist eher eine Frage für ein CSS-Forum.

Grundsätzlich solltest du das mit einem CSS Grid gut hinbekommen. Sinngemäß

<div class="meine-fotos">
  <div><img src="https://example.com/wp-content/uploads/bild1.jpg"></div>
  <div><img src="https://example.com/wp-content/uploads/bild2.jpg"></div>
  <div><img src="https://example.com/wp-content/uploads/bild3.jpg"></div>
</div>

.meine-fotos {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
}
.meine-fotos img {
  width: 100%;
  height: auto;
}

erstellt ein dreispaltiges Layout, in dem die Spalten die gleiche Breite zugewiesen bekommen. Die Bilder darin haben eine Breite von 100% und eine automatische Höhe zugewiesen bekommen.

Die wesentlich einfachere Lösung wäre, in Gutenberg mit Spalten zu arbeiten. Auch Shortcodes sind kaum noch zeitgemäß.

Hallo,

Am PC sieht es gut und korrekt aus, auf dem Handy werden die Spalten (mit den innenliegenden Bildern) aber untereinander angezeigt.

… das ist auch durchaus so gewollt, weil die Bilder ja sonst viel zu klein dargestellt werden und insofern kaum was zu erkennen ist.
Aber prinzipiell kann man das durch eine entsprechende CSS-Regel ändern.
Viele Grüße
Hans-Gerd

• Diese Antwort wurde geändert vor 3 Jahren, 6 Monaten von Hans-Gerd Gerhards.

Habe den css ( meine-fotos { …) von Bego versucht in meinem Theme unter „additional css“ hinzuzufügen, …

Das solltest du im Customizer unter „Zusätzliches CSS“ eintragen.
CSS-Regeln und HTML habe ich gerade geprüft – das funktioniert so, wie ich es mir vorgestellt habe. Hast du vielleicht wirklich nur meine-fotos { eingefügt – ohne den Punkt am Anfang?

Probier mal unter Design > Customizer > Erweiterte Optionen > Zusätzliches CSS:

.meine-fotos {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
}
.meine-fotos img {
  width: 96%;
  height: auto;
}

Wenn das noch auf Englisch angezeigt wird, solltest du mal unter Dashboard > Aktualisierungen die Sprachdateien updaten.

Ich wollte WP auf Englisch lassen …

Das hättest du ja mal früher erwähnen können.
Aber eigentlich logisch, dass ich in einem deutschsprachigen Support-Forum auch die deutschen Menübegriffe verwende, oder?

Den CSS mal bei csslint.net checken lassen:

Ja dann … 
Laut https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns ist das gültiger Syntax.

Vielleicht fragst du mal in einem CSS-Forum nach. Viel Erfolg.

Ich versuche gerade rauszufinden, was
grid-template-columns: repeat(3, 1fr);

Mehr als einen Link zu einer Dokumentation kann ich dir nicht anbieten. Wir können hier keine Grundlagen vermitteln und Fragen zu CSS sind hier off topic. Bitte wende dich an ein CSS-Forum.

Du möchtest doch gar keine Tabelle sondern hast die Tabelle verwendet, um ein Layout umzusetzen. Genau dafür sollen nach Richtlinie des W3C Tabellen aber nicht verwendet werden:

Table layout can be used to represent tabular relationships between data. […]

In a visual medium, CSS tables can also be used to achieve specific layouts. In this case, authors should not use table-related elements in the document language, but should apply the CSS to the relevant structural elements to achieve the desired layout.

Quelle: W3C

Was du nach deiner Beschreibung möchtest, ist ein mehrspaltiges Layout. Dazu habe ich dir empfohlen, in Gutenberg den Spalten-Block zu verwenden. Es ist gewünscht, dass die Spalten auf kleinen Displays umgebrochen werden, weil sonst der begleitenden Text („Meerblick vom Stellplatz“) unlesbar wird. Du willst doch sicher nicht, dass der Text als „Mee-rbl-ick-vom-Ste-llp-lat-z“ umgebrochen wird?

Da du dich damit nicht zufrieden gegeben hast, habe ich dir vorgeschlagen, eigene CSS-Regeln zu verwenden. Dazu habe ich dir ein Beispiel genannt, wie du das sinngemäß umsetzen kannst – lies bitte nochmal nach. Es ist nicht unser Ziel, hier CSS-Kenntnisse zu vermitteln und wir erstellen auch nicht auf Zuruf kostenlos irgendwelche fertigen Lösungen.

Die vorgeschlagenen Lösungen haben dir nicht zugesagt. Das ist OK. Ich verstehe nur nicht, was du sonst noch erwartest. Wie auch immer … Ich bin beim Thema raus.