Christian Heinze: Alternativen zu Tabellen

0 45

Alternativen zu Tabellen

Christian Heinze
  • wiki
  1. 0
    Matthias Apsel
    • css
    • html
    • wiki
    1. 0
      Christian Heinze
      • php
      • zur info
      1. 0
        Matthias Scharwies
        • html
        • php
        • zur info
      2. 0
        Felix Riesterer
        • css
        • html
        1. 0
          Christian Heinze
          • css
          • html
          • php
          1. 0
            Matthias Scharwies
            • css
            • html
            1. 0
              Felix Riesterer
              1. 0
                Matthias Apsel
            2. 1
              Rolf B
              1. 0
                Matthias Scharwies
                1. 0
                  Rolf B
                  1. 0
                    Matthias Scharwies
                  2. 0
                    Gunnar Bittersmann
                    • menschelei
            3. 0
              Gunnar Bittersmann
              • css
          2. 0
            Matthias Scharwies
            • css
            • html
        2. 1
          MudGuard
        3. 0
          Gunnar Bittersmann
      3. 1
        Gunnar Bittersmann
        • zur info
        1. 0
          Felix Riesterer
          1. 0
            Gunnar Bittersmann
            1. -4
              Felix Riesterer
              1. 2
                Raketenwilli
                • politik
                • zur info
            2. -1
              Raketenrechtslaie
              • meinung
              • recht
              1. 0
                Raketenrechtslaie
        2. 1
          Tabellenkalk
      4. 0
        Felix Riesterer
        1. 0
          Gunnar Bittersmann
          • design
        2. 0
          Christian Heinze
          1. 1
            Der Martin
            • css
            • meinung
            1. 0
              Gunnar Bittersmann
              • html
              1. 1
                Der Martin
                • menschelei
                • sprache
                1. 0
                  Tabellenkalk
                2. 0
                  Gunnar Bittersmann
                  1. 0
                    Matthias Apsel
                    1. 0
                      Gunnar Bittersmann
                  2. 2
                    Der Martin
                    1. 0
                      Gunnar Bittersmann
                      1. 1
                        Der Martin
                        1. 0
                          Gunnar Bittersmann
                          1. 0
                            Der Martin
            2. 0
              Christian Heinze
              1. 0
                Der Martin
          2. 0
            Matthias Scharwies
            • css
            • html
            1. 0
              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 ?

  1. 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

    --
    Du kannst das Projekt SELFHTML unterstützen,
    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
    1. 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>

      1. 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

        --
        Ήταν διασκεδαστικό όσο κράτησε.
        Χρύσιππος ὁ Σολεύς, 220 π.Χ.
      2. 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

        1. 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

          1. 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

            --
            Ήταν διασκεδαστικό όσο κράτησε.
            Χρύσιππος ὁ Σολεύς, 220 π.Χ.
            1. 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

              1. 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

                --
                Du kannst das Projekt SELFHTML unterstützen,
                indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
            2. 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

              --
              sumpsi - posui - obstruxi
              1. 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!

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

                Rolf

                Herzliche Grüße

                Matthias Scharwies

                --
                Ήταν διασκεδαστικό όσο κράτησε.
                Χρύσιππος ὁ Σολεύς, 220 π.Χ.
                1. 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

                  --
                  sumpsi - posui - obstruxi
                  1. 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

                    --
                    Ήταν διασκεδαστικό όσο κράτησε.
                    Χρύσιππος ὁ Σολεύς, 220 π.Χ.
                  2. @@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!

                    --
                    “Turn off CSS. If the page makes no sense, fix your markup.” —fantasai
            3. @@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!

              --
              “Turn off CSS. If the page makes no sense, fix your markup.” —fantasai
          2. 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

            --
            Ήταν διασκεδαστικό όσο κράτησε.
            Χρύσιππος ὁ Σολεύς, 220 π.Χ.
        2. 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

        3. @@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!

          --
          “Turn off CSS. If the page makes no sense, fix your markup.” —fantasai
      3. @@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!

        --
        “Turn off CSS. If the page makes no sense, fix your markup.” —fantasai
        1. 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

          1. @@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!

            --
            “Turn off CSS. If the page makes no sense, fix your markup.” —fantasai
            1. 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

              1. 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.

            2. 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…

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

        2. Hallo,

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

          Gruß
          Kalk

      4. 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

        1. @@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!

          --
          “Turn off CSS. If the page makes no sense, fix your markup.” —fantasai
        2. 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

          1. 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

            --
            Ich stamme aus Ironien, einem Land am sarkastischen Ozean.
            1. @@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!

              --
              “Turn off CSS. If the page makes no sense, fix your markup.” —fantasai
              1. 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

                --
                Ich stamme aus Ironien, einem Land am sarkastischen Ozean.
                1. 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

                2. @@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.

                  --
                  “Turn off CSS. If the page makes no sense, fix your markup.” —fantasai
                  1. 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

                    --
                    Du kannst das Projekt SELFHTML unterstützen,
                    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                    1. @@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!

                      --
                      “Turn off CSS. If the page makes no sense, fix your markup.” —fantasai
                  2. 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

                    --
                    Ich stamme aus Ironien, einem Land am sarkastischen Ozean.
                    1. @@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!

                      --
                      “Turn off CSS. If the page makes no sense, fix your markup.” —fantasai
                      1. 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

                        --
                        Ich stamme aus Ironien, einem Land am sarkastischen Ozean.
                        1. @@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!

                          --
                          “Turn off CSS. If the page makes no sense, fix your markup.” —fantasai
                          1. 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

                            --
                            Ich stamme aus Ironien, einem Land am sarkastischen Ozean.
            2. 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

              1. 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

                --
                Ich stamme aus Ironien, einem Land am sarkastischen Ozean.
          2. 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!

            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

            --
            Ήταν διασκεδαστικό όσο κράτησε.
            Χρύσιππος ὁ Σολεύς, 220 π.Χ.
            1. 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