Alternativen zu Tabellen

[Christian Heinze]

Im html-Tutorium zu Alternativen für Tabellen heißt es mit Bezug auf den Vorschlag, div mit display zu verwenden:

"Die jeweiligen Klassen erhalten mit Hilfe von display Eigenschaften, durch die sich die Elemente, denen sie zugewiesen werden, wie die entsprechenden HTML-Elemente für Tabellen verhalten."

Das Tutorial bietet als Beispiel eine Tabelle mit Reihen "tr" und mehreren Spalten "td" an. In dem Beispiel stehen die td-Elemente jedoch untereinander, während sie in einer table zwischen "<tr> und </tr>" nebeneinander stehen.

Ich frage mich, wie zu erreichen ist, dass die td-Elemente auch mit Hilfe von div und display nebeneinander stehen ?

[Matthias Apsel]

Hallo Christian Heinze,

Ich frage mich, wie zu erreichen ist, dass die td-Elemente auch mit Hilfe von div und display nebeneinander stehen ?

Wenn sich die td-Elemente „ganz normal“ verhalten sollen, besteht überhaupt keine Veranlassung irgendwelche div-Elemente zu missbrauchen.

Die grundsätzliche Frage lautet: Hast du tabellarische Daten, dann verwende eine Tabelle. Hast du keine tabellarischen Daten, dann verwende geeignete Elemente und geeignete CSS-Werkzeuge.

Dies Antwort kann leider nur so allgemein sein, da wir den konkreten Anwendungsfall nicht kennen.

Bis demnächst
Matthias

[Christian Heinze]

Vielen Dank für die rasche Antwort ! Ich möchte Dich nicht über die Maßen beanspruchen. Nur dieses zur Erläuterung meiner Anfrage: Was ich suche ist ein css-Werkzeug, das eine mehrspaltige Tabelle für Textinhalte schafft (für meine honmepage, zB https://pro-re-publica.de/abcWortSachReg.php). Habe bisher Tabellen benutzt, das wird aber gerügt, weil es eben keine tabellarischen Daten sind. Ich dachte, das folgende, was ich im Tutorial fand, sei ein geeignetes "css-Werkzeug". Es "funktioniert" auch, aber die td-Elmenente stehen untereinander, während ich sie nebeneinander brauche.

div.table { display: table; border-collapse:collapse; } div.tr { display:table-row; } div.td { display:table-cell; border:thin solid red; padding:5px; }

</style>

<div class="table"> <div class="tr"> <div class="td">ich</div> <div class="td">bin</div> <div class="td">eine</div> <div class="td">Tabelle</div> </div> </div>

[Matthias Scharwies]

Servus!

Vielen Dank für die rasche Antwort ! Ich möchte Dich nicht über die Maßen beanspruchen. Nur dieses zur Erläuterung meiner Anfrage: Was ich suche ist ein css-Werkzeug, das eine mehrspaltige Tabelle für Textinhalte schafft (für meine honmepage, zB pro-re-publica.de/abcWortSachReg.php).

Das was du da hast, ist aber keine Tabelle mit tabellarischen Daten.

IM Tutorial gibt es ein Beispiel zu Definitionlisten.

Zum Grundverständnis hilft vielleicht: HTML/Tutorials/responsive_Webdesign/bestehende_Webseiten_umbauen

Auf deiner Seite fehlt z.B eine Überschrift. Auch die einzelnen Buchstaben könntest Du als Überschrift (zweiter Ordnung) auszeichnen.

Herzliche Grüße

Matthias Scharwies

[Felix Riesterer]

Lieber Christian,

zB pro-re-publica.de/abcWortSachReg.php

Du hast eine Liste, nämlich die Buchstaben von A-Z. Eine Liste ist eine Liste ist eine Liste. Eine geordnete in Deinem Fall.

<ol>
  <li>...</li>
  <li>...</li>
</ol>

Mit CSS kann man dafür sorgen, dass diese Liste alphabetisch nummeriert wird.

In Deinen Listenpunkten hast Du ein Stichwort und einen zugehörigen Text. Das kann man sehr wohl als tabellarische Daten sehen. Man kann es aber auch als eine Definitionsliste sehen. Wählen wir spaßeshalber letztere:

<ol>
  <li>
    <dl>
      <dt>Abwägung</dt>
      <dd><a href="#">Abwägung</a> als Prinzip demokratischer Willensbildung </dd>
      <dt>Agnostik (wenig gebräuchlich), Agnostizismus</dt>
      <dd>Die Wissenschaft von der begrenzten ...</dd>
      ...
    </dl>
  </li>
  <li>
      <dt>Begriff</dt>
      <dd>
        Ein Begriff ist
        <ol>
          <li>eine Summe von ...</li>
          <li>der Wortname, ...</li>
        </ol>
        Als Begriffsmerkmale ...
      </dd>
  </li>
  ...
</ol>

Wenn Du ein solches Markup hast, können wir darüber reden, wie wir es so gestalten, dass Du ein sehr ähnliches Ergebnis erhältst, wie es jetzt gerade mit der Tabelle realisiert wird.

Liebe Grüße

Felix Riesterer

[Christian Heinze]

Hallo Felix,

vielen Dank für die Antwort. Habs zwar schon versucht, bin dran gescheitert dass ich keine rows zusande bringe. Werde dem aber nochmal nachgehen !

c. Heinze

[Matthias Scharwies]

Servus!

Hallo Felix,

vielen Dank für die Antwort. Habs zwar schon versucht, bin dran gescheitert dass ich keine rows zusande bringe. Werde dem aber nochmal nachgehen !

Bitte löse dich von den Tabellenbegriffen. @Felix Riesterer hat dir das passende HTML gezeigt. Ich hätte bei jedem Buchstaben eine neue Liste angefangen.

Zur Formatierung könntest du dies nehmen: HTML/Tutorials/Schreib-_und_Gestaltungsregeln_für_Webseiten#Beispiel_im_Grid_Layout

dl { 
  display: grid; 
  grid-template-columns: 1fr 100%; 
}
dl dd { 
  margin: 0; 
  padding-left: 1em; 
  margin-bottom: 1em;
}

Herzliche Grüße

Matthias Scharwies

[Felix Riesterer]

Lieber Matthias,

Bitte löse dich von den Tabellenbegriffen.

es ist ein Wörterbuch mit genau zwei Spalten: Stichwort und Erläuterung. Das darf durchaus eine Tabelle sein. Ich fände zwar eine Definitionsliste das native Element dafür, aber gut.

dl { 
  display: grid; 
  grid-template-columns: 1fr 100%; 
}
dl dd { 
  margin: 0; 
  padding-left: 1em; 
  margin-bottom: 1em;
}

Ich habe da mal etwas versucht. Leider zerhaut es mir dabei das Layout, wenn im <dd> noch ein <ol> steht. Außerdem habe ich keine Ahnung, wie ich die Buchstaben der Nummerierung zentriert in eine eigene Zeile bekomme. Da müsste noch jemand mit mehr Sachverstand aushelfen.

Liebe Grüße

Felix Riesterer

[Matthias Apsel]

Hallo Felix Riesterer,

es ist ein Wörterbuch mit genau zwei Spalten: Stichwort und Erläuterung. Das darf durchaus eine Tabelle sein.

Ich denke auch, das hier tabellarische Daten vorliegen (können). Es gibt ja glücklicherweise keine dogmatischen Festlegungen dazu. Man könnte zum Beispiel für jeden Buchstaben einen eigenen tbody nehmen. Die Semantik gibt es in meinen Augen her.

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

das Wiki verschweigt den Umstand, dass das folgende Markup zulässig ist

Each term-description group consists of one or more terms (represented by dt elements) possibly as children of a div element child ...

Also:

<dl>
   <div>
      <dt>Definitionsliste</dt>
      <dd>Eine Aufzählung von Definitionen</dd>
   </div>
</dl>

Das hat man zugelassen, um nicht ein eigenes gruppierendes Element für Definitionslisten erschaffen zu müssen. Damit lassen sich dann passende Ränder erzeugen. Man muss nur die Breite der dt strikt festlegen und kann sie sich nicht an die Wortlänge der definierten Begriffe auto-anpassen lassen (es sei denn, man formatiert die dl als Grid und legt sich auf genau ein dd pro dt fest). Aber auch dann klappt das buchstabenübergreifend nicht. Oder vielleicht doch, mit einem ::before-Element und einem handgemachten Counter. Keine Zeit zum Ausprobieren, habe gleich einen Termin...

Der Trick, wie man die Listen-„Nummerierung“ (A,B,C,D,...) mittig über den li Inhalt bekommt, hätte ich aber gerne noch gesehen. Dafür bin ich zu dumm.

Da der Wiki-Referenzeintrag zu <li> es verschweigt: Setzen der Listennummer geht mit start am ol Element oder value am li Element. Wichtig, wenn es zu einem Buchstaben keine Begriffe gibt.

Update: Beitrag parallel zu Felix geschrieben, schön dass wir das gleiche denken 😂

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

das Wiki verschweigt den Umstand, dass das folgende Markup zulässig ist

Each term-description group consists of one or more terms (represented by dt elements) possibly as children of a div element child ...

Also:

<dl>
   <div>
      <dt>Definitionsliste</dt>
      <dd>Eine Aufzählung von Definitionen</dd>
   </div>
</dl>

Das hat man zugelassen, um nicht ein eigenes gruppierendes Element für Definitionslisten erschaffen zu müssen. Damit lassen sich dann passende Ränder erzeugen. Man muss nur die Breite der dt strikt festlegen und kann sie sich nicht an die Wortlänge der definierten Begriffe auto-anpassen lassen (es sei denn, man formatiert die dl als Grid und legt sich auf genau ein dd pro dt fest). Aber auch dann klappt das buchstabenübergreifend nicht. Oder vielleicht doch, mit einem ::before-Element und einem handgemachten Counter. Keine Zeit zum Ausprobieren, habe gleich einen Termin...

Meinst Du, dass es dem TE um die Ränder ging?

Der Trick, wie man die Listen-„Nummerierung“ (A,B,C,D,...) mittig über den li Inhalt bekommt, hätte ich aber gerne noch gesehen. Dafür bin ich zu dumm.

Da der Wiki-Referenzeintrag zu <li> es verschweigt: Setzen der Listennummer geht mit start am ol Element oder value am li Element. Wichtig, wenn es zu einem Buchstaben keine Begriffe gibt.

Eine Bitte an alle!

Wenn ihr so was seht, ergänze es, setzt einen Link, oder zumindest ein ToDo!

• Referenz:HTML/li (das value-Attribut war doch drin?
• https://wiki.selfhtml.org/wiki/HTML/Textstrukturierung/ol#Nummerierung_beeinflussen

Update: Beitrag parallel zu Felix geschrieben, schön dass wir das gleiche denken 😂

Rolf

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

Referenz:HTML/li (das value-Attribut war doch drin?

Ja, sorry, kurfristige Leseschwäche und Scrollbehinderung. Ich wollte mich zeitnah drum kümmern, aber dann kamen schönes Wetter und eine wanderwütige Frau dazwischen 😉

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

Referenz:HTML/li (das value-Attribut war doch drin?

Ja, sorry, kurfristige Leseschwäche und Scrollbehinderung. Ich wollte mich zeitnah drum kümmern, aber dann kamen schönes Wetter und eine wanderwütige Frau dazwischen 😉

kein Problem! Ich wollte mich noch bei Dir für die vielen ES6-Artikel bedanken!

Als ich die Themen der Reihenfolge nach durchgegangen bin, hatte ich gesehen, dass du fast überall schon etwas verfasst hattest. Das Tutorial soll nur einen Anlaufpunkt bieten, der dann von den Anfänger-Tutorials aus verlinkt wird und auf weitere Artikel hinzeigt.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Rolf B

Ich wollte mich zeitnah drum kümmern, aber dann kamen schönes Wetter und eine wanderwütige Frau dazwischen 😉

Verstehe ich nicht. Wenn die Frau wandern ist, solltest du doch Zeit haben. 🤪

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Gunnar Bittersmann]

@@Matthias Scharwies

dl dd { 

Der Selektor ist unsinnig, da dd nur in dl vorkommen kann.

Selektoren so spezifisch wie nötig, so unspezifisch wie möglich. Also:

dd {

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Matthias Scharwies]

Hallo Christian,

auf einer anderen Seite von dir wird Dein Problem deutlicher:

<tr>
	<td style="font-size 16pt; text-align: center;">
	<strong>Weltbevölkerung</strong>
	</td>
</tr>

<!---semantisches  HTML --->
<h2>Weltbevölkerung</h2>

Entferne die Tabellen und ersetze sie durch passende HTML-Elemente ( HTML/Tutorials/HTML5)

Die ganze Diskussion wird aus meiner Sicht schon wieder zu verwirrend für Anfänger, bzw. Nichtprofis.

Ob du für Dein Glossar eine Beschreibungsliste (aka Definitionsliste), eine sortierte Liste oder doch eine Tabelle nimmst ist eher egal.

Ich hätte eine dl genommen; sie bei breiten Viewports in 2 Spalten gegliedert; bei schmalen Viewports (50% surfen mit dem Handy) alles als Text in eine Zeile gebracht.

Dafür müsstest Du dich ein bisschen in CSS einarbeiten.

Herzliche Grüße

Matthias Scharwies

[MudGuard]

Hi,

Mit CSS kann man dafür sorgen, dass diese Liste alphabetisch nummeriert wird.

auch dann, wenn - wie auf der gegebenen Seite - nicht zu allen Buchstaben was vorhanden ist? Q, X und Y fehlen.

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@Felix Riesterer

Mit CSS kann man dafür sorgen, dass diese Liste alphabetisch nummeriert wird.

??

A. Abwägung
B. Agnostik (wenig gebräuchlich), Agnostizismus

Du willst zwei verschachtelete Listen?

Man kann es aber auch als eine Definitionsliste sehen.

Scheint sich noch nicht rumgesprochen zu haben: Das d in dl steht nicht für ‚Definitions-‘. [HTML]

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Gunnar Bittersmann]

@@Christian Heinze

https://pro-re-publica.de/abcWortSachReg.php

Bitte verlinken. (🔗-Button überm Eingabefeld) Ich hab das mal für dich gemacht.

„[AfD] konservativ liberale Partei“

Du hast „faschistische“ falsch geschrieben.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Felix Riesterer]

Lieber Gunnar,

https://pro-re-publica.de/abcWortSachReg.php

Bitte verlinken. (🔗-Button überm Eingabefeld) Ich hab das mal für dich gemacht.

das habe ich absichtlich unterlassen und finde es nicht gut, dass Du das getan hast. Vielleicht will das der OP nicht, dass man das anklicken kann?

Du hast „faschistische“ falsch geschrieben.

Gibt es handfeste Beweise, dass Du Recht hast? Also abseits des "gefühlt richtig"?

Liebe Grüße

Felix Riesterer

[Gunnar Bittersmann]

@@Felix Riesterer

https://pro-re-publica.de/abcWortSachReg.php

Bitte verlinken. (🔗-Button überm Eingabefeld) Ich hab das mal für dich gemacht.

das habe ich absichtlich unterlassen und finde es nicht gut, dass Du das getan hast. Vielleicht will das der OP nicht, dass man das anklicken kann?

Der OP will, dass man die Zieladresse aufrufen kann, sonst hätte er sie nicht angegeben. Zieladresse aufrufen heißt im Web: einen Link anclicken, nicht eine Adresse abtippen.

Der OP mag nicht wollen, dass die Adresse von Suchmaschinen indiziert wird. Oder der OP will das, aber SELFHTML will das nicht. Deshalb passiert das auch nicht; sämtliche Links haben rel="nofollow".

Du hast „faschistische“ falsch geschrieben.

Gibt es handfeste Beweise, dass Du Recht hast?

Du hast die letzten Monate unter einem Stein verbracht?

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Felix Riesterer]

Lieber Gunnar,

Du hast „faschistische“ falsch geschrieben.

Gibt es handfeste Beweise, dass Du Recht hast?

Du hast die letzten Monate unter einem Stein verbracht?

wow, sehr sachlich. Und so gut belegt. Nicht. Also wieder nur eine Meinungsäußerung. Davon gibt es mehr als genug. Deshalb dem OP einen Fehler attestieren... hmm.

Liebe Grüße

Felix Riesterer

[Raketenwilli]

Also wieder nur eine Meinungsäußerung.

Nur weil der langjährige Dauersieger im Himmlerdarstellerwettbewerb aus formalen(!) Gründen aus der Partei geworfen wurde ist diese gewiss nicht gleich „bürgerlich“. Insbesondere der Typ, der wohl jeden Auftritt eines auf eigene Initiative verstorben Herrn in den Spartenkanälen des ZDF mitgeschnitten hat – um zum unumstrittenen Sieger des parallel ausgetragenen Göbbels-Imitatoren-Wettbewerbs zu werden – ist ja in „der Partei“ und sogar Führer eines Flügels, der zwar formal nicht mehr existiert, aber die Politik der AfD und das gar zackige Auftreten deren Vertreter steuert.

[Raketenrechtslaie]

Der OP mag nicht wollen, dass die Adresse von Suchmaschinen indiziert wird.

Laut einem viel beachtetem Urteil des LG Berlin ist es haftungsstechnisch ein großer Unterschied, ob eine Seite verlinkt oder deren URL genannt wird. Verlinken, so sinngemäß das LG Berlin, sei quasi (hier im Sinne von "mit ganz wenigen Ausnahmen") stets eine Form „des zu Eigen machen“.

Für Feinheiten wie …

rel="nofollow"

hat sich das Landgericht hierbei nicht interessiert.

In dem Sinne würde ich tatsächlich nahe legen wollen, nicht jede Nennung einer Adresse prompt in einen Link zu verwandeln. Insbesondere wenn es dort um Themen geht, bei welchen gewisse Falschreibungen so schön wie treffsicher erkannt werden…

[Raketenrechtslaie]

Hm. Naja. Entweder hab ich mich zu feinsinnig ausgedrückt und jemand hat es nicht verstanden oder jemand hat es wider jeden Erwartens verstanden…

[Tabellenkalk]

Hallo,

Ich hab dies Posting mal als OT gemeldet, und damit den gesamten Zweig gemeint.

Gruß
Kalk

[Felix Riesterer]

Lieber Christian,

Was ich suche ist ein css-Werkzeug,

wenn Du CSS einsetzen möchtest, warum finde ich in Deinem Code dann <center>??

Im Übrigen ist die Verwendung von style-Attributen in Deinem Quelltext ein klares Indiz dafür, dass Du anscheinend noch nicht tiefer in das Thema Layout eingestiegen bist. Auch Dein Stylesheet zeigt Irrtümer:

t4 {
	font-size: 0.4em;
}

t6 {
	font-size: 0.6em;
}

Diese Selektoren ergeben keinen Sinn, da es in der HTML-Spezifikation keine Elemente t4 oder t6 gibt - oder verwendest Du <t4> und <t6> irgendwo in Deinem Dokument? Das selbe gilt für h_6, h_8 usw. Außerdem endet die Hierarchie der Überschriften mit <h6>, ein <h7> gibt es in HTML ebenfalls nicht!

Was ist eigentlich trx für ein Element, welches Du mit Style-Regeln versehen hast? Die gleiche Frage gilt für die ebenfalls nicht existierenden Elemente tdx und tdtab.

Ich schlage vor, dass Du Dich mit den Grundlagen von HTML noch einmal genauer auseinandersetzt, bevor Du die Grundsatzdiskussion um Deine hier durchaus sinnvoll verwendete Tabelle anstößt. Insbesondere solltest Du die style-Attribute komplett entfernen. Wenn Dir dann die Rahmen der Tabellenzellen fehlen, kannst Du sie mit passenden Angaben in Deinem Stylesheet wieder herstellen. Das sollte dann wesentlich saubereren Code erzeugen.

Was Dein Vorwort und seine technische Umsetzung angeht, so kannst Du ja in meinem Versuch nachschauen, wie das semantischer lösbar ist. Das dafür notwendige CSS ist dort ebenfalls zu finden.

Liebe Grüße

Felix Riesterer

[Gunnar Bittersmann]

@@Felix Riesterer

Außerdem endet die Hierarchie der Überschriften mit <h6>, ein <h7> gibt es in HTML ebenfalls nicht!

Die Hierarchie der Überschriften sollte üblicherweise deutlich früher enden. Spätestens bei <h4> sollte man sich fragen, ob mit der Informationsarchitektur womöglich was nicht stimmt.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Christian Heinze]

Hallo Felix Riesterer; hallo Matthias Apsel; hallo Matthias Scharwies; hallo alle

Zunächst möchte ich mich ganz herzlich bedanken für die vielen zum Teil sehr ausführlichen Belehrungen. Habe gelernt und sehe die Richtung fürs Weiterlernen. Wird Zeit brauchen, bleibe aber halber Laie: Meine Kapazitäten für html/css sind begrenzt, möchte doch an Inhalten arbeiten.

Bei Links habe ich immer „<a href=“...“></a>“ gebutzt. Dachte das verstehen alle. Gern gehe ich zum „button“ über: aber wie geht’s ? – Meine style-sheets müssen entrümpelt werden. Aber gibt‘s ein Programm zum Suchen nach tags in 100 URL’s?

Kuriosum: Viele Stellen in Tutorien haben mich veranlasst, meine ursprünglichen Tabellen in pro-re-publica.de/index.php und pro-re-publica.de/abcWortSachReg.php und crh-pp.de/sitemap.php mit div umzubauen. Riesenarbeit, die nach Euren Anmerkungen jedenfalls für zweispaltige Listeb überflüssig war. Das Ergebnis ist wohl ziemlich monströs aber der validator findet alle 3 fehlerfrei. Auch den Gebrauch von „style“ beanstandet er nicht. (Mir ist ein monströser code, den ich verstehe, lieber als ein eleganter, den ich noch nicht begriffen habe. Bei vielen Seiten steht die Trennung von der Tabellenlösung noch an.)

Auch Kurios: auf meine ursprüngliche Anfrage, ob bei „class“ und „Tabelle“ die „td“ nicht (wie im Tutorial angekündigt) nebeneinander angeordnet werden sollten, gibt es eigentlich noch keine Antwort.

Herzliche Grüße Christian Heinze

[Der Martin]

Hallo Christian,

Bei Links habe ich immer „<a href=“...“></a>“ gebutzt. Dachte das verstehen alle. Gern gehe ich zum „button“ über: aber wie geht’s ?

ich glaube, da hast du etwas missverstanden. Links sind genau richtig, um eine andere Ressource, eine andere Seite zu verlinken. Buttons sind dagegen das Mittel der Wahl für Aktionen innerhalb einer Seite. Es kommt also bei der Entscheidung für das eine oder andere immer auf den Verwendungszweck an.

Meine style-sheets müssen entrümpelt werden. Aber gibt‘s ein Programm zum Suchen nach tags in 100 URL’s?

Auweia. Das klingt nach viel Fleißarbeit. Für das reine Durchsuchen der CSS-Dateien könnte man grep verwenden. Aber vermutlich ist das eine Gelegenheit, Ordnung und Struktur reinzubringen, anstatt nur zu suchen und zu ersetzen.

Kuriosum: Viele Stellen in Tutorien haben mich veranlasst, meine ursprünglichen Tabellen in pro-re-publica.de/index.php und pro-re-publica.de/abcWortSachReg.php und crh-pp.de/sitemap.php mit div umzubauen.

Auch dieser Vorschlag ist so pauschal nicht richtig. Du hast ja schon an der kontroversen Diskussion hier gesehen, dass es immer mehrere mögliche Wege gibt. Generell gilt: Tabellen sind angebracht, wenn es sich tatsächlich um Daten handelt, die die Struktur einer Tabelle haben, sich z.B. zeilen- und spaltenweise zuordnen lassen. Wenn es dagegen nur um die Anordnung verschiedener Blöcke in einem (gedachten) Raster geht, also Layout, war eine Tabelle vor 20 Jahren wohl die einzig brauchbare Möglichkeit. Heute ist CSS in Verbindung mit einem semantisch sinnvollen Markup die wesentlich bessere Lösung.

Dazwischen liegt eine Grauzone. Beim Gegenüberstellen von Teilinhalten wäre eine Tabelle vorstellbar, ebenso (wie hier vorgeschlagen) eine Definitionliste, eventuell auch einfach Paare von Überschrift und Textabsatz.

Abraten würde ich aber vom Nachbauen einer Tabelle mit div-Containern. Dabei gewinnt man IMO nichts, bekommt aber komplizierteres Markup und umständlicheres CSS.

Auch den Gebrauch von „style“ beanstandet er [der Validator] nicht.

Das ist ja auch nicht syntaktisch falsch - aber nicht empfehlenswert. Gerade die Trennung von Inhalt und Gestaltung ist doch einer der großen Vorteile von zentralen Stylesheets.

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Links sind genau richtig, um eine andere Ressource, eine andere Seite zu verlinken. Buttons sind dagegen das Mittel der Wahl für Aktionen innerhalb einer Seite. Es kommt also bei der Entscheidung für das eine oder andere immer auf den Verwendungszweck an.

Entscheidungshilfe:
<a href="#" onclick="…"> oder <a href="javascript:…"> sind sichere Zeichen, dass das kein Link ist, sondern das <button>-Element zu verwenden ist.

… ebenso (wie hier vorgeschlagen) eine Definitionliste

Nochmal die freundliche Erinnerung, dass das d in dl nicht für ‚Definitions-‘ steht. [HTML]

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Der Martin]

Hallo Gunnar,

Entscheidungshilfe:
<a href="#" onclick="…"> oder <a href="javascript:…"> sind sichere Zeichen, dass das kein Link ist, sondern das <button>-Element zu verwenden ist.

falscher Adressat. Mir ist das klar.

… ebenso (wie hier vorgeschlagen) eine Definitionliste

Nochmal die freundliche Erinnerung, dass das d in dl nicht für ‚Definitions-‘ steht. [HTML]

Aah, du bist so vorhersehbar! Genau auf den Einwand habe ich gewartet!

Dann möchte ich dich ebenso freundlich erinnern, dass die Begriffe definition und description einander semantisch sehr nahe stehen, fast dasselbe bedeuten und oft sogar 1:1 austauschbar sind. Vielleicht nicht in der Mathematik, aber zumindest in natürlicher Sprache.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

-- “Turn off CSS. If the page makes no sense, fix your markup.” —fantasai

Live long and pros healthy,
 Martin

[Tabellenkalk]

Hallo,

Dann möchte ich dich ebenso freundlich erinnern, dass die Begriffe definition und description einander semantisch sehr nahe stehen, fast dasselbe bedeuten und oft sogar 1:1 austauschbar sind.

Und das eine zusätzlich den Vorteil hat, ins Deutsche mit dem selben Begriff übersetzt zu werden…

Gruß
Kalk

[Gunnar Bittersmann]

@@Der Martin

falscher Adressat. Mir ist das klar.

Das ist mir klar, dass dir das klar ist.

Wenn ich auf dein Posting antworte, antworte ich nicht unbedingt dir. Sondern der Allgemeinheit. Als Ergänzung zu deinem Posting.

Dann möchte ich dich ebenso freundlich erinnern, dass die Begriffe definition und description einander semantisch sehr nahe stehen, fast dasselbe bedeuten und oft sogar 1:1 austauschbar sind. Vielleicht nicht in der Mathematik, aber zumindest in natürlicher Sprache.

„Können Sie die Person definieren?“
„Hä??“

Nix mit synonym.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

PS: Der Dem-Bittersmann-haste’s-aber-gegeben-Punkt sei dir gegönnt. Du kannst da nichts dafür.

[Matthias Apsel]

Hallo Gunnar Bittersmann,

„Können Sie die Person definieren?“
„Hä??“

Nix mit synonym.

Wenn dir ein Ausländer diese Frage stellen würde, wüsstest du sicher aus dem Zusammenhang heraus, was damit gemeint ist. Vor allem, wenn dir vielleicht dein Portemonnaie gestohlen wurde, wirst du sicher eine Personenbeschreibung abgeben.

PS: Der Dem-Bittersmann-haste’s-aber-gegeben-Punkt sei dir gegönnt. Du kannst da nichts dafür.

Es dreht sich nicht alles nur um dich.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

„Können Sie die Person definieren?“
„Hä??“

Nix mit synonym.

Wenn dir ein Ausländer diese Frage stellen würde, wüsstest du sicher aus dem Zusammenhang heraus, was damit gemeint ist.

Am Thema vorbei.

Es ging nicht darum, ob solch schlechtes Deutsch noch verständlich ist, sondern ob man in gutem Deutsch die Begriffe „Definition“ und „Beschreibung“ gegeneinander austauschen kann.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Der Martin]

Hi,

@@Der Martin

falscher Adressat. Mir ist das klar.

Das ist mir klar, dass dir das klar ist.

Wenn ich auf dein Posting antworte, antworte ich nicht unbedingt dir. Sondern der Allgemeinheit. Als Ergänzung zu deinem Posting.

aha, gut dass ich das nun auch weiß. Ich antworte in einem Forum immer auf das Posting, dessen Verfasser ich direkt ansprechen will.

Dann möchte ich dich ebenso freundlich erinnern, dass die Begriffe definition und description einander semantisch sehr nahe stehen, fast dasselbe bedeuten und oft sogar 1:1 austauschbar sind. Vielleicht nicht in der Mathematik, aber zumindest in natürlicher Sprache.

„Können Sie die Person definieren?“
„Hä??“

Nix mit synonym.

Eine Aussage über "oft" oder "in vielen Fällen" ist mit einem Gegenbeispiel nicht widerlegt.
Eine Definition ist nach allgemeinem Verständnis eine formale Beschreibung eines (gewünschten) Zustands oder Sachverhalts anhand charakteristischer Merkmale.

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Eine Definition ist nach allgemeinem Verständnis eine formale Beschreibung eines (gewünschten) Zustands oder Sachverhalts anhand charakteristischer Merkmale.

Das würde aber nur heißen, dass man „Definition“ ggfs. durch „Beschreibung“ ersetzen könnte. Nicht andersrum.

Um die Gegenrichtung geht es aber gerade bei dl.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Der Martin]

Hallo Gunnar,

Eine Definition ist nach allgemeinem Verständnis eine formale Beschreibung eines (gewünschten) Zustands oder Sachverhalts anhand charakteristischer Merkmale.

Das würde aber nur heißen, dass man „Definition“ ggfs. durch „Beschreibung“ ersetzen könnte. Nicht andersrum.

auch andersrum in manchen Fällen. Um auf dein Beispiel zurückzukommen: Eine Personenbeschreibung definiert die gesuchte Person auch in gewisser Weise.

Um die Gegenrichtung geht es aber gerade bei dl.

Bin ich der einzige, der den Eindruck hat, du wärst heute irgendwie auf Krawall gebürstet?
Glaube ich nicht ...

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Eine Personenbeschreibung definiert die gesuchte Person auch in gewisser Weise.

?? Das verstehe ich nicht.

Bin ich der einzige, der den Eindruck hat, du wärst heute irgendwie auf Krawall gebürstet?

Weder bist du der einzige, der den Eindruck hat, noch bin ich heute irgendwie auf Krawall gebürstet. 😄

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Der Martin]

Hallo,

Eine Personenbeschreibung definiert die gesuchte Person auch in gewisser Weise.

?? Das verstehe ich nicht.

hmm, dafür kann ich nichts.

Bin ich der einzige, der den Eindruck hat, du wärst heute irgendwie auf Krawall gebürstet?

Weder bist du der einzige, der den Eindruck hat, noch bin ich heute irgendwie auf Krawall gebürstet. 😄

Ach, nicht nur heute?

Live long and pros healthy,
 Martin

[Christian Heinze]

Hallo Martin,

nochmals herzlichen Dank. Ich sehe nun schon klarer und werde dann wohl nochmal umbauen müssen.

Christian

PS: Wennich nichts anderes höre habe ich wohl richtig gedeutet: OP = original poster; OT = off topic

[Der Martin]

Hallo,

PS: Wennich nichts anderes höre habe ich wohl richtig gedeutet:
OP = original poster;
OT = off topic

ja, korrekt. Manchmal auch: OP = original posting (Startbeitrag)
Das ergibt sich dann aus dem Zusammenhang.

Live long and pros healthy,
 Martin

[Matthias Scharwies]

Hallo Christian,

Auch Kurios: auf meine ursprüngliche Anfrage, ob bei „class“ und „Tabelle“ die „td“ nicht (wie im Tutorial angekündigt) nebeneinander angeordnet werden sollten, gibt es eigentlich noch keine Antwort.

Ich verstehe grad nicht was Du meinst. In beiden Beispielen des Tutorials werden die <div class="td">bzw. <div class="spalte"> nebeneinander dargestellt, da das CSS dies so festlegt. Nur im HTML-Markup stehen sie untereinander, damit es übersichtlicher ist.

Einziger Vorteil, bzw. Anwendungszweck gegenüber einer HTML-Tabelle wäre die Möglichkeit auf kleinen Viewports die Tabellenzellen, bzw. Spalten untereinander zu positionieren. Das zweite Beispiel würde man heute mit CSS-Grid realisieren.

@Matthias Apsel Ich wäre dafür, dieses Tutorial mit HTML/Tutorials/responsive_Webdesign/bestehende_Webseiten_umbauen zu verschmelzen, bloß wie?

Kuriosum: Viele Stellen in Tutorien haben mich veranlasst, meine ursprünglichen Tabellen in pro-re-publica.de/index.php und pro-re-publica.de/abcWortSachReg.php und crh-pp.de/sitemap.php mit div umzubauen. Riesenarbeit, die nach Euren Anmerkungen jedenfalls für zweispaltige Listeb überflüssig war.

Genau! Statt der Technologie für 1995 hast du jetzt den Stand von 2005.

Das Ergebnis ist wohl ziemlich monströs aber der validator findet alle 3 fehlerfrei. Auch den Gebrauch von „style“ beanstandet er nicht. (Mir ist ein monströser code, den ich verstehe, lieber als ein eleganter, den ich noch nicht begriffen habe. Bei vielen Seiten steht die Trennung von der Tabellenlösung noch an.)

Das ist ja auch alles richtig.

Einfacher ist es jedoch alle CSS-Formatierungen an einer Stelle zu haben. Dann sieht deine Webseite auch überall gleich aus!

• CSS/Tutorials/Einstieg/Warum Layouts mit CSS?

Ich würde zuerst ein Layout entwickeln und in einer style-Datei abspeichern.

Dann binde ich dies im Grundgerüst ein:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="stylesheet" href="stylesheet.css">
    <title>Titel der Seite | Name der Website</title>
  </head>
  <body>
  ...
  </body>
</html>

Dann würde ich mir die Seiten mit Fließtext vornehmen und Überschrift in H1, h2 und h3 setzen, den Fließtext in p auszeichnen.

Einiges kanst du mit einem guten Editor erledigen, wenn du mehrere HTML-Dokumenten öffnest und dann in allen Dokumenten ersetzt. Trotzdem musst Du da noch mal drüberschauen.

Herzliche Grüße

Matthias Scharwies

[Christian Heinze]

Hallo Mathias,

Zunächst wieder vielen Dank für die auführliche Beschäftigung mit meinem Problem! Ich werde versuchen, Deine Ratschläge auszuführen. Ich bin mit filezilla ganz zufrieden, aber die Ersetzungsfunktion nimmt nur ca 20 Buchstaben an. Die Tags h1 etc habe ich in die 3 genannten pages schon eingearbeitet. Vorläufig muss ich mich halt mal mit dem eben tagelang erarbeiteten Stand von 2005 begnügen.

Zur Verständnisfrage: ich war in meiner urpsrünglichen Anfrage von der Tutorial-Seite https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/display/Tabelle ausgegangen wo es heißt:

div.table { 
  display: table; 
  border-collapse:collapse; 
}
div.tr { 
  display:table-row; 
}
div.td { 
  display:table-cell; 
  border:thin solid red; 
  padding:5px; 
}

</style>

<div class="table"> <div class="tr"> <div class="td">ich</div> <div class="td">bin</div> <div class="td">eine</div> <div class="td">Tabelle</div> </div> </div>

und dann heiß es dort weiter:

"Das Beispiel definiert Klassen für div-Elemente. Die Klassennamen heißen genauso wie bekannte HTML-Tabellenelemente. ... Die jeweiligen Klassen erhalten mit Hilfe von display Eigenschaften, durch die sich die Elemente, denen sie zugewiesen werden, wie die entsprechenden HTML-Elemente für Tabellen verhalten. Innerhalb des Dateikörpers wird dann im Beispiel eine waschechte Tabelle aus div-Elementen mit class-Attributen zusammengebaut."

Daher nahm ich an: wenn man eine URL nach obenstehendem Beispiel erstellt, erhält man eine Tabelle, in der die td-Elemente nebeneinander stehen. Ich habe garnicht an die kleinen Viewports gedacht sondern wollte einfach den vielen Aufforderungen folgen, Tabellen loszuwerden, um meine Seiten zu verbessern.

Nochmals Dank und "schönes Wochenende" ! Christian Heinze