How to style - Tabellen (oder wie stelle ich Bilder neben einander)

Wir alle wohl kennen das Problem, man hat tolle Fotos gemacht, allerdings im Hochformat.Lädt man sie nun bei Blogger hoch und geht wie gewohnt auf x-large, passt die Größe mit den Querformaten nicht zusammen, oder die Fotos nehmen einfach zu viel Raum ein. Eine Möglichkeit ist nun, immer Collagen z.b. mit Photoscape zu erstellen, aber ab und zu will man einfach nur einzelne Fotos einbinden. Wie das schön, ordentlich und auch einfach geht zeige ich euch heute. 

Als erstes  h   i   e  r  klicken, dann seht ihr wie es im Endeffekt funktioniert (Ihr könnt alle Fotos einzeln anklicken).

1. Html-Teil zum Positionieren

<table>
 <tbody>
  <tr>
   <td width="310">
   </td>
   <td width="310">
   </td>
  </tr>
 </tbody> 
</table> 

table und tbody geben hierbei an dass es sich um eine Tabelle handelt. 

tr ist die table row, also in unserem Fall die Zeile.

td beschreibt jeweils sozusagen ein Tabellenkästchen. Also in der Zeile die erste Spalte = 1. td-container, zweite Spalte = 2.container und so weiter. 

Wie ihr sehen könnt, ist bei td noch width, also die Breite angegeben. Bei mir sind das 310 px, da meine Postbreite 640px beträgt und ich zwei Fotos nebeneinander stellen möchte und außerdem die Tabelle einen automatischen 'Zwischenabstand' (Padding) besitzt. Für eure Größe also:

Postbreite : Anzahl der Fotos nebeneinander - 10px = width

2. Tabelle mit Inhalt füllen 

Wenn ihr jetzt das Grundgestell habt, geht es an das 'Befüllen' der Tabellenkästchen.
Ladet ihr ein beliebiges Foto hier hoch sehen wir immer einen ganzschön langen code, der das Bild beschreibt, dieser sieht ungefähr so aus:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGIx_GGwGgqnAhu8WP7Qf4Xj3JX4gcGB05R7RG91si-aMUlMOuU0ijdZBZOuog1qT7EMhgJ5gvMRMNPHPuNIIONgkRW5WMcZGAFrIhnYhpF_A3oR78RGKO4TQiX0CCbNW75Lu3GeHEJbM/s1600/instagram1.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGIx_GGwGgqnAhu8WP7Qf4Xj3JX4gcGB05R7RG91si-aMUlMOuU0ijdZBZOuog1qT7EMhgJ5gvMRMNPHPuNIIONgkRW5WMcZGAFrIhnYhpF_A3oR78RGKO4TQiX0CCbNW75Lu3GeHEJbM/s200/instagram1.jpg" width="320" /></a>

Wie ihr seht, ist das Bild also immer in einer Mischung aus einem Link <a> und dem wirklichen Bild <img>. Jetzt ist es wichtig, dass ihr genau diesen ganzen Teil vor dem </td> einfügt.

Wenn ihr wollt könnt ihr zwischendurch immer mal auf Vorschau gehen, jetzt werdet ihr aber bemerken, dass noch nicht das ganze Foto zu sehen ist, das können wir aber sehr leicht ändern. Oben in dem Bildcode habe ich es schon markiert. Wichtig ist, dass ihr hier ebenfalls die gewünschte Breite festlegt. Also die, die wir oben auch genommen haben, wenn bei euch irgendwo noch height="xyz" zu finden ist löscht ihr das, sonst wird euer Foto sehr verzerrt. Keine Sorge die Höhe berechnet sich automatisch neu, da müssen wir nicht tun.

Unsere fertige Tabelle sieht also wie folgt aus, wie immer natürlich alles im html Modus eingeben:

<table>
 <tbody>
  <tr>
   <td width="310">
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGIx_GGwGgqnAhu8WP7Qf4Xj3JX4gcGB05R7RG91si-aMUlMOuU0ijdZBZOuog1qT7EMhgJ5gvMRMNPHPuNIIONgkRW5WMcZGAFrIhnYhpF_A3oR78RGKO4TQiX0CCbNW75Lu3GeHEJbM/s1600/instagram1.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGIx_GGwGgqnAhu8WP7Qf4Xj3JX4gcGB05R7RG91si-aMUlMOuU0ijdZBZOuog1qT7EMhgJ5gvMRMNPHPuNIIONgkRW5WMcZGAFrIhnYhpF_A3oR78RGKO4TQiX0CCbNW75Lu3GeHEJbM/s200/instagram1.jpg" width="310" /></a>
   </td>
   <td width="310">
     <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGu2G5TfiH31iWZ6TDc_1ZAO66Tbs-XE1rYyrc59jX2uSC1Z3AmpGxwvieUhPDl2FF2SPm4ooSkcaJNM5cOYlhSUa3kU5J-C6rLd14veWI0VA6eaoSTajQNFosHksazc8GvCrbpfpyTSs/s1600/instagram4.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGu2G5TfiH31iWZ6TDc_1ZAO66Tbs-XE1rYyrc59jX2uSC1Z3AmpGxwvieUhPDl2FF2SPm4ooSkcaJNM5cOYlhSUa3kU5J-C6rLd14veWI0VA6eaoSTajQNFosHksazc8GvCrbpfpyTSs/s200/instagram4.jpg" width="310" /></a>
   </td>
  </tr>
 </tbody> 
</table> 

Und so sieht das ganze dann aus:

Ich hoffe das Tutorial war halbwegs verständlich, wenn noch etwas unklar sein sollte, meldet euch einfach in den Kommentaren. Wie immer ist das auch nur meine Möglichkeit, wahrscheinich gibt es auch eine sehr viele schönere Variante aber diese kenne ich nicht.