iloveHTML: CSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden

074

CSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden

  1. 1
    1. 0
      1. 0
        1. 0
          1. 0
      2. 0
        1. 0
          1. 0
          2. 0
            1. 0
            2. 0
              1. 0
            3. 0
          3. 0
            1. -3
              1. 0
                1. 0
                  1. 0
                    1. 1
              2. 0
                1. 0
                  1. 0
                    1. 0
                  2. 0
                    1. 0
                      1. 0
                        1. 0
                    2. 0
                    3. 0
                      1. 0
                        1. 0

                          Externer Google Font Sicherheitshinweis

                          1. 0
                            1. 0
                          2. 0
                  3. 0
                    1. 0
                      1. 0
                        1. 0
                      2. 0
                        1. 1
                          1. 0
                            1. 0
    2. 0
      1. 0
        1. 0
          1. 0
            1. 0
              1. 0
                1. 0
                  1. 0
                    1. 0
                      1. 0
                  2. 0
          2. 0
          3. 0
          4. 0
  2. 2

    Zu Ebay

    1. 1

      Beispiel Responsive

  3. 0
    1. 0
      1. 0
        1. 0
          1. 0
        2. 0
        3. 0
    2. 1
      1. 0
        1. 0
          1. 0
            1. 1
        2. 0
        3. 0
    3. 1

Hallo zusammen

ich meinem HTML Dokument befindet sich eine Mastertabelle. In dieser Tabelle befinden sich weitere Tabellen, um den Spaltenaufbau und die Struktur der Seite zu bestimmen.

Nun möchte ich nur EINE Tabelle mit

<STYLE TYPE="text/css"> tr:nth-child(even) {background-color: #D4D4D4;} tr:nth-child(odd) {background-color: #FFFFFF;} </STYLE>

als Zebrastreifentabelle formatieren.

Leider wird dieser Code auf ALLE Tabellen angwendet. Wie kann ich das verhindern? Wie kann ich es so hinbekommen, daß nur eine Tabelle diese Anweisungen erhält?

  1. Hallo iloveHTML,

    In dieser Tabelle befinden sich weitere Tabellen, um den Spaltenaufbau und die Struktur der Seite zu bestimmen.

    Sollte nicht so sein, Tabellendesign ist verpönt, weil es bessere Wege gibt.

    <STYLE TYPE="text/css"> tr:nth-child(even) {background-color: #D4D4D4;} tr:nth-child(odd) {background-color: #FFFFFF;} </STYLE>

    als Zebrastreifentabelle formatieren.

    Leider wird dieser Code auf ALLE Tabellen angwendet. Wie kann ich das verhindern? Wie kann ich es so hinbekommen, daß nur eine Tabelle diese Anweisungen erhält?

    Indem du die gewünschte Tabelle identifizierst. Also zb. id="zebra" und dann das CSS nur darauf anwendest zb.

    #zebra{...}

    Gruss
    Henry

    1. Hallo Henry,

      verpönt hin oder her, es gibt alte Dokumente und Vorgaben, die erlauben es nicht anders

      Vielleicht ist es am Anschauungsobjekt einfacher, die Versandkostentabelle ist aktuell manuell eingefärbt, das soll überarbeitet werden

      https://www.ebay.de/itm/Spannungswandler-220-110-Volt-Trafo-Transformator-Spannungsumformer-Umformer/183102676178?hash=item2aa1c51cd2:g:j9wAAOSwkjFalE9S

      ID

      was für eine ID ?

      <TABLE ID Zebra> . . . .</TABELE>

      ?

      1. Also ich habe der Tabelle jetzt DIV CLASS="zebra" zugewiesen und den Container eingebaut.

        Dann die Formatierung in die Style Sektion am Anfang des Dokumentes eingefügt

        Nichts funktioniert, es geht nicht

        1. Nun habe ich es als ID versucht, geht ebenso nicht

          Meine Zeile im Style

          #zebra {tr:nth-child(even) {background-color: #D4D4D4;} tr:nth-child(odd) {background-color: #FFFFFF;}

          sämtliche Varianten mit umsetzenvon Semikolon, Klammer, geschweifte Klammer, Doppelpunkt führen zu dem gleichen Ergebnis

          1. Hallo @iloveHTML,

            Meine Zeile im Style

            #zebra {tr:nth-child(even) {background-color: #D4D4D4;} tr:nth-child(odd) {background-color: #FFFFFF;}

            vielleicht solltest du deine Liebe auch auf CSS ausdehnen 😉 Dieser Schnipsel ist sinnloses und ungültiges CSS.

            Viele Grüße
            Robert

      2. Hallo iloveHTML,

        Vielleicht ist es am Anschauungsobjekt einfacher, die Versandkostentabelle ist aktuell manuell eingefärbt, das soll überarbeitet werden

        https://www.ebay.de/itm/Spannungswandler-220-110-Volt-Trafo-Transformator-Spannungsumformer-Umformer/183102676178?hash=item2aa1c51cd2:g:j9wAAOSwkjFalE9S

        Wir reden hier also von Ebay? Und dort hast du Zugang zum Kopfbereich der Seite, bzw. darfst seperate Styleangaben zufügen. Wäre mir neu, habe aber lange dort nichts mehr gemacht.

        Aber…

        ID

        was für eine ID ?

        <TABLE ID Zebra> . . . .</TABELE>

        ?

        ich seh schon, du hast noch nicht viel mit HTML zu tun gehabt. Daher mal: https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/strukturelle_Pseudoklasse/nth-child#Tabelle_im_Zebralook

        Aber das kennst du vermutlich schon, was du aber kennen solltest, wie man ein Element ansprechen kann: https://wiki.selfhtml.org/wiki/CSS/Selektoren/ID-Selektor

        oder grundsätzlich: https://wiki.selfhtml.org/wiki/CSS/Selektoren

        und natürlich nicht zu vergessen die Attribute: https://wiki.selfhtml.org/wiki/Referenz:HTML/Attribute

        Dann merkst du bald, dass du zb. <table id="zebra"> verwenden und dieses mit CSS auch ansprechen kannst.

        zb.
        #zebra{background-Color:red;}

        oder du willst die Zeilen darin ansprechen dann…

        #zebra tr{background-Color:blue;}

        Jetzt hast du aber vermutlich auch noch das Problem nicht in den Kopfbereich bei Ebay reinzukommen um dort Styleangaben zu machen. Da gäbe es normalerweise die Möglichkeit das direkt im Bodybereich zu bestimmen. bsp. <tr style="background-Color:#000;}"> Das bringt aber einen größeren Aufwand für deinen Zebralook. Alternativ gäbe es dann noch eine Möglichkeit über Javascript den Kopfbereich zu ändern, würde jetzt aber zu weit führen. Allerdings, ohne Gewähr, dürfte es auch funktionieren wenn du die Styleangabe im Bodybereich reinlegst, zwar nicht so vorgesehen, aber zur Not.

        Gruss
        Henry

        1. Henry

          dieses Template habe ich vor 10 Jahren geschrieben

          der Unterschied von Class und ID ist mir schon klar

          im Head stehen alle Style Angaben und die werden von eBay auch einwandfrei interpretiert

          weder als Class, noch als ID funktioniert es nicht

          wenn ich die Tabelle in einen DIV Container einfasse, MUSS es gehen, tut es nicht

          ich vermute, es liegt ein Syntaxfehler in der Style Zeile vor, nur wo liegt er? Es muss ja alles von geschweiften Klammern eingeschlossen sein

          1. Hallo iloveHTML,

            der Unterschied von Class und ID ist mir schon klar

            denke da fehlt noch mehr als der Unterschied…

            Aber hier mal für dich (auf run klicken): https://www.w3schools.com/code/tryit.asp?filename=FP4EE8AX04TB

            Henry

          2. Alle diese Varianten funktionieren NICHT:

            #zebra {tr:nth-child(even) background-color:#D4D4D4; tr:nth-child(odd) backgroundcolor:#FFFFFF;} .zebra {tr:nth-child(even) background-color:#D4D4D4; tr:nth-child(odd) background-color:#FFFFFF;} #zebra {tr:nth-child(even) background-color:#D4D4D4 tr:nth-child(odd) background-color:#FFFFFF;} .zebra {tr:nth-child(even) background-color:#D4D4D4 tr:nth-child(odd) background-color:#FFFFFF;}

            Alles, was sonst noch umgesetzt werden kann von Klammern und Leerschritten, alles erfolglos

            1. Hallo,

              Schau dir mal die Kombinatoren an!

              Gruß
              Kalk

            2. So sieht die Style Sektion im Head aus, alles funktioniert, bis auf zebra

              <STYLE TYPE="text/css"> <!-- *{font-family:verdana; font-size:10pt; color:#000000;} .bullet {font-family:verdana; font-size: 10pt; font-weight: bold; color:#D4D4D4;} .headline {font-family:arial; font-size:11pt; color:#7F7F7F; font-weight:bold;} .sonderaktion {font-family:arial; font-size:10pt; color:#FF9933; font-weight:bold;} .key {font-family:verdana; font-size:1pt; color:#FFFFFF;} .red {font-family:verdana; font-size:10pt; color:#E60000; font-weight:bold;} .green {font-family:verdana; font-size:10pt; color:#00BF54; font-weight:bold;} .templateversion {font-family:verdana; font-size:6pt; color:#00009F;} .black {font-family:verdana; font-size:10pt; color:#000000; font-weight:bold;} .desc_addon_1 {font-family:verdana; font-size:16pt; color:#FFA800; font-weight:bold;} #zebra {tr:nth-child(even) background-color:#D4D4D4; tr:nth-child(odd) background-color:#FFFFFF;} --> </STYLE>

              Die Darstellung hier ist natürlich eine Katastrophe

              Edit Rolf B: Katastrophenhilfe geleistet

              1. Falsch:

                #zebra {tr:nth-child(even) background-color:#D4D4D4; tr:nth-child(odd) background-color:#FFFFFF;}

                Erst mal cool bleiben und schauen, was man will:

                Die tr sind HTML-Elemente, welche in einer Tabelle mit der ID "zebra" auftreten und formatiert werden sollen.

                Also:

                #zebra tr:nth-child(even) { background-color:#D4D4D4; } #zebra tr:nth-child(odd) { background-color:#FFFFFF; }

                Allerdings würde die ID für die Tabelle in eine Klasse ändern. Morgen kommt vielleicht noch eine Tabelle hinzu...

            3. Hallo iloveHTML,

              Alle diese Varianten funktionieren NICHT:

              Stimmt. Du hast schon Links zu den Grundlagen bekommen.

              Bis demnächst
              Matthias

              -- Rosen sind rot.
          3. Hallo iloveHTML,

            beschäftige Dich mal mit CSS Selektoren und Kombinatoren, dann weißt Du wie man das richtig macht.

            Die grundsätzliche Syntax einer CSS Regel ist

            selektor { eigenschaften }.

            Nur ein Paar geschweifter Klammern, mehr nicht. Geschachtelte geschweiften Klammern gibt es in CSS zwar auch, aber nur bei Gruppen von Regeln, die z.B. durch Media-Abfragen gebildet werden. Hier nicht.

            Ein Selektor kann ein einfacher Selektor sein oder eine Art "Suchpfad", dann sind es mehrere einfache Selektoren, die jeden Schritt auf dem Pfad bestimmen, und dazwischen Kombinatoren, die die Art des Schrittes angeben.

            Ein einfacher Selektor für Klassen ist ein Punkt, gefolgt vom Klassennamen.

            Ein einfacher Selektor für IDs ist ein #, gefolgt von der ID

            Ein einfacher Selektor, der nur aus Buchstaben besteht, findet HTML Elemente mit diesem Tag-Name. Das willst Du hier nicht.

            Der einfachste Kombinator ist die Leerstelle, der „Nachfahren-Selektor“. Dann sucht er die Elemente, auf die der Selektor links davon passt, und dann DARIN nach Elementen, auf die der Selektor rechts davon passt.

            Rolf

            -- sumpsi - posui - clusi
            1. Naja,

              wenn es nicht geht, lasse ich es halt so

              ich habe alle Kommata, Semikolon und geschweiften Klammern jetzt durch, funktioniert halt nicht

              Was soll's

              1. Hallo,

                wenn es nicht geht, lasse ich es halt so

                klar geht das!

                Was soll's

                wenn mans richtig macht…

                Gruß
                Kalk

                1. Hallo Kalk,

                  da ich jetzt alle Varianten in der Zeile für die Styleangabe durchhabe und es nicht funktinoiert, tja, was soll ich sagen.....

                  so viele Möglichkeiten, die Selektoren voneinander zu trennen gibt es ja nicht. Oder dürfen sie nicht in einer Zeile stehen, so wie es bei Javascript dann zu Problemen kommt?

                  1. Also zum Beispiel eine Zeile aus meinem Style

                    .red {font-family:verdana; font-size:10pt; color:#E60000; font-weight:bold;}

                    alle Anweisungen werden kombiniert ausugeführt vor dem Doppelpunkt der Selektor, nach dem Doppelpunkt die Anweisung

                    was soll da in der zebra anweisung anders sein?

                    ist doch auch durch Semikolon getrennt, funktioniert halt nicht

                    1. Hallo,

                      vor dem Doppelpunkt der Selektor, nach dem Doppelpunkt die Anweisung

                      Hier hast du ein Verständnisproblem: der/die Selektor/en befinden sich vor der öffnenden geschweiften Klammer. Vor dem Doppelpunkt findet sich die Eigenschaft, hinter dem Doppelpunkt der Wert.

                      Gruß
                      Kalk

              2. Hallo,

                um es einfacher auszudrücken:

                .zebra tr:nth-child(even){background-color:#D4D4D4;} .zebra tr:nth-child(odd){background-color:#FFFFFF;}

                Grüße, Martl

                1. Hab ich auch schon ausprobiert, erfolglos

                  1. Hallo

                    Hab ich auch schon ausprobiert, erfolglos

                    Wenn die tatsächlich richtige Variante bei dir nicht funktioniert, dann machst du etwas anderes falsch.

                    Tschö, Auge

                    -- Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
                    Toller Dampf voraus von Terry Pratchett
                    1. Hallo Auge,

                      Wenn die tatsächlich richtige Variante bei dir nicht funktioniert, dann machst du etwas anderes falsch.

                      oder ebay erlaubt keine style-Elemente.

                      Bis demnächst
                      Matthias

                      -- Rosen sind rot.
                  2. erfolglos

                    Das geht aber genau so!

                    Stichworte: Tippfehler, Cache?

                    1. Hallo Regina Schaukrug,

                      erfolglos

                      Tippfehler, Cache?

                      ebay?

                      Bis demnächst
                      Matthias

                      -- Rosen sind rot.
                      1. Hm

                        ich schrieb ja bereits, daß alle Style Angaben von eBay umgesetzt werden, hatte ja den Link zu der Seite angegeben

                        ich geb es halt auf, funktioniert nicht und gut

                        ist ja jetzt auch nicht so wild

                        das Template steht ja schon seit Jahren, wollte mir nur zukünftig das manuelle Einfärben der Zeilen erstparen, aber die paar KB, die das Dokument dadurch grösser wird, so what

                        Trotzdem Danke für eure Unterstützung

                        1. Hallo iloveHTML,

                          ich schrieb ja bereits, daß alle Style Angaben von eBay umgesetzt werden, hatte ja den Link zu der Seite angegeben

                          Du verwendest style-Attribute, keine style-Elemente.

                          Bis demnächst
                          Matthias

                          -- Rosen sind rot.
                    2. Hallo Regina,

                      Das geht aber genau so!

                      wie ich das immer hasse... nur mal am Rande. Muss jetzt wirklich schon so ein simples Beispielscript die Googlekrake bedienen. Nicht böse gemeint, ich versteh es nur nicht.

                      <link href='http://fonts.googleapis.com/css?family=Roboto:300,400,500' rel='stylesheet' type='text/css'> Da hätte jetzt sans serif oder gar nichts auch gereicht. Bevor jetzt kommt, "geht mich nichts an", ja stimmt 😉 wollte es nur mal los werden.

                      Gruss
                      Henry

                    3. @@Regina Schaukrug

                      Das geht aber genau so!

                      Nein, genau so geht es nicht!

                      Wobei „es“ nicht die Zebrastreifen meint, sondern die Interaktion. Die ist bei dir kaputt; mit Tastatur geht da gar nichts.

                      Kinder, wie oft muss man das denn noch wiederholen: Niemals nicht interaktive Elemente als click-Eventtarget verwenden!

                      Interaktive Elemente sind: a[href], button und einige andere. tr gehört nicht dazu.

                      Es wäre schön, wenn du dein Bespiel berichtigen würdest, damit es als gutes Beispiel dienen kann.

                      LLAP 🖖

                      -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann

                      Folgende Nachrichten verweisen auf diesen Beitrag:

                      1. @@Gunnar Bittersmann

                        Es wäre schön, wenn du dein Bespiel berichtigen würdest, damit es als gutes Beispiel dienen kann.

                        Das ist gar nicht so schwer. Füge in die jeweils letzte Zelle jeder Spalte einen Button ein:
                        <td class="showSelected"><button aria-label="ausgewählt" aria-pressed="false"></button></td>

                        (in der Zeile <tr class="gewaehlt"> mit aria-pressed="true")

                        Statt für td.showSelected die Stile dann für td.showSelected > button und wenn du magst, Rahmen, Padding und Hintergrund weg:

                        .tiger tbody tr td.showSelected > button{ width: 1em; border: none; padding: 0; background: transparent; } .tiger tbody tr td.showSelected > button::after { content: "⦙⦙⦙⦙"; } .tiger tbody tr.gewaehlt td.showSelected > button::after { content: "✓"; }

                        Den Fabwechsel bei :hover auch für Tastatursteuerung, d.h. für :focus-within, also die Selektoren ergänzen:

                        .tiger tbody tr:hover, .tiger tbody tr:focus-within { background-color:#efe; } .tiger tbody tr.gewaehlt:hover, .tiger tbody tr.gewaehlt:focus-within { background-color:#fdb; }

                         

                        Im JavaScript kannst du fast alles so lassen; EventListener auf tr kann ja so bleiben (event delegation). Natürlich sollen Mausnutzer auch weiterhin auf die gesamte Fläche der Zeile clicken können.

                        Zusätzlich zur Klasse der Zeile ist lediglich noch das aria-pressed-Attribut umzuschalten, damit das ein funktionierender Toggle-Button ist. Hinzugefügt:

                        • var button = this.querySelector('td.showSelected > button');

                        • button.setAttribute('aria-pressed', 'false'); im THEN-Zweig

                        • button.setAttribute('aria-pressed', 'true'); im ELSE-Zweig

                         

                        Das war’s dann auch schon. ☞ anzusehen

                        (Stillschweigend berichtigt: Leerzeichen weg bei <!doctype html>, / rein bei </body>.)

                         

                        Da gibt’s natürlich noch Verbesserungspotential:

                        • Elemente nicht im Eventhandler jedesmal neu im DOM suchen, sondern initial und in Variablen ablegen.

                        • Klassen nicht per className umschalten (was sowieso keine gute Idee ist, wenn noch andere Klassen im Spiel sind, die nicht geändert werden sollen), sondern mit dem classList-Objekt, welches auch eine Methode toggle() bietet.

                        • [Nachtrag] nicht für jede Tabellenzeile einen EventListener, sondern einen für die ganze Tabelle (event delegation).

                        • [Nachtrag] button::after nicht in Abhängigkeit von class="gewaehlt" des tr-Vorfahren stylen, sondern in Abhängigkeit von seinem eigenen aria-pressed-Attribut, d.h.

                          button[aria-pressed="false"]::after { content: "⦙⦙⦙⦙"; } button[aria-pressed="true"]::after { content: "✓"; }

                        LLAP 🖖

                        -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann

                        Folgende Nachrichten verweisen auf diesen Beitrag:

                        1. Hallo Gunnar,

                          Das war’s dann auch schon. ☞ anzusehen

                          Ich hatte ja schon mal erwähnt, was ich von externen Googlefonteinbindungen halte, aber das ist subjektiv. Objektiv allerdings, habe ich eine Frage dazu. Ich bekomme bei dieser Einbindung oft(seltsamerweise nur bei Google Fonts und auch nicht immer) eine Sicherheitswarnung:

                          Im Entwicklerwerkzeug steht dann auch:

                          Ich komme nur leider nicht dahinter, weshalb genau und warum auch nicht immer(bzw. bei Seiten wo es auftritt schon immer, nur eben nicht bei jeder Seite die das einbindet). Klar wenn ich die Font runterlade seh ich natürlich nichts Aufälliges, aber da so ein Link natürlich auch auf normalem Weg anderes(als nur ein Font) einschleusen/ausführen könnte, wüsste ich gern wie ich das prüfen könnte. Vorschlag?

                          Gruss
                          Henry

                          1. @@Henry

                            Ich hatte ja schon mal erwähnt, was ich von externen Googlefonteinbindungen halte

                            Oops, da hatte ich gar nicht hingesehen. Ich halte davon auch nicht viel.

                            Ist in meinem Beispiel raus. Wer Roboto nicht lokal installiert hat1, bekommt das jetzt in seiner serifenlosen Schrift (Helvetica, Arial, …) zu sehen.

                            Wer das Problem2 weiter nachvollziehen möchte, muss das anhand Reginas Vorlage tun.

                            LLAP 🖖

                            1. Kann man durchaus machen; ist ja eine schöne Schrift.

                            2. Was wohl daher rührt, dass die Schrift per HTTP geholt wird und nicht per HTTPS?

                            -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                            1. Hallo Gunnar,

                              ach klar, peinlich 😉 Danke. Noch zum 2. Teil meiner Frage(habe die blöd formuliert), weiß nicht ob ich das richtig sehe(weil noch nicht getestet), könnte Google(nur theoretisch), mal abgesehen vom Scanning, von dort aus beliebig ins Dom eingreifen und manipulieren, oder ist das speziell geschützt beim Browser?

                              Gruss
                              Henry

                          2. Hallo Henry,

                            Ich komme nur leider nicht dahinter, weshalb genau und warum auch nicht immer

                            Weil manche Einbindungen über HTTPS erfolgen und andere nicht.

                            Bis demnächst
                            Matthias

                            -- Rosen sind rot.
                  3. Hallo,

                    Hab ich auch schon ausprobiert, erfolglos

                    hattes du aber nicht mit aufgelistet bei deinen erfolglosen Versuchen!

                    Gruß
                    Kalk

                    1. Nee, hab ich nicht aufgelistet

                      is ja jetzt auch egal

                      1. Hallo iloveHTML,

                        live per Chrome-Entwicklerwerkzeugen in deine Seite hineingefiddelt:

                        Noch Fragen?

                        Rolf

                        -- sumpsi - posui - clusi
                        1. Du hast .foo definiert und jede zweite Zeile ist gelb hinterlegt

                          ändert nichts daran, daß es bei mir nicht funktioniert. Ich nutzte Firefox.

                          Der Beweis, daß meine Zeilen wie von Regina kopiert fehlerfrei sind ist darin zu sehen, daß die Syntax genau gleich ist, wie von Deiner .foo Definition

                          Ich dachte schon, daß es an der einleitenden und der hintangestellten Leerstelle in den geschweiften Klammern liegt, aber nein, das ist es auch nicht

                          also quälen wir uns nicht weiter rum

                          Macht euch bitte keine weitere Arbeit

                      2. Hallo Regina

                        auch diese Variante, wie von Dir habe ich im Style ausprobiert

                        egal ob ich die Tabelle mit einer ID versehe, oder die Tabelle in einen DIV Container einschliesse, es funktioniert nicht

                        #zebra tr:nth-child(even) { background-color:#D4D4D4; } #zebra tr:nth-child(odd) { background-color:#FFFFFF; }

                        habe ich genauso gemacht

                        alternavit als

                        .zebra tr:nth-child(even) { background-color:#D4D4D4; } .zebra tr:nth-child(odd) { background-color:#FFFFFF; }

                        Es geht nicht. Ich hab jetzt auch kein Interesse mehr daran, seid mir net böse, aber ich hab alle Varianten durch. Ich lass es jetzt so. Manche Dinge im Leben können einfach nicht erzwungen werden.

                        1. Hallo iloveHTML,

                          Es geht nicht. Ich hab jetzt auch kein Interesse mehr daran, seid mir net böse, aber ich hab alle Varianten durch. Ich lass es jetzt so. Manche Dinge im Leben können einfach nicht erzwungen werden.

                          Geduld galt mal als Tugend. Du hast hier ungewöhnlich viele Antworten in sehr kurzer Zeit bekommen. Das bedeutet, die Leute hier haben sich bemüht Dir zu helfen. Und du benimmst dich, sorry muss ich jetzt mal so offen sagen, wie ein verzogenes kleines Kind.

                          Gruss
                          Henry

                          1. Henry

                            ich habe mich ja auch für die Mithilfe bedankt und alle Lösungsvorschläge umgesetzt

                            es ändert eben nichts an dem Ergebnis

                            Ihr könnt da jetzt auch nichts mehr machen. Bei Rolf B hat es funktioniert, bei mir eben nicht

                            Er und ich haben den gleichen Quelltext

                            also, lasst es gut sein

                            1. Hallo iloveHTML,

                              Vorschlag: Bau's einfach mal "nicht funktionierend" ein und mach's in ebay aktiv, und ich schau mir dann an, wie es in Chrome aussieht… Ein Füxlein kann ich auch noch auftreiben.

                              Meine Vermutung: Irgend ein Detail hast Du anders verstanden als wir es gemeint haben.

                              Wäre doch schade, wenn Du aus dieser Diskussion hier nur Frust mitnehmen würdest.

                              Rolf

                              -- sumpsi - posui - clusi
    2. @@Henry

      Indem du die gewünschte Tabelle identifizierst. Also zb. id="zebra" und dann das CSS nur darauf anwendest zb. #zebra{...}

      "zebra" ist keine gute Bezeichnung zur Identifikation einer Tabelle. (Es sei denn, in deren Inhalt geht es um Zebras). Die ID sollte die Tabelle inhaltlich beschreiben; sowas wie bspw. "produkteigenschaften".

      "zebra" wäre eine Bezeichnung für eine Klasse. Auch wenn das gegenwärtig(!) nicht gewünscht ist, es könnte ja mehrere solcher Tabellen geben. (Es sollte eher gar keine geben, aber das ist eine andere Diskussion.)

      Das wäre eine rein präsentationsbezogene Klasse – i.d.R. bäh, aber es mag Anwendungsfälle dafür geben. Also class="zebra" und das CSS nur darauf angewandt: .zebra …

      LLAP 🖖

      -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. Hallo Gunnar,

        "zebra" ist keine gute Bezeichnung zur Identifikation einer Tabelle. (Es sei denn, in deren Inhalt geht es um Zebras). Die ID sollte die Tabelle inhaltlich beschreiben; sowas wie bspw. "produkteigenschaften".

        Warum?

        "zebra" wäre eine Bezeichnung für eine Klasse. Auch wenn das gegenwärtig(!) nicht gewünscht ist, es könnte ja mehrere solcher Tabellen geben. (Es sollte eher gar keine geben, aber das ist eine andere Diskussion.)

        Ja und ich schrieb …Tabelle identifizieren durch zb,... Dass die Identifizierung durch Klassen, Selektoren, etc. möglich ist, dürfte klar sein. Da es hier in der Frage aber konkret um eine einzige Tabelle ging, finde ich ID als Primärlösung durchaus geeignet, insbesondere auch weil damit gleichzeitig als Sprungmarke geeignet ist.

        Das wäre eine rein präsentationsbezogene Klasse – i.d.R. bäh, aber es mag Anwendungsfälle dafür geben. Also class="zebra" und das CSS nur darauf angewandt: .zebra …

        Sehe da immer noch keine echte Notwendigkeit, das anders anzugehen.

        Gruss
        Henry

        1. Hallo Henry,

          HTML beschreibt, was es ist, nicht, wie es aussehen soll.

          Jemand der maschinell den Quelltext liest - Suchmaschinen zum Beispiel - kann anhand der Klasse oder ID Produktbeschreibung erkennen, dass das entsprechende Element eine Produktbeschreibung enthält.

          Bis demnächst
          Matthias

          -- Rosen sind rot.
          1. Hallo Matthias,

            HTML beschreibt, was es ist, nicht, wie es aussehen soll.

            Ok.

            Jemand der maschinell den Quelltext liest - Suchmaschinen zum Beispiel - kann anhand der Klasse oder ID Produktbeschreibung erkennen, dass das entsprechende Element eine Produktbeschreibung enthält.

            Dann wäre also Gunnars Ansicht "als id kein Zebra, als Klasse schon" demnach auch nicht sinnvoll?

            Gruss
            Henry

            1. Hallo Henry,

              Dann wäre also Gunnars Ansicht "als id kein Zebra, als Klasse schon" demnach auch nicht sinnvoll?

              Nein, denn das wäre ein präsentationsbezogener Klassenbezeichner. Den kann man verwenden, wenn es keinen inhaltlichen Grund für die vorgenommene Gestaltung gibt.

              Bis demnächst
              Matthias

              -- Rosen sind rot.
              1. Hallo Matthias,

                Dann wäre also Gunnars Ansicht "als id kein Zebra, als Klasse schon" demnach auch nicht sinnvoll?

                Nein, denn das wäre ein präsentationsbezogener Klassenbezeichner. Den kann man verwenden, wenn es keinen inhaltlichen Grund für die vorgenommene Gestaltung gibt.

                Jetzt bin ich verwirrt. Du schreibst "… Suchmaschinen zum Beispiel - kann anhand der Klasse oder ID Produktbeschreibung erkennen…"

                Also woran erkennt eine Suchmaschine, wenn ich <xy class="zebra">…</xy>, ob ich das präsentationsbezogen meine oder inhaltlich? Entweder ist class="zebra" falsch, wie du schreibst, oder richtig, wie Gunnar schreibt. Deshalb verwirrt mich deine Aussage.

                Gruss
                Henry

                1. Hallo Henry,

                  Jetzt bin ich verwirrt. Du schreibst "… Suchmaschinen zum Beispiel - kann anhand der Klasse oder ID Produktbeschreibung erkennen…"

                  Also woran erkennt eine Suchmaschine, wenn ich <xy class="zebra">…</xy>, ob ich das präsentationsbezogen meine oder inhaltlich? Entweder ist class="zebra" falsch, wie du schreibst, oder richtig, wie Gunnar schreibt. Deshalb verwirrt mich deine Aussage.

                  Suchmaschinen oder andere Programme, die den Quelltext einer Seite analysieren, „denken“ nicht präsentationsbezogen. Wenn sie eine Klasse Produktbeschreibung finden, gehen sie davon aus, dass da eine Produktbeschreibung drin ist. Finden sie eine Klasse zebra, gehen sie davon aus, dass es im Element um Zebras geht.

                  Deshalb auch class="error" statt class="großer_roter_Text".

                  Bis demnächst
                  Matthias

                  -- Rosen sind rot.
                  1. @@Matthias Apsel

                    Suchmaschinen oder andere Programme, die den Quelltext einer Seite analysieren, „denken“ nicht präsentationsbezogen. Wenn sie eine Klasse Produktbeschreibung finden, gehen sie davon aus, dass da eine Produktbeschreibung drin ist. Finden sie eine Klasse zebra, gehen sie davon aus, dass es im Element um Zebras geht.

                    Wie gesagt glaube ich nichts davon.

                    Deshalb auch class="error" statt class="großer_roter_Text".

                    Nicht deshalb, aber dennoch.

                    LLAP 🖖

                    -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                    1. Hallo Gunnar Bittersmann,

                      Wie gesagt glaube ich nichts davon.

                      Für word-Dokumente wollen wir genau sowas umsetzen. Reginas Vorschlag scheint zielführend. Natürlich könnte man auch mit x-beliebigen (ge-uglyfier-ten) Klassenbezeichnern arbeiten, aber es ist viel klüger, die Klassen nach dem Inhalt zu benennen.

                      Bis demnächst
                      Matthias

                      -- Rosen sind rot.
                      1. @@Matthias Apsel

                        aber es ist viel klüger, die Klassen nach dem Inhalt zu benennen.

                        Natürlich ist es das. Ich halte es nur nicht für klug, das mit Suchmaschinen begründen zu wollen.

                        LLAP 🖖

                        -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                  2. hallo

                    Suchmaschinen oder andere Programme, die den Quelltext einer Seite analysieren, „denken“ nicht präsentationsbezogen. Wenn sie eine Klasse Produktbeschreibung finden, gehen sie davon aus, dass da eine Produktbeschreibung drin ist. Finden sie eine Klasse zebra, gehen sie davon aus, dass es im Element um Zebras geht.

                    Ich überlege jetzt noch, welchen Teil deiner Antwort ich als Zitat vorschlagen soll.

          2. Jemand der maschinell den Quelltext liest - Suchmaschinen zum Beispiel -

            In welcher Welt lebe ich …

          3. @@Matthias Apsel

            Jemand der maschinell den Quelltext liest - Suchmaschinen zum Beispiel - kann anhand der Klasse oder ID Produktbeschreibung erkennen, dass das entsprechende Element eine Produktbeschreibung enthält.

            Nein, ich glaube nicht, dass eine Suchmaschine der Benennung einer ID oder Klasse eine Bedeutung zumisst. Es sei denn, es wären der Suchmaschine bekannte Microformat-Bezeichner:

            <div class="h-product"> <div class="p-name"></div> <div class="e-description"></div> </div>

            Ansonsten geht Maschinenlesbarkeit so:

            <div vocab="http://schema.org/" typeof="Product"> <div property="name"></div> <div property="description"></div> </div>

            LLAP 🖖

            -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann

            Folgende Nachrichten verweisen auf diesen Beitrag:

          4. Nicht, wenn es um Zebras geht.

  2. Hallo

    Folgendes zu Ebay:

    Für die eigenen Angaben im Angebot ist CSS ausdrücklich erlaubt und erwünscht. Dieses kann intern oder extern eingebunden werden. Das CSS darf sich nur nicht auf die Inhalte von Ebay selbst auswirken.

    Direkt verboten sind seit 2017 JavaScript und andere aktive Inhalte. Dies dient dem Käuferschutz und soll verhindern, dass Angebote während der Laufzeit oder danach noch verändert werden. Zudem wird so in der Regel die Zeit zum Seitenaufbau vermindert.

    Auch ab 2017 verlangt Ebay von gewerblichen Händlern für ihre Angebote ein Responsive Design. Übersetzt: Die haben die Schnauze voll von veralteten Lösungen wie Tabellendesigns wie von iloveHTML (ein seltsamer Name für seine nicht vorhandenen Kenntnisse).

    Um gewerbliche Händler mit veralteten Designs unter Druck zu setzen werden Angebote mit Responsive Designs gegenüber starren Designs bevorzugt. Heißt: Angebote mit veralteten Designs landen in Rankings weiter hinten und werden von weniger Interesssenten gefunden.

    Siehe zum Beispiel

    Neue Ebay-Regeln ab / seit 2017

    Eventuell auf den Button "Gewerblich" klicken. In dem Artikel wird auch näher erklärt, was Ebay unter aktiven Inhalten versteht.

    Die Angabe

    verpönt hin oder her, es gibt alte Dokumente und Vorgaben, die erlauben es nicht anders

    ist aus Ebay-Sicht damit vollkommener Unsinn.

    Gruss

    MrMurphy

    1. Hallo

      Als Freund der Praxis habe ich aus dem Angebot von iloveHTML mal ein ebaykonformes responsives Beispielangebot erstellt. Mein Hauptgedanke ist dabei wie immer die Benutzerfreundlichkeit.

      Responsives Ebay Beispielangebot

      Das main-Element enthält den gesamten HTML-Quelltext für ein konkretes Ebay-Angebot. Das CSS ist noch im head-Bereich ausgelagert. Die beiden Möglichkeiten für den Einbau bei Ebay habe ich aber im Quelltext des main-Elements vorgesehen.

      Gruss

      MrMurphy

  3. @@iloveHTML

    Nun möchte ich nur EINE Tabelle […] als Zebrastreifentabelle formatieren.

    Im A-List-Apart-Artikel Web Typography: Designing Tables to be Read, Not Looked At rät der Autor Richard Rutter im Abschnitt Do not over-stylise tables davon ab, Tabellenzeilen mit Hintergrundfarben zu versehen. Also auch keine Zebrastreifen zu verwenden, die keinen nennenswerten Vorteil bringen:

    “This experiment yielded no evidence that zebra striping consistently improves the accuracy or speed of tasks. This would seem to suggest that we shouldn’t bother with zebra striping anymore.”
    —Jessica Enders, Zebra Striping: Does it Really Help?, Abschnitt So there’s no point in zebra striping?

    Zebrastreifen stellen gleichberechtigte Inhalte unterschiedlich dar, heben also manche gegenüber anderen unberechtigt hervor. Sollte man sich überlegen, ob man das will.

    LLAP 🖖

    -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann

    Folgende Nachrichten verweisen auf diesen Beitrag:

    1. Hallo,

      Zebrastreifen stellen gleichberechtigte Inhalte unterschiedlich dar, heben also manche gegenüber anderen unberechtigt hervor. Sollte man sich überlegen, ob man das will.

      es kommt auf die Tabelle drauf an. Die um die es hier geht, ist ja eigentlich bloß ne Liste, bei der Zebrastreifen keinen Mehrwert haben. Ist die Tabelle dagegen vielspaltig, finde ich Zeilenfärbung hilfreich.

      Gruß
      Kalk

      1. @@Tabellenkalk

        Ist die Tabelle dagegen vielspaltig, finde ich Zeilenfärbung hilfreich.

        Warum? Welchen Mehrwert bringt die Farbe, den horizontale Trennlinien nicht schon bieten?

        LLAP 🖖

        -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. Hallo,

          Warum? Welchen Mehrwert bringt die Farbe, den horizontale Trennlinien nicht schon bieten?

          Wenn man vom Anfang der Zeile rüber zum Ende springt, ist es einfacher, in der richtigen Zeile zu bleiben. Trennlinien trennen jede Zeile, sagen mir aber nicht, ob es die richtige war.
          Seh ich am Anfang den farbig hinterlegten Eintrag, weiß ich, ich darf am Ende nicht die weiße Zeile auslesen…

          Gruß
          Kalk

          Folgende Nachrichten verweisen auf diesen Beitrag:

          1. hallo

            Warum? Welchen Mehrwert bringt die Farbe, den horizontale Trennlinien nicht schon bieten?

            Wenn man vom Anfang der Zeile rüber zum Ende springt, ist es einfacher, in der richtigen Zeile zu bleiben. Trennlinien trennen jede Zeile, sagen mir aber nicht, ob es die richtige war.
            Seh ich am Anfang den farbig hinterlegten Eintrag, weiß ich, ich darf am Ende nicht die weiße Zeile auslesen…

            Noch einfacher wäre es, auf Verlangen eine Liste eines Datensatzes zu präsentieren, falls der Kontext dies erlaubt.

        2. hallo

          @@Tabellenkalk

          Ist die Tabelle dagegen vielspaltig, finde ich Zeilenfärbung hilfreich.

          Warum? Welchen Mehrwert bringt die Farbe, den horizontale Trennlinien nicht schon bieten?

          LLAP 🖖

          Ich denke, die Idee der Zebrastreifen stammt aus einer Zeit der statischen Dokumente. Im interaktiven Design gibt es immer bessere Lösungen als lange Tabellenzeilen.

          Ich weiss aber, dass mein Finanzbeamter definitiv klare Trennlinien in PDF-Tabellen bevorzugt, und kein Fan von Farben ist.

          Im interaktiven Design darf man sich auch überlegen, den Inhalt (potentiell umfangreicher) Tabellenzeile per Button als Liste in einem Popup zu präsentieren.

          -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        3. Hallo Gunnar,

          Warum? Welchen Mehrwert bringt die Farbe, den horizontale Trennlinien nicht schon bieten?

          Es sieht ästhetischer aus. Aber das Thema Design hatten wir ja schon mal… 😉

          Was deinen Link betrifft, so schreibt er doch nur, wenn ich es richtig verstanden habe, dass man es nicht übertreiben sollte und am Ende die Tabelle wie ein Spreadsheet aussieht. Zumal er ja bei seinen Tabellen ebenfalls Zebradesign wählt, was sagst du denn dazu?

          Gruss
          Henry

    2. Hallo Gunnar Bittersmann,

      Zebrastreifen stellen gleichberechtigte Inhalte unterschiedlich dar, heben also manche gegenüber anderen unberechtigt hervor. Sollte man sich überlegen, ob man das will.

      Dezente Zebrastreifen tun das nicht, sondern sie führen das Auge in umfangreichen Tabellen.

      Bis demnächst
      Matthias

      -- Rosen sind rot.
      1. @@Matthias Apsel

        Zebrastreifen stellen gleichberechtigte Inhalte unterschiedlich dar, heben also manche gegenüber anderen unberechtigt hervor. Sollte man sich überlegen, ob man das will.

        Dezente Zebrastreifen tun das nicht, sondern sie führen das Auge in umfangreichen Tabellen.

        Auch dezente Zebrastreifen stellen gleichberechtigte Inhalte unterschiedlich dar. (Es sei denn, sie wären sooo dezent … dass sie gar keine Zebrastreifen mehr wären.)

        Auch bei weiß und sehr hellem Blau könnte man sich fragen, warum manche Zeilen blau hervorgehoben sind.

        LLAP 🖖

        -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. Hallo,

          Auch bei weiß und sehr hellem Blau könnte man sich fragen, warum manche Zeilen blau hervorgehoben sind.

          Und die Antwort darauf wäre: Bessere Orientierung für den Nutzer.

          Gruß
          Kalk

          1. hallo

            Auch bei weiß und sehr hellem Blau könnte man sich fragen, warum manche Zeilen blau hervorgehoben sind.

            Und die Antwort darauf wäre: Bessere Orientierung für den Nutzer.

            Der Nutzen von Tabellen verlangt aber die Implementation des Moduls Autismus.

            1. Hallo,

              Der Nutzen von Tabellen verlangt aber die Implementation des Moduls Autismus.

              Nein

              Gruß
              Kalk

        2. Hallo Gunnar Bittersmann,

          Zebrastreifen stellen gleichberechtigte Inhalte unterschiedlich dar, heben also manche gegenüber anderen unberechtigt hervor. Sollte man sich überlegen, ob man das will.

          Dezente Zebrastreifen tun das nicht, sondern sie führen das Auge in umfangreichen Tabellen.

          Auch dezente Zebrastreifen stellen gleichberechtigte Inhalte unterschiedlich dar. (Es sei denn, sie wären sooo dezent … dass sie gar keine Zebrastreifen mehr wären.)

          Ja, sie stellen Sie unterschiedlich dar. Ja, sie heben manche gegenüber anderen hervor. Aber sie heben andere auch gegenüber manchen hervor.

          Bis demnächst
          Matthias

          -- Rosen sind rot.
        3. Hallo Gunnar Bittersmann,

          Auch dezente Zebrastreifen stellen gleichberechtigte Inhalte unterschiedlich dar. (Es sei denn, sie wären sooo dezent … dass sie gar keine Zebrastreifen mehr wären.)

          Bei meiner (gedruckten) TAN-Liste in Tabellenform („Geben Sie bitte die TAN R1 ein“) möchte ich auf die gar nicht so dezenten Zebrastreifen nicht verzichten.

          Bis demnächst
          Matthias

          -- Rosen sind rot.
    3. Hi,

      Im A-List-Apart-Artikel Web Typography: Designing Tables to be Read, Not Looked At rät der Autor Richard Rutter im Abschnitt Do not over-stylise tables davon ab, Tabellenzeilen mit Hintergrundfarben zu versehen. Also auch keine Zebrastreifen zu verwenden, die keinen nennenswerten Vorteil bringen:

      Lustigerweise verwendet er sie selbst in den meisten Beispielen in den anderen Abschnitten. Und das ist auch gut so, denn die wären sonst schwerer zu lesen, weil er auch keine borders verwendet.

      Auch dem empfohlenen Verzicht auf vertikale Linien stimme ich nicht zu ("Tables without vertical rules look better."). Die Tabelle mit den Video-Standards ist absolut furchtbar zu lesen, weil diese fehlen (und weil zusammenhängende Daten über mehrere Zellen verteilt sind um das Alignment zu erreichen, obwohl er im Text nur von CSS spricht und den Fallback, den er selbst verwendet, gar nicht erwähnt).

      Im letzten Absatz zeigt er eine Tabelle, die tatsächlich "ohne alles" am besten aussieht. Bei der bilden die einzelnen Datenzellen auch hinreichend einheitliche optische Blöcke, worauf ich mich im allgemeinen eher nicht verlassen würde.

      Insgesamt muss ich sagen, dass ich von alistapart bessere Artikel gewohnt bin ...

      “This experiment yielded no evidence that zebra striping consistently improves the accuracy or speed of tasks. This would seem to suggest that we shouldn’t bother with zebra striping anymore.”
      —Jessica Enders, Zebra Striping: Does it Really Help?, Abschnitt So there’s no point in zebra striping?

      Und das ist schon etwas aus dem Kontext gerissen (und die Formulierung "would seem" kündigt auch schon ein großes Aber an). Weiter schreibt sie nämlich, dass aus der Studie keine klare Empfehlung folgt, weil die Streifen vielen Leuten gefallen und die Lesbarkeit für niemanden verschlechtern.

      Ich finde Tabellen mit Streifen auch besser zu lesen, aus dem gleichen Grund wie Tabellenkalk. Vor allem, wenn ich quer scrollen muss.

      Viele Grüße vom Schnabeltier