Schreibweise beim td-tag

[Bennie]

Hallo allerseits,

bin Anfänger und beschäftige mich gerade mit dem Thema "übersichtlicher Quellcode", "Einrücken", etc.. Habe nun sehr viel gelesen und Unmengen Quelltexte angeschaut und während bei <table> und <tr> es meist so gehandhabt wird, dass der End-Tag in einer neuen Zeile steht, ist es beim td-Tag verbreitet, dass der in derselben Zeile wie der Anfangs-Tag steht.

Was macht den Unterschied zwischen diesen beiden Praktiken aus?
Gibt es Nachteile? Vorteile?

Beispiel 1:

<table>
  <tr>
    <td>Text in Zelle 1</td>
    <td>Text in Zelle 2</td>
  </tr>
</table>

Beispiel 2:

<table>
  <tr>
    <td>
        Text in Zelle 1
    </td>
    <td>
        Text in Zelle 2
    </td>
  </tr>
</table>

Im Grunde finde ich Beispiel 2 übersichtlicher, vor allem wenn nicht nur ein kurzer Text drin steht, weil man sofort sieht, ob man den Endt-Tag korrekt gesetzt hat.

Würde mich über Eure Hilfe freuen, denn ich möchte mir gleich von Anfang an das Sinnvollste angewöhnen. :-)

Danke und Servus
Bennie

[levu]

Hallo,

Wenn man per JS den Inhalt des Tags ausliest, is dor kein Whitespace, und auch im Browser nicht (variante1) im gegensatz zu variante 2

mfg, Flo

[Bennie]

Hallo Flo,

danke erst mal für Deine Antwort. Wie gesagt, bin blutiger Anfänger!!
Was heisst das für die Praxis: kein Whitespace. (?)

Gibt es bei Beispiel 2 Nachteile bei der Darstellung im Browser?
(Habe allerdings dieses Beispiel auch in einigen Tutorials für übersichtlichen Quellcode gesehen.)

Servus
Bennie

[Vinzenz Mai]

Hallo,

Was heisst das für die Praxis: kein Whitespace. (?)
Gibt es bei Beispiel 2 Nachteile bei der Darstellung im Browser?

ja. Insbesondere in einem weitverbreiteten Browser. Das Problem hast es sogar zu einer FAQ dieses Forums geschafft.

Freundliche Grüße

Vinzenz

[Bennie]

Hi Vinzenz,

da ist immer von Grafiken/Bildern die Rede und dem img-Tag.

Noch 3 Fragen:

1. Wie ist es bei Text?

2. Ich dachte Leerzeichen und Zeilenumbrüche im Quelltext werden im Browser nicht dargestellt und können daher zur Übersichtlichkeit des Codes verwendet werden. Tritt das Verhalten nur bei Inline-Tags auf?

3. Dann geben ja jede Menge Bücher und HTML-Tutorials eine falsche Empfehlung, was die übersichtlichen Quellcode und Zeilenumbrüche angeht.
Folgerung: Beim td-Tag DARF auf keinen Fall KEIN ZEILENUMBRUCH SEIN??

Danke!
Servus
Bennie

[Der Martin]

Hallo,

2. Ich dachte Leerzeichen und Zeilenumbrüche im Quelltext werden im Browser nicht dargestellt

das hast du wohl missverstanden. Es ist vielmehr so, dass ein Zusammentreffen von *mehreren* Whitespace-Zeichen (Blank, Zeilenumbruch, Tab, etc.) wie *ein einziges* Leerzeichen behandelt wird.

und können daher zur Übersichtlichkeit des Codes verwendet werden.

Können sie auch. Überall da, wo *ein* Leerzeichen dich nicht stört, kannst du zur Strukturierung des Quellcodes auch ein Dutzend setzen, wenn dir danach ist. Es ändert nichts am Ergebnis.

3. Dann geben ja jede Menge Bücher und HTML-Tutorials eine falsche Empfehlung, was die übersichtlichen Quellcode und Zeilenumbrüche angeht.
   Folgerung: Beim td-Tag DARF auf keinen Fall KEIN ZEILENUMBRUCH SEIN??

Falsch. Der Effekt wäre nur der, dass als erstes und als letztes Zeichen in der Zelle ein Leerzeichen steht. Meistens stört das nicht.

So long,
 Martin

[Bennie]

Hi Martin,

wenn ich aber in einem längeren Text (der zwischen <td> und <font> oder <span> steht) Zeilenumbrüche habe, damit es für mich im Quelltext leserlicher ist, kann ich in der Darstellung im Browser kein zusätzliches Leerzeichen entdecken. Müsste aber demnach doch eines da sein und würde schon stören.

Servus
Bennie

[levu]

Hallo,

wenn ich aber in einem längeren Text (der zwischen <td> und <font> oder <span> steht) Zeilenumbrüche habe, damit es für mich im Quelltext leserlicher ist, kann ich in der Darstellung im Browser kein zusätzliches Leerzeichen entdecken.

wieso zusätzlich? die werden zu einem zusammengefasst

mfg, Flo

[Bennie]

wieso zusätzlich? die werden zu einem zusammengefasst»»

Verstehe. Bei Text spielt es also keine Rolle. Wenn da steht "das Auto" und ich setze nach "das" einen Zeilenumbruch, der 1 Leerzeichen schafft, wird das bereits vorhandene und das vom Zeilenumbruch verursachte zu 1 Leerzeichen zusammengefasst. Richtig so?

Bei Bildern liegt es anders. Da ist u.U. kein Leerzeichen vorhanden und auch keines gewünscht und dann kommt es beim Zeilenumbruch zu diesem Effekt.

Stimmt es aber, dass bei Block-Elementen durch einen Zeilenumbruch kein Leerzeichen/Whitespace verursacht wird?

Letzte Frage:

Verzichtet Ihr beim Schreiben Eures Quelltextes grundsätzlich auf

• Einrücken
• Zeilenumbrüche
• Leerzeilen
  als Mittel, den Quelltext übersichtlicher zu machen, um Whitespace zu vermeiden?

Danke für Eure Hilfe und auch die Links!
Gar nicht so leicht, das alles zu lernen, aber ich möchte gleich richtig dran gehen. :-)

Servus
Bennie

[Vinzenz Mai]

Hallo,

Stimmt es aber, dass bei Block-Elementen durch einen Zeilenumbruch kein Leerzeichen/Whitespace verursacht wird?

doch, sicher. Ein Zeilenumbruch *ist* ein Whitespace. Der erwähnte Effekt gibt es auch bei

<p>  
    <img ....>  
</p>  

Letzte Frage:

Optimist :-)

Verzichtet Ihr beim Schreiben Eures Quelltextes grundsätzlich auf

• Einrücken
• Zeilenumbrüche
• Leerzeilen
  als Mittel, den Quelltext übersichtlicher zu machen, um Whitespace zu vermeiden?

Nein, selbstverständlich nutze ich grundsätzlich

- Einrücken,
  - Zeilenumbrüche,
  - Leerzeilen,

als Mittel, um meinen Quelltext übersichtlicher zu machen. Auch bei HTML. Quellcode ohne die von Dir genannten Mittel ist für mich Quälcode, siehe zum Beispiel diesen knuffeligen Archivthread.

Freundliche Grüße

Vinzenz

[Bennie]

Hallo,

danke Dir, Vinenz!

Letzte Frage:

Optimist :-)

:-)))
Bis zum nächsten Mal! ;-)

Servus
Bennie

[Peter Lüstig]

Tach,

Was macht den Unterschied zwischen diesen beiden Praktiken aus?
Gibt es Nachteile? Vorteile?

Kein Unterschied!
Ich denke, jeder von uns hat als Anfänger mit der Variante 2 gearbeitet, aber irgendwann hast du den Blick (überblick) dafür, und man steigt auf Variante 1 um. Bei Codes mit 1000, 2000 Zeilen, ist Variante 1 die bessere.

Beispiel 1:

<table>
  <tr>
    <td>Text in Zelle 1</td>
    <td>Text in Zelle 2</td>
  </tr>
</table>

Beispiel 2:

<table>
  <tr>
    <td>
        Text in Zelle 1
    </td>
    <td>
        Text in Zelle 2
    </td>
  </tr>
</table>

Beispiel 3:

<table>
 <tr><td>Text in Zelle 1</td></tr>
 <tr>
   <td>Text in Zelle 2
   </td></tr></table>

Geht auch!
Der Interpreter (?) der Browsers, arbeitet sich von Oben nach Unten duch den Code durch, je weniger Zeilen, desto schneller wird die Seite verarbeitet.
Bei einem 100-Zeiler merkt man kein Unterschied, aber wie schon gesagt, bei >2000 Zeilen (und Komplexität), kann es je nach Verbindung einige Milli-Sek. oder Sek. (?) rausspringen.

[Bennie]

Tach, Peter.
Du sagst nun: Kein Unterschied!

Was macht den Unterschied zwischen diesen beiden Praktiken aus?
Gibt es Nachteile? Vorteile?

Kein Unterschied!
Ich denke, jeder von uns hat als Anfänger mit der Variante 2 gearbeitet, »»

Levu und Vinzenz meinen, es führt zu falschen Darstellungen im Browser.

Bin verwirrt. Wie ist es nun??

Servus
Bennie

[Vinzenz Mai]

Hallo,

Was macht den Unterschied zwischen diesen beiden Praktiken aus?
Gibt es Nachteile? Vorteile?

Kein Unterschied!
Ich denke, jeder von uns hat als Anfänger mit der Variante 2 gearbeitet, »»

Levu und Vinzenz meinen, es führt zu falschen Darstellungen im Browser.

in Browsern, insbesondere gibt es einen Spezialeffekt in einem Browser, der immer noch den größten Marktanteil hat.

Bin verwirrt. Wie ist es nun??

Es gibt Unterschiede. Der Unterschied liegt im zusätzlichen Whitespace, den Du hast. Dieser kann zu unerwünschter Darstellung führen.

Die von mir verlinkten FAQ verweist auf weitere Seiten, wo Du nachvollziehbaren Code findest. Wenn dieser Whitespace nicht gewünscht ist, dann hilft nur Verzicht auf Variante 2.

Ich verlinke Dir gerne einen Archivthread, aus dem Du entnehmen kannst, wie Du dennoch übersichtlichen Code schreiben kannst.

Freundliche Grüße

Vinzenz

[suit]

Der Interpreter (?) der Browsers, arbeitet sich von Oben nach Unten duch den Code durch, je weniger Zeilen, desto schneller wird die Seite verarbeitet.

sag das einem xml-parser, den interessiert das einen feuchten kehricht

er verarbeitet das dokument von "aussen nach innen" (wohlgeformtheit vorausgesetzt, wenn ein fehler beim lesen von "oben nach unten" auftritt, stellts ihm die patschen auf) ob da nun zeilenumbrüche sind oder nicht ist eigentlich egal - knoten ist knoten

aber unnötige umbrüche oder leerzeichen mache das ding in der tat langsamer, da ein whitespace als textknoten gewertet wird (die javascript-engine des internet explorer übrigens nicht)

Bei einem 100-Zeiler merkt man kein Unterschied, aber wie schon gesagt, bei >2000 Zeilen (und Komplexität), kann es je nach Verbindung einige Milli-Sek. oder Sek. (?) rausspringen.

dürfte vernachlässigbar sein :)