Verschobene Tabelle

[Frank lappel]

Hallo zusammen,

ich habe vor Urzeiten ein mal HTML programmieren gelernt, damals war DHTML noch angesagt.

Nun engagiere ich mich in einem gemeinnützigen Verein und kümmere mich um die Homepage. Ich habe eine Tabelle eingefügt die zur linken vier Bilder anzeigt und rechts davon, ebenfalls noch in der Tabelle ein iframe. In Chrome und Opera wird alles korrekt angezeigt, in Safari ist es nicht zentriert (halb so wild) aber in Firefox ist der linke Teil der Tabelle unterhalb des rechten.

<style>

    div.table {
      display: table;
      border-collapse:collapse;
    }
    div.tr {
      display:table-row;
    }
    div.td {
      display:table-cell;
      padding:5px;
    }
    section {
      display: flex;
    }
    .mittig {
  justify-content: center;
}
  </style>

<section class="mittig">
  <div class="table">
    <div class="tr">
      <div class="td"><img src=images/imago/bild1.jpg with="200px" height="100px" align="top"><br><br><br><br><img src=images/imago/bild2.jpg with="200px" height="100px" align="top"></div>
      <div class="td"><img src=images/imago/bild3.jpg with="200px" height="140px" align="top"><br><br><img src=images/imago/bild4.jpg with="200px" height="140px" align="top"></div>
      <div class="td"><iframe width="560" height="315" src="https://www.youtube.com/embed/qmN8sSC-yX8" frameborder="0" allowfullscreen></iframe></div>
    </div>
  </div>
</section>

Ich bin vollkommen ratlos wie ich dieses Problem beheben soll und würde mich sehr über Hilfe freuen.

Beste Grüße

P.S.: Warum schreibt man die breaks mittlerweile <br />