Wie kann ich Bilder pixelgenau positionieren?

Question

Lieber Online Support,

in meiner Studie möchte ich zufällig gezogene Stimuluspaare zeigen. Diese sollen in unterschiedlichen Distanzen voneinander gezeigt werden. Die Distanzen sollen früheren Studien entsprechen.

Um dies zu verwirklichen, habe ich eine HTML-Tabelle (insgesamt 746px breit) angelegt, in der ich die Stimuli je nach Trial positionieren wollte. Für einen Trial, in dem die Stimuli mittig in 12 px Abstand angezeigt werden sollen, sieht mein Code bspw. wie folgt aus:

  <table style="border:1px solid black;">
  <!-- to arrange stimuli; margins: datasheet DistancesStimuli -->
  <colgroup>              <!-- define width of the 5 columns -->
    <col width="317px">   <!--column 1 = left margin to left stimulus-->
    <col width="50px">    <!--column 2 = first stimulus-->
    <col width="12px">    <!--column 3 = margin between stimuli-->
    <col width="50px">    <!--column 4 = second stimulus-->
    <col width="317px">   <!--column 5 = right margin to right stimulus-->
  </colgroup>
    <tr style="height: 80px;"><!-- placeholder row above -->
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr> 
    <tr style="height: 100px;">     
        <td></td>
        <td style = "vertical-align: middle;"> 
                <img src="'.$stimulus[2].'.png" width = "50px" 
                         height = "auto" alt="Person A">
        </td>
        <td></td>
        <td style = "vertical-align: middle;">
            <img src="'.$stimulus[3].'.png" width = "50px" 
                      height = "auto" alt="Person B">
        </td>
        <td></td>
    </tr>
    <tr style="height: 80px;"><!-- placeholder row below -->
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    </table>

Leider stimmen die Abstände aber nicht genau. Meine laienhafte Erklärung ist, dass automatisch Platz für die Zellenränder hinzufügt, und/oder padding eingefügt wird. Das sehe ich vor allem dann, wenn eigentlich gar kein Abstand zwischen den Stimuli sein sollte.

Wie kann ich also Bilder auf den Pixel genau positionieren?

Vielen herzlichen Dank im Voraus für die Hilfe!
MfG
Eileen Pauels

Answer 1

Die Positionierung mit Tabellen hat viele Nachteile, v.a. was Usability und das Ausfüllen auf Mobilgeräen angeht (was Sie mit einer Frage vom Typ "Gerät und übermittelte Variablen" unbedingt kontrollieren sollten). Aber in Ihrem Fall sind Sie ja oahnehin auf ein sehr statisches Layout angewiesen.

Damit Tabellen die vorgegeben Breiten exakt einhalten, ergänzen Sie im <table>-Tag bitte noch die CSS-Anweisung table-layout: fixed.

<table style="border:1px solid black; table-layout: fixed;">

Wenn es dann noch nicht zu 100% passt, können Sie die Details mit dem "Inspektor" - zu finden bei den Entwickler-Tools Ihres Browsers - überprüfen.