Fieterich: Skalierbare Bilder in Tabellen

Hallo,

ich habe hier in einer Dokumentation immer das folgende Problem:

Meine Vorgänger haben an vielen Stellen links ein Bild gezeigt und rechts davon mit Text beschrieben, also innerhalb einer Tabelle. Im Code sieht das wie folgt aus:

    <table border="0" cellpadding="3" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
      <tr>
        <td width="494" valign="top">
        <img border="0" src="BILD.png" width="494" height="180"></td>
        <td valign="top"><p class="absatz_eng">Blablabla ...</p></td>
      </tr>
    </table>

Diese Bilder sollen sich automatisch anpassen, wenn die Tabelle bzw. der Viewport verkleinert wird. Mir ist schon klar, dass Tabellen dazu vielleicht nicht unbedingt geeignet sind, aber es sind an die 500 Dateien mit x-mal dieser Konstellation. Mir geht es also gerade eher um eine schnelle Lösung. Allerdings sind mir Alternativen auch willkommen.

  1. Hallo,

    links ein Bild gezeigt und rechts davon mit Text beschrieben, also innerhalb einer Tabelle. Diese Bilder sollen sich automatisch anpassen, wenn die Tabelle bzw. der Viewport verkleinert wird.

    Prozentuale Breiten bei den Bildern, evtl max-width beim Text, ansonsten media queries

    Mir ist schon klar, dass Tabellen dazu vielleicht nicht unbedingt geeignet sind, ...

    Perfekt, dann nimm das figure-Element

    Tutorial:Bilder_mit_Bildunterschriften

    aber es sind an die 500 Dateien mit x-mal dieser Konstellation. Mir geht es also gerade eher um eine schnelle Lösung.

    Alle Dateien im Notepad++ öffnen und mit "Suche und Ersetzen" in allen Dokumenten ändern.

    Das dauert trotz allem ein büschen, aber dann isses gemacht.

    Groß Jo

    Folgende Beiträge verweisen auf diesen Beitrag:

  2. Folgende Beiträge verweisen auf diesen Beitrag:

  3. Hallo Fieterich,

    empfohlen wäre ein Totalumbau, wie @@Harker und @@Aspel bereits erwähnten; ist auf lange Sicht besser.

    Wenn Du unbedingt bei dem Tabellenlayout beleiben willst, entferne alle width/height-Attribute und benutze CSS, etwa so:

    img{width:100%;}
    table{width:100%}
    td{width:50%;}
    

    Aber nur dann!

    Gruß, Martl

    1. Danke für die schnellen Antworten. Ja, ein Totalumbau in 2017 steht an (auch vom Layout her), da werden wir noch was zu tun haben. Tausend Dank!

      Gruß

      Fieterich