Hansi: Spalte unterschiedlich definieren

Hallo Leute

ich habe ein Problem...

Ich möchte einer zweispaltigen Tabelle zwei Klassen zuweisen.
In der ersten Spalte soll der Text z.B. kursiv und in der zweiten Spalte der Text bold geschrieben werden.

Wie kann ich es so definieren, dass ich nicht in jeder Zeile immer wieder die class einfügen muss? ...ist das möglich

momentan hat die tabelle zwanzig zeilen und es ist ziemlich nervig wenn es so aussieht:

<table>
  <tr>
    <td class="steckbrieflinks">Name: </td>
    <td class="normal">Julia</td>
  </tr>
  <tr>
    <td class="steckbrieflinks">Geschlecht:</td>
    <td class="normal">weiblich</td>
    <td><img src="/julia.jpg"/></td>
  </tr>
  <tr>
    <td class="steckbrieflinks">Geburtsort:</td>
    <td class="normal">Bremen</td>
  </tr>
  <tr>

....usw...

könnt ihr mir weiterhelfen? ...vielen Dank
Hansi

  1. Hi,

    Wie kann ich es so definieren, dass ich nicht in jeder Zeile immer wieder die class einfügen muss? ...ist das möglich

    http://selfhtml.teamone.de/html/tabellen/aufbau.htm#vordefinieren

    Cheatah

    --
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hallo Cheatah,

      Wie kann ich es so definieren, dass ich nicht in jeder Zeile immer wieder die class einfügen muss? ...ist das möglich
      http://selfhtml.teamone.de/html/tabellen/aufbau.htm#vordefinieren

      In welchen Browsern funktionieren CSS-Eigenschaften, außer Breite, für COL-Elemente? Im NN7.0 und Opera6.05 jedenfalls nicht.

      viele Grüße

      Axel

      1. Hi,

        In welchen Browsern funktionieren CSS-Eigenschaften, außer Breite, für COL-Elemente? Im NN7.0 und Opera6.05 jedenfalls nicht.

        ehrlich gesagt habe ich es noch nirgendwo probiert; aber es ist _der_ (lies: der einzige) definierte Weg für das genannte Problem.

        Cheatah

        --
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
        1. Hallo,

          In welchen Browsern funktionieren CSS-Eigenschaften, außer Breite, für COL-Elemente? Im NN7.0 und Opera6.05 jedenfalls nicht.

          ehrlich gesagt habe ich es noch nirgendwo probiert; aber es ist _der_ (lies: der einzige) definierte Weg für das genannte Problem.

          Ja, das denke ich auch. Allerdings scheint die Gecko-Engine das nicht zu wissen. Das Folgende kann jedenfalls nur der IE ab Version 5 (4 habe ich nicht getestet).

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                  "http://www.w3.org/TR/html4/strict.dtd">
          <html>
          <head>
          <title>CSS in COL</title>
          </head>
          <body>
          <table border="1">
          <colgroup>
           <col style="font-style:italic; width:100px;">
           <col style="font-weight:bold; width:100px;">
          </colgroup>
          <tr>
           <td>links</td>
           <td>rechts</td>
          </tr>
          <tr>
           <td>links</td>
           <td>rechts</td>
          </tr>
          </table>
          </body>
          </html>

          viele Grüße

          Axel

          1. Hallo Axel

            In welchen Browsern funktionieren CSS-Eigenschaften, außer Breite, für COL-Elemente? Im NN7.0 und Opera6.05 jedenfalls nicht.

            ehrlich gesagt habe ich es noch nirgendwo probiert; aber es ist _der_ (lies: der einzige) definierte Weg für das genannte Problem.

            Leider hat Cheatah wohl recht mit dem einzigen möglichen Weg, um Spalten unterschiedlich zu formatieren.

            Und Du dürftest auch recht haben, mit den COL-Elementen kann NN 7.1/Mozilla 1.4 nichts anfangen.

            Wenn Du willst, dann sieh Dir mal die beiden Tabellen an:
            http://www.eschiener.de/januar1.html
            (Eine Variante für NN und eine Variante für den IE 5.5)
            http://www.eschiener.de/februar.html
            (nur eine Variante, im IE 5.5 werden die Spalten farbig dargestellt, im NN 7.1/Mozilla 1.4 nicht).

            Zur Zeit muss man wohl oder übel jede Zelle einzeln mit CSS formatieren, ich hab  bisher keine andere Lösung gefunden.

            Grüsse aus Neubrandenburg
            erika

            --
            Hauptsache dem Hund geht's gut
            1. Hallo Erika,

              Zur Zeit muss man wohl oder übel jede Zelle einzeln mit CSS formatieren, ich hab  bisher keine andere Lösung gefunden.

              Nö. Mit Trick 17 (siehe MudGuard) gehts schon:

              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                      "http://www.w3.org/TR/html4/strict.dtd">
              <html>
              <head>
              <title>CSS in COL</title>
              <style type="text/css">
              <!--
              /*CSS für Gecko*/
              #example tr>td {font-style:italic; background-color:#FF7D7B;}
              #example tr>td+td {font-style:normal; font-weight:bold; background-color:#00AEAD;}
              -->
              </style>
              </head>
              <body>
              <table border="1" id="example">
              <colgroup>
                                      <!--Das interpretiert der IE-->
               <col width="100" style="font-style:italic; background-color:#FF7D7B;">
               <col width="100" style="font-weight:bold; background-color:#00AEAD;">
              </colgroup>
              <tr>
               <td>links</td>
               <td>rechts</td>
              </tr>
              <tr>
               <td>links</td>
               <td>rechts</td>
              </tr>
              </table>
              </body>
              </html>

              viele Grüße

              Axel

              1. Nö. Mit Trick 17 (siehe MudGuard) gehts schon:

                <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                        "http://www.w3.org/TR/html4/strict.dtd">
                <html>
                <head>
                <title>CSS in COL</title>
                <style type="text/css">
                <!--
                /*CSS für Gecko*/
                #example tr>td {font-style:italic; background-color:#FF7D7B;}
                #example tr>td+td {font-style:normal; font-weight:bold; background-color:#00AEAD;}
                -->
                </style>
                </head>
                <body>
                <table border="1" id="example">
                <colgroup>
                                        <!--Das interpretiert der IE-->
                 <col width="100" style="font-style:italic; background-color:#FF7D7B;">
                 <col width="100" style="font-weight:bold; background-color:#00AEAD;">
                </colgroup>
                <tr>
                 <td>links</td>
                 <td>rechts</td>
                </tr>
                <tr>
                 <td>links</td>
                 <td>rechts</td>
                </tr>
                </table>
                </body>
                </html>

                Hi,
                in Opera 7.11 haut der Quelltext aber auch nicht so 100%ig hin...
                cu
                Hansi
                hab es mal hochgeladen
                unter: http://www.hans-hoevermann.de/julia/test.html

                1. Hallo,

                  in Opera 7.11 haut der Quelltext aber auch nicht so 100%ig hin...

                  Komisch, Opera6.05 konnte es noch ;-))
                  Was macht der Oper-Browser denn nicht richtig?

                  viele Grüße

                  Axel

                  1. Hallo,

                    in Opera 7.11 haut der Quelltext aber auch nicht so 100%ig hin...
                    Komisch, Opera6.05 konnte es noch ;-))
                    Was macht der Oper-Browser denn nicht richtig?

                    Nachdem ich nun stolzer Besitzer eines Opera7.2 bin, kann ich sagen: Er mag den HTML-Kommentar innerhalb von COLGROUP nicht. Ohne diesen Kommentar macht er das, was IE auch macht. Warum? Frag David M. Gay.

                    viele Grüße

                    Axel

                    1. Hallo,

                      in Opera 7.11 haut der Quelltext aber auch nicht so 100%ig hin...
                      Komisch, Opera6.05 konnte es noch ;-))
                      Was macht der Oper-Browser denn nicht richtig?

                      Nachdem ich nun stolzer Besitzer eines Opera7.2 bin, kann ich sagen: Er mag den HTML-Kommentar innerhalb von COLGROUP nicht. Ohne diesen Kommentar macht er das, was IE auch macht. Warum? Frag David M. Gay.

                      viele Grüße

                      Axel

                      Höchst merkwürdig!
                      Das ist echt ein Kack mit den tausend verschiedenen Browsern...
                      irgend eine Idee wie man das lösen könnte?

                      1. Hi,

                        Das ist echt ein Kack mit den tausend verschiedenen Browsern...
                        irgend eine Idee wie man das lösen könnte?

                        das ist doch klar: <Wochenshow> Wir fluten Holland. </Wochenshow>

                        Im Grunde kann man nur versuchen, möglichst standardkonforme Seiten zu bauen, und dafür zu sorgen, dass die Hersteller solcher Browser, die mit den Seiten Probleme haben, darauf aufmerksam werden - bzw. darauf, dass die Öffentlichkeit darauf aufmerksam geworden ist. Die Presse ist hierzu ein wichtiges Instrument.

                        Cheatah

                        --
                        X-Will-Answer-Email: No
                        X-Please-Search-Archive-First: Absolutely Yes
                      2. Hallo,

                        Nachdem ich nun stolzer Besitzer eines Opera7.2 bin, kann ich sagen: Er mag den HTML-Kommentar innerhalb von COLGROUP nicht. Ohne diesen Kommentar macht er das, was IE auch macht. Warum? Frag David M. Gay.

                        Höchst merkwürdig!
                        Das ist echt ein Kack mit den tausend verschiedenen Browsern...
                        irgend eine Idee wie man das lösen könnte?

                        Was? Das konkrete Problem? Ja, nimm einfach den Kommentar weg.
                        Statt:

                        <colgroup>
                                                <!--Das interpretiert der IE-->
                         <col width="100" style="font-style:italic; background-color:#FF7D7B;">
                         <col width="100" style="font-weight:bold; background-color:#00AEAD;">
                        </colgroup>

                        also

                        <colgroup>
                         <col width="100" style="font-style:italic; background-color:#FF7D7B;">
                         <col width="100" style="font-weight:bold; background-color:#00AEAD;">
                        </colgroup>

                        dann geht's.

                        Das allgemeine Problem mit den unterschiedlichen Browsern? Nein, das ist einer der Nachteile des Wettbewerbs. Hätte man nur einen Monopol-Browser, brauchte man nur _dessen_ Bugs berücksichtigen ;-))

                        Das sollte dann allerdings der mit den wenigsten Bugs sein. Leider ist hierbei, wie oft, die Realität vom Optimum weit entfernt ;-))

                        viele Grüße

                        Axel

              2. Guten Morgen Axel,

                Zur Zeit muss man wohl oder übel jede Zelle einzeln mit CSS formatieren, ich hab  bisher keine andere Lösung gefunden.

                Nö. Mit Trick 17 (siehe MudGuard) gehts schon:....

                Na also, es geht doch! Das ist aber eine freudige Überraschung an diesem nebligen Novembermorgen!
                Danke an MudGuard und an Dich für Deine Tests.
                Demnächst will ich meine Website überarbeiten (es wird höchste Zeit!), da kommt mir dieser _Trick_ sehr gelegen.

                Grüsse aus Neubrandenguirg,
                erika

                --
                Hauptsache dem Hund geht's gut
        2. Hi,

          In welchen Browsern funktionieren CSS-Eigenschaften, außer Breite, für COL-Elemente? Im NN7.0 und Opera6.05 jedenfalls nicht.
          ehrlich gesagt habe ich es noch nirgendwo probiert; aber es ist _der_ (lies: der einzige) definierte Weg für das genannte Problem.

          Das stimmt aber nicht, daß dies der einzige definierte Weg ist.

          1. table bekommt eine id, z.B. example, damit nur die eine betroffen ist.
          2. per #example td wird die erste Spalte formatiert (genaugenommen: alle Spalten, die keine andere Formatierung erhalten)
          3. per #example  td+td wird die zweite Spalte formatiert (s.o., alle außer der ersten, die keine andere Formatierung erhalten)
          4. per #example tr td+td+td wird die dritte Spalte formatiert usw. (s.o., alle außer den ersten 2, die keine andere Formatierung erhalten)

          Opera und Mozilla verstehen das, IE -wie fast zu erwarten- nicht.
          Könnte man also geschickt mit der col-Formatierung kombinieren...

          Für CSS3 gibt es dann noch die ALternative über td:nth-child()
          (geht aber derzeit in keinem mir bekannten Browser)

          cu,
          Andreas

          --
          Der Optimist: Das Glas  ist halbvoll.  - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
          http://mud-guard.de/? http://www.andreas-waechter.de/ http://www.helpers.de/
          1. Hi,

            Das stimmt aber nicht, daß dies der einzige definierte Weg ist.

            Du hast Recht, man kann natürlich mit nth-child() bzw. Ähnlichem arbeiten. Daran hatte ich in der Tat nicht gedacht.

            1. per #example  td+td wird die zweite Spalte formatiert

            Und die folgenden Spalten ebenfalls, weil der Selektor ebenfalls auf sie zutrifft. "#example td:first-child + td" wäre die Alternative für CSS/2.0-taugliche Clients.

            Opera und Mozilla verstehen das, IE -wie fast zu erwarten- nicht.

            Natürlich nicht, es wurde ja erst anno 1998 definiert ;-)

            Für CSS3 gibt es dann noch die ALternative über td:nth-child()
            (geht aber derzeit in keinem mir bekannten Browser)

            Leider, nicht mal mit Mozilla. Nun ja, CSS/3.0 ist ja auch noch nicht offiziell verabschiedet ...

            Cheatah

            --
            X-Will-Answer-Email: No
            X-Please-Search-Archive-First: Absolutely Yes
            1. Hallo Cheatah,

              Opera und Mozilla verstehen das, IE -wie fast zu erwarten- nicht.

              Natürlich nicht, es wurde ja erst anno 1998 definiert ;-)

              Und wie lange gibt es COL-Elemente schon? Oder was spricht _gegen_ das Interpretieren von CSS in diesen Elementen? Anders gefragt: Nicht alles, was der IE macht _muss_ falsch sein, _muss_ es?

              viele Grüße

              Axel

              1. Hi,

                Opera und Mozilla verstehen das, IE -wie fast zu erwarten- nicht.
                Natürlich nicht, es wurde ja erst anno 1998 definiert ;-)
                Und wie lange gibt es COL-Elemente schon? Oder was spricht _gegen_ das Interpretieren von CSS in diesen Elementen? Anders gefragt: Nicht alles, was der IE macht _muss_ falsch sein, _muss_ es?

                falls Du darauf bestehst, die augenscheinliche Tatsache auch explizit zu hören: Es ist ein Bug in Mozilla. Die Unfähigkeit des IE, seit satten fünfeinhalb Jahren bestehende Standards wenigstens ansatzweise zu nutzen, ist lediglich ein sehr[1] viel häufiger Gegenstand von Workarounds bzw. Feature-Auslassungen seiendes Problem.

                Cheatah

                [1] _Sehr_.

                --
                X-Will-Answer-Email: No
                X-Please-Search-Archive-First: Absolutely Yes
                1. Hallo,

                  falls Du darauf bestehst, die augenscheinliche Tatsache auch explizit zu hören: Es ist ein Bug in Mozilla.

                  Das mag sein. Es mag auch sein, dass die Spezifikation des COL-Elements nicht so eindeutig ist. Steht es nun _für_ eine _Spalte_ oder dient es nur der Vordefinition der _Spaltenbreiten_?

                  Opera und Mozilla verstehen das, IE -wie fast zu erwarten- nicht.
                  Natürlich nicht, es wurde ja erst anno 1998 definiert ;-)

                  Das hörte sich allerdings so an, als ob wieder _nur_ der IE das Problem ist, also COL-Elemente für so etwas ungeeignet wären. Das wollte ich abklären.

                  viele Grüße

                  Axel

                  1. Hi,

                    Es mag auch sein, dass die Spezifikation des COL-Elements nicht so eindeutig ist.

                    das sehe ich nicht so. Aus http://www.w3.org/TR/html401/struct/tables.html#edef-COL:

                    "The COL element allows authors to group together attribute specifications for table columns."

                    Nirgendwo wird irgendwas auf Breiten reduziert, IMHO kann man das kaum missverstehen. Daher sehe ich es als Bug in Mozilla an (Bug auch im Sinne von "nicht implementiertes Feature", also im Sinne von Bugzilla-Einträgen).

                    Opera und Mozilla verstehen das, IE -wie fast zu erwarten- nicht.
                    Natürlich nicht, es wurde ja erst anno 1998 definiert ;-)
                    Das hörte sich allerdings so an, als ob wieder _nur_ der IE das Problem ist, also COL-Elemente für so etwas ungeeignet wären. Das wollte ich abklären.

                    Naja, die Bemerkung bezog sich auf einen bestimmten CSS-Selektor, der im IE nicht geht, also nicht mehr auf <col>. Da waren wir also schon einen Schritt weiter ;-)

                    Cheatah

                    --
                    X-Will-Answer-Email: No
                    X-Please-Search-Archive-First: Absolutely Yes
                2. Hallo Cheatah,

                  ...ist lediglich ein sehr[1] viel häufiger Gegenstand von Workarounds bzw. Feature-Auslassungen seiendes Problem.

                  haeufiger_ER_ *SCNR*

                  David Schneider

                  --
                  Hat jemand meine Signatur gesehen?
            2. Hi,

              1. per #example  td+td wird die zweite Spalte formatiert
                Und die folgenden Spalten ebenfalls, weil der Selektor ebenfalls auf sie zutrifft.

              Cool. Einfach das Zitat abschneiden und dann genau das einwenden, was im jetzt fehlenden Teil auch schon stand...

              Opera und Mozilla verstehen das, IE -wie fast zu erwarten- nicht.
              Natürlich nicht, es wurde ja erst anno 1998 definiert ;-)

              Eben. ;-)

              Für CSS3 gibt es dann noch die ALternative über td:nth-child()
              Leider, nicht mal mit Mozilla. Nun ja, CSS/3.0 ist ja auch noch nicht offiziell verabschiedet ...

              Naja, der Selektor-Teil ist ja immerhin schon eine Candidate Recommendation (und das auch schon 2 Jahre)
              Und ein paar Sachen daraus sind ja im Mozilla schon nutzbar, z.B.: [href$='.jpg'] [href^='http://'] usw.

              cu,
              Andreas

              --
              Der Optimist: Das Glas  ist halbvoll.  - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
              http://mud-guard.de/? http://www.andreas-waechter.de/ http://www.helpers.de/
              1. Hi,

                1. per #example  td+td wird die zweite Spalte formatiert
                  Und die folgenden Spalten ebenfalls, weil der Selektor ebenfalls auf sie zutrifft.
                  Cool. Einfach das Zitat abschneiden und dann genau das einwenden, was im jetzt fehlenden Teil auch schon stand...

                ich fand die Formulierung einfach nur nicht deutlich genug, sorry falls Du das missverstanden hast.

                Leider, nicht mal mit Mozilla. Nun ja, CSS/3.0 ist ja auch noch nicht offiziell verabschiedet ...
                Naja, der Selektor-Teil ist ja immerhin schon eine Candidate Recommendation (und das auch schon 2 Jahre)

                Deswegen kann Mozilla ja auch schon das meiste davon :-) Dennoch, man kann es IMHO niemandem vorwerfen, wenn etwas nicht umgesetzt wird, was de facto (noch) kein Standard ist. Sehr wohl kann man es jedoch vorwerfen, wenn ein hinreichend lange als solcher definierter Standard keine bzw. absolut minderwertige Unterstützung findet, wie CSS/2.x im IE - was ich auch mit Inbrunst tue *g*

                Und ein paar Sachen daraus sind ja im Mozilla schon nutzbar, z.B.: [href$='.jpg'] [href^='http://'] usw.

                Jupp! Und es macht Spaß, dies[1] zu nutzen. Nur verstehe ich nicht, warum :only-child noch nicht implementiert ist, zumal die Pseudoklasse synonym zum in Mozilla nutzbaren :first-child:last-child ist ...

                Cheatah

                [1] a[href^="mailto:"]:before { content:'Mail!'; } /* ;-) */

                --
                X-Will-Answer-Email: No
                X-Please-Search-Archive-First: Absolutely Yes
                1. Hi,

                  [1] a[href^="mailto:"]:before { content:'Mail!'; } /* ;-) */

                  a[href^='mailto:']:before { content:url('http://localhost/imgs/mail.png'); }
                  a[href^='https://']:before { content:url('http://localhost/imgs/lock.png'); }

                  a[href$='.pdf']:before { content:url('http://localhost/imgs/acrobat.png'); }
                  a[href$='.doc']:before { content:url('http://localhost/imgs/word.png'); }
                  a[href$='.excel']:before { content:url('http://localhost/imgs/excel.png'); }

                  ...

                  cu,
                  Andreas

                  --
                  Der Optimist: Das Glas  ist halbvoll.  - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
                  http://mud-guard.de/? http://www.andreas-waechter.de/ http://www.helpers.de/
                  1. Hi,

                    a[href$='.excel']:before { content:url('http://localhost/imgs/excel.png'); }

                    vertipppt: natürlich a[href$='.xls']

                    cu,
                    Andreas

                    --
                    Der Optimist: Das Glas  ist halbvoll.  - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
                    http://mud-guard.de/? http://www.andreas-waechter.de/ http://www.helpers.de/
                  2. Hi,

                    [1] a[href^="mailto:"]:before { content:'Mail!'; } /* ;-) */
                    a[href^='mailto:']:before { content:url('http://localhost/imgs/mail.png'); }

                    um genau zu sein ist es bei mir eine URL aus dem file-Protokoll, aber ansonsten ebenso - inklusive dem Dateinamen ;-)

                    a[href$='.pdf']:before { content:url('http://localhost/imgs/acrobat.png'); }

                    Ja, auch 'ne Variante. Ich bevorzuge es anders:

                    *[src*=".swf"], param[value*=".swf"] { display:none !important; }

                    Sehr nett ist auch:

                    a[href^="javascript:"][href*="open"]:before, a[onclick*="open"]:before, a[target="_blank"]:before { content:url(.../newwin.png); }

                    Interessant finde ich auch, dass man die Existenz von schlechtem Code nutzen kann, um die Konsequenzen der Farblehre Unmächtigen auszugleichen:

                    a font[color] { color:inherit !important; }

                    Man glaubt gar nicht, um wie viel lesbarer dadurch so manche Seite wird ...

                    Cheatah

                    --
                    X-Will-Answer-Email: No
                    X-Please-Search-Archive-First: Absolutely Yes
                  3. Hallo,

                    a[href^="mailto:"] [...]

                    ^...*

                    a[href$='.pdf'] [..:]

                    ^...*

                    Solche (*) Selektoren habe ich letztens noch für mein User-Stylesheet gesucht, aber auf offizieller Seite (http://www.w3.org/TR/REC-CSS2/selector.html) nichts gefunden. Wo kann ich solche und andere "Erweiterungen" einsehen?

                    Gruß Alex

                    --
                    http://www.google.de/search?hl=de&safe=off&q=Rechtschreibung+Standart
                    ss:) zu:} ls:} fo:| de:[ va:| ch:| sh:( n4:& rl:° br:& js:| ie:| fl:| mo:}
                    1. Hi,

                      Solche (*) Selektoren habe ich letztens noch für mein User-Stylesheet gesucht, aber auf offizieller Seite (http://www.w3.org/TR/REC-CSS2/selector.html) nichts gefunden.

                      kein Wunder, das ist ja auch CSS/3.0, nicht CSS/2.x :-)

                      Wo kann ich solche und andere "Erweiterungen" einsehen?

                      http://www.w3.org/TR/2001/CR-css3-selectors-20011113/

                      Cheatah

                      --
                      X-Will-Answer-Email: No
                      X-Please-Search-Archive-First: Absolutely Yes