Tabelle, Rahmenbreite mit Dreamweaver

[Hofkay]

Hallo, ich bin gerade etwas am Basteln und bin auf ein Problem gestoßen, wo ich einfach nicht
weiter weiß.
Ich habe mit Dreamweaver eine Tabelle erstellt, in der 16 Bilder eingefügt sind.
Die Bilder sollen sowohl in der Senkrechten wie in der Wagerechten den selben Abstand haben.
Im Dreamweaver wird dies auch korrekt angezeigt, aber im Browser ist der Abstand in der Wagerechten
breiter als in der Senkrechten.

Bzgl. Code würde ich mich als gerade eingestiegener Einsteiger bezeichnen. Bin also schon etwas auf
die Möglichkeiten angewiesen, die der Dreamweaver für diesen Fall bietet.

Schonmal Danke dem, der sich der Sache annimmt ;-)

Dreamweaver:

Browser:

<!--  Gesamter Inhalt  -->
<div style="z-index: inherit; width:1200px; margin:0px auto; text-align:left">
  <table width="962" border="0" align="center" cellpadding="2" cellspacing="1">
    <tr>
      <td height="18" colspan="2">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
      <td width="294" height="126"><img src="Pic_01.jpg" width="294" height="192" alt=""/></td>
      <td width="294"><img src="Pic_01.jpg" width="294" height="192" alt=""/></td>
      <td width="294"><img src="Pic_01.jpg" width="294" height="192" alt=""/></td>
      <td width="59"><img src="Pic_01.jpg" width="294" height="192" alt=""/></td>
    </tr>
    <tr>
      <td height="127"><img src="Pic_01.jpg" width="294" height="192" alt=""/></td>
      <td height="127"><img src="Pic_01.jpg" width="294" height="192" alt=""/></td>
      <td height="127"><img src="Pic_01.jpg" width="294" height="192" alt=""/></td>
      <td height="127"><img src="Pic_01.jpg" width="294" height="192" alt=""/></td>
    </tr>
    <tr>
      <td height="150"><img src="Pic_01.jpg" width="294" height="192" alt=""/></td>
      <td height="150"><img src="Pic_01.jpg" width="294" height="192" alt=""/></td>
      <td height="150"><img src="Pic_01.jpg" width="294" height="192" alt=""/></td>
      <td height="150"><img src="Pic_01.jpg" width="294" height="192" alt=""/></td>
    </tr>
    <tr>
      <td height="137"><img src="Pic_01.jpg" width="294" height="192" alt=""/></td>
      <td height="137"><img src="Pic_01.jpg" width="294" height="192" alt=""/></td>
      <td height="137"><img src="Pic_01.jpg" width="294" height="192" alt=""/></td>
      <td height="137"><img src="Pic_01.jpg" width="294" height="192" alt=""/></td>
    </tr>
  </table>
</div>
<div align="center">
  <div align="left"></div>
</div>
<blockquote>&nbsp;</blockquote>
</body></html>

 

[MrMurphy]

Hallo

Du unterliegst leider einigen grundlegenden Irrtümern.

Zunächst ist Dreamweaver ein Profi-Editor. Um ihn benutzen zu können muss sich der Anwender schon gut bis sehr gut in aktuellem HTML und CSS auskennen.

Dreamweaver erzeugt auch absolut sauberen Quellcode - dafür muss man natürlich mit ihm umgehen können.

Dreamweaver ist kein Ersatz für fehlende HTML- und CSS-Kenntnisse. Es hat sehr viele Möglichkeiten, dadurch aber auch für Personen, die nicht die Anwendung von Dreamweaver gelernt haben, viele Fehlermöglichkeiten.

Dreamweaver ist schon gar kein Programm um sich Webseiten zusammenzuklicken. Das geht schief. Solche Personen machen häufig anschließend Dreamweaver vollkommen unsinnig und sachlich falsch nieder, weil sie nicht erkennen können, dass die Probleme an ihrem fehlenden Wissen liegen.

Dreamweaver macht genau wie jeder andere Editor genau das, was die Webseitenersteller (in diesem Fall du) ihm sagen / tippen / klicken.

Die Verantwortung der Webseite liegt bei dir.

Dreamweaver hat nur eine rudimentäre Vorschaufunktion. Webseiten sollten immer in aktuellen Browsern (nicht nur einem) getestet werden. Das schreibt Dreamweaver selbst in seiner Anleitung. Da die ständige praktische Kontrolle in den unterschiedlichen Browsern ein wichtiger Schritt bei der Erstellung von Webseiten ist, wird er von Dreamweaver unterstützt. So können mehrere Browser so eingebunden werden, dass sie "auf Tastendruck" den grade aktuellen Quelltext anzeigen.

Von daher schreibt Dreamweaver selbst ausdrücklich in dem Sinn: Entscheidend sind die Browserdarstellungen.

Wenn du deine Webseite immer nur in einem Browser testest baust du dir wahrscheinlich Fehler ein, die später nur schwer zu reparieren sind. Das gilt grade für Anfänger.

Weiterhin hast du dich für die Anwendung des table-Elements entschlossen. Nicht Dreamweaver, diese Entscheidung kann Dreamweaver gar nicht treffen.

Das table-Element ist aber ausschließlich zur Darstellung von Tabellendaten gedacht. Bilder seid aber keine Tabellendaten.

Damit Tabellendaten optimal angezeigt werden, führen das table-Element und seine speziellen Kindelemente (tr, th, td und so weiter) ein gewisses Eigenleben, das nur schwierig einzudämmen und zu kontrollieren ist. table-Elemente verhalten sich häufig anders als andere Container wie header, main, footer, article und so weiter.

Du kannst zwar die Breite von Tabellenspalten bestimmen, allerdings bleibt die Grundlage trotzdem falsch.

Wenn du die Breite von Tabellenspalten bestimmst sollten die Angaben naürlich auch zueinander und zum Inhalt passen.

In eine Spalte mit einer vorgegebenen Breite von 57 ein Bild mit einer Breite von 294 hineinzuqutschen führt regelmäßig zu Problemen. In einer Tabelle erwarten die Browser Tabellendaten, die entsprechend vollständig und in voller Größe angezeigt werden sollen.

Es gibt zwar den Mythos das Dreamweaver selbsttätig Fehler behebt (häufig sogar ungewollt und falsch) und damit am Quelltext herumpfuscht. Das stimmt aber nicht.

Solche Fehler / Probleme zu vermeiden ist wie bei jedem anderen Editor die Aufgabe des Webseitenerstellers.

Statt einer Tabelle solltest du im Endeffekt besser das figure-Element verwenden.

Zum Erstellen einer Webseite gehört zudem Bilder und Grafiken so vorzubereiten, dass sie nicht größer sind als sie maximal angezeigt werden sollen. Und bei Galerien, dass sie ein einheitliches Verhältnis und eine einheitliche Größe haben. Das CSS ist nicht dazu gedacht unterschiedliche Bilder einheitlich anzuzeigen. Dabei ist zwar einiges möglich, in der Praxis kommt aber meist Pfusch heraus, an dem sich die Browser verschlucken.

Gruss

MrMurphy

 

[SpiceLab]

Zum Handling in DW und den Umgang mit Tabellen, hat sich MrMurphy zur Genüge ausgelassen.

Also gehe ich auf die Problematik und ihre praktische Lösung ein.

Der größere vertikale Abstand zwischen den Tabellenzeilen lässt sich per CSS korrigieren, indem das Inline-Element <img> als Block-Element formatiert wird, und der Browser so nicht mehr Whitespaces interpretiert, die die Lücke im Textfluß (Tabellengerüst) erzeugen:

td img {display:block}

 

[Hofkay]

@MrMurphy, danke für den ausführlichen Beitrag. Was ich hier als Bsp. gezeigt habe hat eigentlich nichts mit
dem zu tun was es später mal sein soll. Mir ging es erst mal nur um den Abstand. Ich glaube je mehr ich hier
schreibe, um so verworrener wird es.
Unterm Strich, sollte ich mir wahrscheinlich aber doch erst mal diverse Workshops reinziehen.

Davon abgesehen, natürlich habe ich die Seite mit Firefox u. IExplorer getesten. Gleiches Ergebniss.

@SpiceLab, ebenfalls danke. Ich werde es mal probieren.