Guest191218: Colspan und style width in Prozent

048

Colspan und style width in Prozent

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

            Danke...

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

Ich habe folgendes Problem: Wenn ich in einer Tabelle die Spalten mit einer style width in Prozent deklariere, funktioniert nach einem colspan Breite überhaupt nicht mehr. Aber mit dem HTML Attribut width funktioniert es. Kann mir bitte jemand dazu Hilfe geben?

  1. @@Guest191218

    Kann mir bitte jemand dazu Hilfe geben?

    Wenn du deine fragliche Seite verlinkst, gerne.

    LLAP 🖖

    -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  2. Ich habe folgendes Problem: Wenn ich in einer Tabelle die Spalten mit einer style width in Prozent deklariere, funktioniert nach einem colspan Breite überhaupt nicht mehr. Aber mit dem HTML Attribut width funktioniert es. Kann mir bitte jemand dazu Hilfe geben?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <style> body, p{ margin: 0 auto; } html, body { padding: 0; } div, table { border-collapse: collapse; table-layout: fixed; width:520.5pt; } table, td { border: 1px dashed grey; } </style> </head> <body contenteditable="false" > <table style="width=100%;" border="2" cellpadding="5"> <tr> <td style="width=25%;">&nbsp;</td> <td style="width=25%;">&nbsp;</td> <td style="width=20%;">&nbsp;</td> <td style="width=30%;">&nbsp;</td> </tr> <tr> <td style="width=25%;">&nbsp;</td> <td style="width=25%;">&nbsp;</td> <td style="width=20%;">&nbsp;</td> <td style="width=30%;">&nbsp;</td> </tr> <tr> <td style="width=25%;">&nbsp;</td> <td style="width=25%;">&nbsp;</td> <td colspan="2" >COLSPAN="2"</td> </tr> <tr> <td style="width=25%;">&nbsp;</td> <td style="width=25%;">&nbsp;</td> <td style="width=20%;">&nbsp;</td> <td style="width=30%;">&nbsp;</td> </tr> </table> <table width="100%"> <tr> <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> <td width="20%">&nbsp;</td> <td width="30%">&nbsp;</td> </tr> <tr> <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> <td width="20%">&nbsp;</td> <td width="30%">&nbsp;</td> </tr> <tr> <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> <td colspan="2" >COLSPAN="2"</td> </tr> <tr> <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> <td width="20%">&nbsp;</td> <td width="30%">&nbsp;</td> </tr> </table> </body> </html>
    1. hallo

      Ich habe folgendes Problem:

      <element style="property=value">

      ist immer ungültiges CSS.

      <element style="property:value">

      dürfte da schon korrekter sein.

      -- https://beat-stoecklin.ch/pub/index.html
    2. Moin,

      zuersteinmal bitte Code als Code einfügen und bisschen ordentlich formatieren.

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <style> body, p{ margin: 0 auto; } html, body { padding: 0; } div, table { border-collapse: collapse; table-layout: fixed; width:520.5pt;} table, td { border: 1px dashed grey; } </style> </head> <body contenteditable="false" > <table style="width=100%;" border="2" cellpadding="5"> <tr> <td style="width=25%;"> &nbsp; </td> <td style="width=25%;"> &nbsp; </td> <td style="width=20%;"> &nbsp; </td> <td style="width=30%;"> &nbsp; </td> </tr> <tr> <td style="width=25%;"> &nbsp; </td> <td style="width=25%;"> &nbsp; </td> <td style="width=20%;"> &nbsp; </td> <td style="width=30%;"> &nbsp; </td> </tr> <tr> <td style="width=25%;"> &nbsp; </td> <td style="width=25%;"> &nbsp; </td> <td colspan="2"> COLSPAN="2" </td> </tr> <tr> <td style="width=25%;"> &nbsp; </td> <td style="width=25%;"> &nbsp; </td> <td style="width=20%;"> &nbsp; </td> <td style="width=30%;"> &nbsp; </td> </tr> </table> <table width="100%"> <tr> <td width="25%"> &nbsp; </td> <td width="25%"> &nbsp; </td> <td width="20%"> &nbsp; </td> <td width="30%"> &nbsp; </td> </tr> <tr> <td width="25%"> &nbsp; </td> <td width="25%"> &nbsp; </td> <td width="20%"> &nbsp; </td> <td width="30%"> &nbsp; </td> </tr> <tr> <td width="25%"> &nbsp; </td> <td width="25%"> &nbsp; </td> <td colspan="2" > COLSPAN="2" </td> </tr> <tr> <td width="25%"> &nbsp; </td> <td width="25%"> &nbsp; </td> <td width="20%"> &nbsp; </td> <td width="30%"> &nbsp; </td> </tr> </table> </body> </html>

      als 2. hast du im Style-Attribut fälschlicherweise ein "=" statt ":" als Trenner zwischen Name und Wert eingesetzt

      richtig heißt es z.B.:

      <td style="width:20%;">

      thats all

      Gruß Bobby

      -- -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
      1. Danke für die prompte Unterstützung!

        1. @@Guest191218

          Danke für die prompte Unterstützung!

          Eine prompte Unterstützung ist nicht immer eine gute Unterstützung. Hier ist es keine gewesen. (Deshalb das Minus von mir.)

          Gute Unterstützung wäre gewesen zu sagen, sämtliche style-Attribute zu entsorgen (und die border- und cellpadding-Attribute gleich mit) und die Breiten der Spalten im Stylesheet anzugeben:

          td:nth-child(1), td:nth-child(2) { width: 25% } td:nth-child(3):not([colspan]) { width: 20% } td:nth-child(4) { width: 30% }

          (Das geht davon aus, dass colspan nur in der 3. Spalte vorkommt.)

          Es ist aber sicher keine gute Idee, dass so für alle Tabellen anzugeben. Also entweder der Tabelle eine ID (bzw. Klasse?) verpassen und die Zellen als Nachfahren selektieren: #this td:nth-child(1):not([colspan]) usw.

          Die Zellen mit :nth-child() zu selektieren ist aber auch nicht die beste Idee. Wenn nachträglich Spalten hinzukommen oder wegfallen oder deren Reihenfolge vertauscht wid, müsste man das Stylesheet ändern. Das vermeidet man, indem man den Spalten IDs gibt:

          <table> <colgroup> <col id="foo"/> <col id="bar"/> <col id="baz"/> <col id="quz"/> <colgroup> <tbody></tbody> </table>

          Die IDs sollten bei dir nicht foo, bar, baz, quz heißen, sondern nach dem jeweiligen Spalteninhalt benannt sein.

          Im Stylesheet dann:

          #foo, #bar { width: 25% } #baz { width: 20% } #quz { width: 30% }

          Außerdem noch anstelle der border- und cellpadding-Attribute sowas wie:

          td { border: thin solid gray; padding: 0.5em; }

          und vermutlich auch

          table { border-collapse: collapse }

          LLAP 🖖

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

            ...für die eindrucksvolle Erinnerung warum ich hier nicht mehr so oft mit schreibe und mich aktiv beteilige.

            Anstatt deine Hinweise als ERWEITERUNG hier kundzutun, was durchaus seine Berechtigung hat, diskreditierst du meinen ersten Hilfeversuch, um erstmal das Grundsätzliche zu klären und erstmal das angefragte Problem zu lösen als grundsätzlich falsch, was es definitiv nicht war.

            Also. Vielen Dank nochmal. Ich bin dann mal wieder weg und viel Spaß noch.

            Sorry, das musste ich einfach loswerden.

            Gruß Bobby

            -- -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
            1. @@bobby

              Anstatt deine Hinweise als ERWEITERUNG hier kundzutun,

              Meine Hinweise waren keine Erweiterung, sondern ein gänzlich anderer Ansatz.

              diskreditierst du meinen ersten Hilfeversuch

              Du hälst „kritisieren“ für „diskreditieren“? Hört sich ähnlich an, ist aber was anderes.

              um erstmal das Grundsätzliche zu klären und erstmal das angefragte Problem zu lösen als grundsätzlich falsch, was es definitiv nicht war.

              Ich sehe es als grundsätzlich falsch an zu sagen „ändere bei allen Tabellenzellen <td style="width= in <td style="width:.

              LLAP 🖖

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

                Anstatt deine Hinweise als ERWEITERUNG hier kundzutun,

                Meine Hinweise waren keine Erweiterung, sondern ein gänzlich anderer Ansatz.

                auch in diesem Fall könnte man im Umgangston anders agieren.

                diskreditierst du meinen ersten Hilfeversuch

                Du hälst „kritisieren“ für „diskreditieren“? Hört sich ähnlich an, ist aber was anderes.

                Nein. Ich mein schon diskreditieren. Das tust du damit, dass du meine Hilfe nieder machst. Du kannst deinen eigenen Standpunkt gern kundtun, dann aber bitte in einer vernünftigen Art und Weise. Es kann nicht jeder der gleichen Ansicht sein wie du!

                um erstmal das Grundsätzliche zu klären und erstmal das angefragte Problem zu lösen als grundsätzlich falsch, was es definitiv nicht war.

                Ich sehe es als grundsätzlich falsch an zu sagen „ändere bei allen Tabellenzellen <td style="width= in <td style="width:.

                Es ist nicht falsch, sondern wie du selbst bemerkt hast ein anderer Ansatz, den ich dir selbstredend nicht zugestehe. Du kannst nicht davon ausgehen, die einzige richtige Wahrheit zu kennen.

                Ich möchte nur, dass du da vielleicht mal kurz drüber nachdenkst, dass so ein Forum vielleicht auch das Zwischenmenschliche ausmacht und man doch etwas geschickter im Umgangston agieren kann.

                Danke für deine Aufmerksamkeit und nun bin ich wirklich weg. Ciao

                Gruß Bobby

                -- -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
                1. @@bobby

                  auch in diesem Fall könnte man im Umgangston anders agieren.

                  Was genau war denn für dich schlechter Umgangston?

                  1. „Angaben zur Darstellung gehören nicht ins HTML.“
                  2. „Du hättest sagen sollen: als 2. hast du fälschlicherweise ein Style-Attribut eingesetzt.“
                  3. „Und ganz übel ist es, das auch noch in jeder Tabellenzeile zu tun.“
                  4. „Eine prompte Unterstützung ist nicht immer eine gute Unterstützung.“

                  Nein. Ich mein schon diskreditieren. Das tust du damit, dass du meine Hilfe nieder machst.

                  Was für Hilfe? Du hast nichts dazu beigetragen, Guest191218 von dem Unsinn abzubringen, an jedes td-Element ein style-Attribut zu hängen.

                  Ich sehe es als grundsätzlich falsch an zu sagen „ändere bei allen Tabellenzellen <td style="width= in <td style="width:.

                  Es ist nicht falsch, sondern wie du selbst bemerkt hast ein anderer Ansatz, den ich dir selbstredend nicht zugestehe. Du kannst nicht davon ausgehen, die einzige richtige Wahrheit zu kennen.

                  Ich kann aber davon ausgehen, dass ein style-Attribut an jedes td-Element zu hängen unsinnig ist. Und ich erlaube mir, solchen Unsinn „falsch“ zu nennen.

                  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. Moin,

                    auch in diesem Fall könnte man im Umgangston anders agieren.

                    Was genau war denn für dich schlechter Umgangston?

                    Eine prompte Unterstützung ist nicht immer eine gute Unterstützung. Hier ist es keine gewesen. (Deshalb das Minus von mir.)

                    Hier hätte es sicher auch ein. "das ist grundsätzlich richtig, ABER...... (und hier deine Ausführungen) getan.

                    Nein. Ich mein schon diskreditieren. Das tust du damit, dass du meine Hilfe nieder machst.

                    Was für Hilfe? Du hast nichts dazu beigetragen, Guest191218von dem Unsinn abzubringen, an jedes td-Element ein style-Attribut zu hängen.

                    Es ging bei der Farge nicht darum den OP von etwas abzubringen, sondern erstmal grundsätzlich den Fehler zu erkennen, dass Name-Wert-Paare in CSS mit : getrennt werden

                    Ich sehe es als grundsätzlich falsch an zu sagen „ändere bei allen Tabellenzellen <td style="width= in <td style="width:.

                    Das stellte ich NIE in Abrede. Das ist ja auch korrekt.

                    Es ist nicht falsch, sondern wie du selbst bemerkt hast ein anderer Ansatz, den ich dir selbstredend nicht zugestehe. Du kannst nicht davon ausgehen, die einzige richtige Wahrheit zu kennen.

                    I kann aber davon ausgehen, dass ein style-Attribut an jedes td-Element zu hängen unsinnig ist. Und ich erlaube mir, solchen Unsinn „falsch“ zu nennen.

                    Auch das habe ich NIE in Abrede gestellt. Nur es stellt von der eigentliche Frage eine Erweiterung in der Antwort dar.

                    Aber gut jetzt. Ich hab keine Lust mich hier die ganze Zeit im Kreise zu drehen.

                    Lass es bitte gut sein und reflektiere mal bitte in einer ruhigen Minute.

                    Danke

                    Gruß Bobby

                    -- -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
                    1. @@bobby

                      Hier hätte es sicher auch ein. "das ist grundsätzlich richtig, ABER...... (und hier deine Ausführungen) getan.

                      Ich sage nicht „das ist grundsätzlich richtig“ zu etwas, was ich für grundsätzlich falsch halte.

                      Ich weiß, es gibt Gegenden, da gehört solche Verlogenheit zum guten Umgangston. Das ist aber nicht mein Kulturkreis; und darüber bin ich auch ganz froh.

                      Es ging bei der Farge nicht darum den OP von etwas abzubringen, sondern erstmal grundsätzlich den Fehler zu erkennen, dass Name-Wert-Paare in CSS mit : getrennt werden

                      Bei der Antwort muss es aber um mehr gehen.

                      Der Fragende bekommt gesagt : statt =, er bedankt sich für nichts und kommt nie wieder, hat aber nichts gelernt. Chance vertan. Und deshalb war deine Antwort schlecht (hoffentlich nicht nur IMHO).

                      LLAP 🖖

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

                        Ich weiß, es gibt Gegenden, da gehört solche Verlogenheit zum guten Umgangston. Das ist aber nicht mein Kulturkreis; und darüber bin ich auch ganz froh.

                        Das hat nichts mit Verlogenheit, sondern mit Respekt zu tun mein bester. Und daran mangelt es dir gerade.

                        Gruß Bobby

                        -- -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
                        1. @@bobby

                          Das hat nichts mit Verlogenheit, sondern mit Respekt zu tun mein bester. Und daran mangelt es dir gerade.

                          Zu sagen „grundsätzlich richtig“, wenn man das Gegenteil meint, ist nicht respektvoll, sondern verlogen. Jedenfalls in der Welt, in der ich lebe.

                          LLAP 🖖

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

                            Syntaktisch war es grundsätzlich richtig! Und dieses Argument kannst du nicht zerreden. Jeder Validator hätte das als OK angesehen und ist rein strukturell gesehen NICHT FALSCH! Das du weiter denkst ist ja auch in Ordnung.

                            Aber das war nicht gefragt und kann aber, und das betone ich zum wiederholten Male, natürlich ausgeführt werden!

                            Gruß Bobby

                            -- -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
                            1. @@bobby

                              Syntaktisch war es grundsätzlich richtig! Und dieses Argument kannst du nicht zerreden. Jeder Validator hätte das als OK angesehen

                              Dass das OK eines jeden Validators nicht über gutes HTML aussagt, hatten wir schon.

                              Aber das war nicht gefragt

                              Dass es nicht ausreicht, sich beim Antworten hinter „das war nicht gefragt“ zu verstecken, hatten wir auch schon.

                              LLAP 🖖

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

                                Ja, das hatten wir schon. Es ging nicht um gutes HTML sondern um die Frage warum die Style-Attribute des OP nicht verarbeitet wurden. Alles andere ist Zusatz.

                                Und wie du meinen weiteren Posts entnehmen dürftest, verstecke ich mich nicht, sonder erkenne deine Erweiterung an und sage, dass sie richtig ist!

                                Gruß Bobby

                                -- -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
                                1. @@bobby

                                  Es ging nicht um gutes HTML sondern …

                                  Hierin liegt das Missverständnis. Ich sage: Es geht bei Fragen zu HTML/CSS immer um gutes HTML. Auch wenn nicht geziehlt danach gefragt wird. Das kann der Fragende ja auch gar nicht, wie sollte er denn wissen, wonach er fragen müsste?

                                  Antworten, die dem Fragenden kein gutes HTML vermitteln, sind keine guten Antworten.

                                   

                                  Gebe ich hier immer gute Antworten? Wohl nicht. Aber ich jammer dann nicht rum, wenn mir jemand begründet, warum meine Antwort schlecht ist, sondern freue mich, dass dem Fragenden durch einer bessere Antwort als meine es war weitergeholfen wurde.

                                  LLAP 🖖

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

                                    Ich sage: Es geht bei Fragen zu HTML/CSS immer um gutes HTML.

                                    Und das spiegelt eben nur deine Meinung wieder.

                                    Gruß Bobby

                                    -- -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
                                    1. @@bobby

                                      Ich sage: Es geht bei Fragen zu HTML/CSS immer um gutes HTML.

                                      Und das spiegelt eben nur deine Meinung wieder.

                                      Von der ich doch hoffe, dass sie nicht nur meine ist wie du sie hier darstellst, sondern von den meisten hier geteilt wird. Ansonsten könnten wir das Forum gleich dicht machen.

                                      Im Übrigen hab ich das ausführlich begründet. Du hingegen hast nicht begründet, warum man deiner Meinung nach Fragende genauso unwissend wieder losschicken sollte wie sie hergekommen sind.

                                      LLAP 🖖

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

                                        Du hingegen hast nicht begründet, warum man deiner Meinung nach Fragende genauso unwissend wieder losschicken sollte wie sie hergekommen sind.

                                        Das habe ich nicht getan. Ich habe nun mehrfach betont, dass deine Ausführungen ihre Berechtigung haben! Man, willst du es nicht verstehen? Die Ausführungen sind wichtig, hätten eben nur ohne Diskreditierung geschehen sollen. Nicht der Inhalt ist fraglich, sondern die Art und Weise! Diese bemängel ich. Sonst NICHTS!

                                        Gruß Bobby

                                        -- -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
                                        1. @@bobby

                                          Du hingegen hast nicht begründet, warum man deiner Meinung nach Fragende genauso unwissend wieder losschicken sollte wie sie hergekommen sind.

                                          Das habe ich nicht getan.

                                          Doch, das hast du: „"=" statt ":" […] thats all“. Mit „Das ist alles, was ich dazu zu sagen habe“ schickst du den Fragenden genauso unwissend wieder los, ohne auf gutes HTML einzugehen.

                                          Das halte ich für grundverkehrt, und ich habe ich begründet, warum. Der weitere Threadverlauf dreht sich darum, dass ich das auch so nenne, anstatt da um den heißen Brei herumzureden.

                                          Nicht der Inhalt ist fraglich, sondern die Art und Weise! Diese bemängel ich. Sonst NICHTS!

                                          Ich sehe Ehrlichkeit nicht als Mangel an. Im Gegenteil, ich bewerte Ehrlichkeit höher als Rumschleimerei. YMMV.

                                          LLAP 🖖

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

                Du hälst „kritisieren“ für „diskreditieren“? Hört sich ähnlich an, ist aber was anderes.

                Kannst du die Hilfe, die das primäre Problem nicht einfach mal würdigen? Danach kannst du ja durchaus weitere Probleme erkennen und Lösungen anbieten.

                -- https://beat-stoecklin.ch/pub/index.html
                1. Moin,

                  Danke. genau das meine ich.

                  Gruß Bobby

                  -- -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
                2. @@beatovich

                  Kannst du die Hilfe, die das primäre Problem nicht einfach mal würdigen?

                  Nein. Was für Hilfe?

                  Das Mindeste wäre gewesen zu sagen: Ändere in der ersten Tabellenzeile = in : und entferne in allen folgenden Tabllenzeilen sämtliche style-Attribute.

                  Da hätte man dann als Ergänzung sagen können: Entferne auch in der ersten ersten Tabellenzeile sämtliche style-Attribute und schreib’s ins Stylesheet.

                  LLAP 🖖

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

                    Das Mindeste wäre gewesen zu sagen: Ändere in der ersten Tabellenzeile = in : und entferne in allen folgenden Tabllenzeilen sämtliche style-Attribute.

                    Nein. Das war nicht gefragt. Die Farge war, warum das sytle-Attribut nicht den gewünschten Erfolg bringt. Und dies brachte es eben nun mal nicht durch den Falschen Trenner von Name und Wert.

                    Alles was nach dem deinem "und" kommt, stellt eine Erweiterung dar. Die, um es nochmal deutlich zu sagen ja auch korrekt ist!

                    Gruß Bobby

                    -- -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
                    1. @@bobby

                      Das Mindeste wäre gewesen zu sagen: […]

                      Nein. Das war nicht gefragt.

                      Also wenn jemand fragt „Wie baue ich eine Bombe?“, dann lieferst du den Bauplan – ohne zu erwähnen, dass er die Bombe besser nicht zünden sollte, denn danach wurde ja nicht gefragt?

                      Und wenn jemand kommt und sagt, dass es falsch ist, Bomben zu bauen, dann bist du beleidigt, weil jemand deinen Bauplan diskreditiert?

                      LLAP 🖖

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

                        sorry. Das ist das dümmste Argument ever. Das ist so wie das Argument gegen Asylbewerber wo evtl. ein Attentäter drunter ist, die mit Gummibärchen verglichen werden. So in der Art: Würdest du die Gummibärchen essen wenn du wüsstest das da 1 oder 2 giftig ist.

                        Sorry. HTML ist weder Waffentechnik noch Rocketsience.

                        Gruß Bobby

                        -- -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
                        1. @@bobby

                          sorry. Das ist das dümmste Argument ever.

                          Begründung?

                          LLAP 🖖

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

                            Siehe meine Ausführungen nach dieser Feststellung.

                            Gruß Bobby

                            -- -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
                  2. hallo

                    @@beatovich

                    Kannst du die Hilfe, die das primäre Problem nicht einfach mal würdigen?

                    Nein.

                    Danke, das ist doch eine Ansage!

                    -- https://beat-stoecklin.ch/pub/index.html
                    1. @@beatovich

                      Kannst du die Hilfe, die das primäre Problem nicht einfach mal würdigen?

                      Nein.

                      Danke, das ist doch eine Ansage!

                      Das war ein aus dem Sinn gerissenes Zitat. Keinen Dank.

                      LLAP 🖖

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

        als 2. hast du im Style-Attribut fälschlicherweise ein "=" statt ":" als Trenner zwischen Name und Wert eingesetzt

        richtig heißt es z.B.:

        <td style="width:20%;">

        Nein. Richtig heißt es:

        <td>

        Angaben zur Darstellung gehören nicht ins HTML.

        Du hättest sagen sollen: als 2. hast du fälschlicherweise ein Style-Attribut eingesetzt.

        Und ganz übel ist es, das auch noch in jeder Tabellenzeile zu tun.

        LLAP 🖖

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

          Da gebe ich dir grundsätzlich recht. Es ist aber nicht "ganz falsch" auch wenn es kein guter Stil ist. Das wäre aber gültiger Code.

          Vorher war es definitiv "falsch" und UNGÜLTIG

          Das finde ich doch einen wichtigen Unterschied.

          Gruß Bobby

          -- -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
          1. @@bobby

            Es ist aber nicht "ganz falsch" auch wenn es kein guter Stil ist. Das wäre aber gültiger Code.

            Gültig ist bedeutungslos, wenn es kein guter Code ist.

            “Firstly, let’s reach a definition of ‘good’ HTML. Many DOWFs used to get very irked about (X)HTML being well-formed: proper closing tags, quoted attributes and the like. Those days are gone.
            —Bruce Lawson, The practical value of semantic HTML (Hervorhebung von mir)

            Jeder einzelnen Tabellenzelle per Inline-Style eine Breite zuzuweisen ist „ganz falsch“.

            Der Fragenden nicht darauf hinzuweisen ist auch „ganz falsch“.

            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. Moin,

              let’s reach a definition of ‘good’ HTML.

              Das ist es gerade. Du sprichst von "gutem" HTML, und ich von erstmal überhaupt gültigen! Damit habe ich im Umkehrschluss nicht davon gesprochen, dass es "gutes" HTML wäre.

              Gruß Bobby

              -- -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
              1. @@bobby

                let’s reach a definition of ‘good’ HTML.

                Das ist es gerade. Du sprichst von "gutem" HTML, und ich von erstmal überhaupt gültigen!

                Ich spreche von der Priorität in der Betrachtung. Erstmal geht es darum, ob der Code gut ist. Wenn er das nicht ist, ist es völlig irrelevant, ob er gültig ist.

                Wenn der Code gut ist, dann macht es überhaupt erst Sinn, die Gültigeit zu betrachten.

                LLAP 🖖

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

      Hilfe zum Syntax-Problem hast du erhalten.

      Für weitere Hilfe muss ich zuerst ein paar Fragen stellen.

      ~~~html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      Hat es einen speziellen Grund, diesen Doctype zu verwenden?

      • ja, der Verarbeiter erwartet dieses Format
      • nein, aber ich bin mir keiner anderen Möglichkeit bewusst

      <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">

      Hier fehlt ungeachtet des Doctypes eine Sprachangabe.

      > <table style="width=100%;" border="2" cellpadding="5"> > <tr> > <td style="width=25%;">&nbsp;</td> > <td style="width=25%;">&nbsp;</td> > <td style="width=20%;">&nbsp;</td> > <td style="width=30%;">&nbsp;</td> > </tr> > <tr> > <td style="width=25%;">&nbsp;</td> > <td style="width=25%;">&nbsp;</td> > <td style="width=20%;">&nbsp;</td> > <td style="width=30%;">&nbsp;</td> > </tr> > <tr> > <td style="width=25%;">&nbsp;</td> > <td style="width=25%;">&nbsp;</td> > <td colspan="2" >COLSPAN="2"</td> > > </tr> > <tr> > <td style="width=25%;">&nbsp;</td> > <td style="width=25%;">&nbsp;</td> > <td style="width=20%;">&nbsp;</td> > <td style="width=30%;">&nbsp;</td> > </tr> > </table>

      Dieser Code weckt in mir den Verdacht, dass die Tabelle für Layoutzwecke verwendet wird.

      • Ja, es handelt sich um eine Layout-Tabelle. Ich brauche Hilfe, wie man beliebige Inhalte in einem Grid darstellen kann ohne das table-Element zu verwenden.
      • Nein, es handelt sich um eine Daten-Tabelle. Ich brauche Hilfe, dass die Daten logisch dargestellt werden und auch von Screenreadern optimal vorgelesen werden.

      @@Gunnar Bittersmann

      PS: gute Hilfe beginnt manchmal mit Fragen, nicht mit Hilfe im falschen Kontext. Bitte würdige wo wir definitiv helfen können, und kritisiere uns nicht dafür, dass wir nicht ins Blaue schiessen.

      -- https://beat-stoecklin.ch/pub/index.html
      1. Hallo,

        Vorerst weg, ich bin kein HTML oder CSS Experte sondern Java Entwickler.

        Ich brauche die Tabelle für ein Layout, das später in ein PDF umgewandelt wird. Deshalb schreibe ich den Style auch direkt in die Zelle.

        Zum Punkt Doctype. Da kenne ich mich gar nicht aus. Ich brauche ein XHTML.

        Ich wäre über jede erdenkliche Dankbar!

        Meine Problem hat sich nicht gelöst.

        Beispiel für Layout:

        <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> body, p { margin: 0 auto; } mark { background-color: PaleTurquoise; color: black; font-size:8pt; line-height:10.83pt; } html, body { padding: 0; } table { border-collapse: collapse; table-layout: fixed; /* <TABLE> margin-left: 0pt; */ /* <TABLE> margin-right: 0pt; */ /* <TABLE> margin-top: 0pt; */ /* <TABLE> margin-bottom: 0pt; */ width:521.3pt; } table, td { border: 1px dashed grey; } table, td, p, span { font-size:8pt; line-height:10.83pt; font-family: "arial"; } .selected { background: lightBlue !important; } </style> <script type="text/javascript"> </script> </head> <body contenteditable="false" id="body" data-margin-left="13.0" data-margin-right="13.0" data-margin-top="17.0" data-margin-bottom="17.0" data-name="<Vorlage> (T-211218)" data-border-left="0.0" data-border-right="0.0" data-border-top="0.0" data-border-bottom="0.0" data-fs-header="false" data-fs-body="false" data-fs-footer="false"> <div id="div_1545386012552" data-name=""> <table id="header_table_1545386012552" contenteditable="true" data-columns="1" data-column-widths="521.3" data-type="header" hidden> <tbody> <tr id="tr_0_1545386012552" style="height:18.49pt;" data-row="0"> <td id="CELL_0_0_1545386012552" data-column="0" data-row="0" onclick="clicked(this);" oncontextmenu="clicked(this);" onmousemove="moved(this, event)" onmousedown="clicked(this);" style="width:521.3%;text-align:left;vertical-align:top;padding:2.83pt;"><p><span style="font-size:10pt;line-height:12.83pt;font-weight:bold;text-decoration:underline;">TEXT</span></p></td> </tr> </tbody> </table> <table contenteditable="true" id="table_1545386072087" data-columns="9" data-name="Zugversuch (ZV-R)" data-column-widths="56.72,45.25,68.08,36.91,34.09,73.61,73.71,73.71,59.22"> <tbody> <tr id="tr_0_1545386072087" style="height:28.5pt;" data-row="0"> <td id="CELL_0_0_1545386072088" data-column="0" data-row="0" onclick="clicked(this);" oncontextmenu="clicked(this);" onmousemove="moved(this, event)" onmousedown="clicked(this);" style="width:10.88%;text-align:left;vertical-align:top;padding:2.83pt;" colspan="9;" rowspan="1;" data-colspan-width="94.34pt;"></td> </tr> <tr id="tr_1_1545386072090" style="height:28.5pt;" data-row="1"> <td id="CELL_1_0_1545386072090" data-column="0" data-row="1" onclick="clicked(this);" oncontextmenu="clicked(this);" onmousemove="moved(this, event)" onmousedown="clicked(this);" style="width:10.88%;text-align:left;vertical-align:top;padding:2.83pt;" colspan="2;" rowspan="1;" data-colspan-width="13.9pt;"></td> <td id="CELL_1_2_1545386072090" data-column="2" data-row="1" onclick="clicked(this);" oncontextmenu="clicked(this);" onmousemove="moved(this, event)" onmousedown="clicked(this);" style="width:13.06%;text-align:left;vertical-align:top;padding:2.83pt;" colspan="3;" rowspan="1;" data-colspan-width="21.02pt;"></td> <td id="CELL_1_5_1545386072091" data-column="5" data-row="1" onclick="clicked(this);" oncontextmenu="clicked(this);" onmousemove="moved(this, event)" onmousedown="clicked(this);" style="width:14.12%;text-align:left;vertical-align:top;padding:2.83pt;background-color:#b3ccff; border:1.0pt solid #000000; "></td> <td id="CELL_1_6_1545386072091" data-column="6" data-row="1" onclick="clicked(this);" oncontextmenu="clicked(this);" onmousemove="moved(this, event)" onmousedown="clicked(this);" style="width:14.14%;text-align:left;vertical-align:top;padding:2.83pt;background-color:#b3ccff; border:1.0pt solid #000000; "></td> <td id="CELL_1_7_1545386072091" data-column="7" data-row="1" onclick="clicked(this);" oncontextmenu="clicked(this);" onmousemove="moved(this, event)" onmousedown="clicked(this);" style="width:14.14%;text-align:left;vertical-align:top;padding:2.83pt;background-color:#b3ccff; border:1.0pt solid #000000; "></td> <td id="CELL_1_8_1545386072091" data-column="8" data-row="1" onclick="clicked(this);" oncontextmenu="clicked(this);" onmousemove="moved(this, event)" onmousedown="clicked(this);" style="width:11.36%;text-align:left;vertical-align:top;padding:2.83pt;background-color:#b3ccff; border:1.0pt solid #000000; "></td> </tr> <tr id="tr_2_1545386072091" style="height:19.26pt;" data-row="2"> <td id="CELL_2_0_1545386072091" data-column="0" data-row="2" onclick="clicked(this);" oncontextmenu="clicked(this);" onmousemove="moved(this, event)" onmousedown="clicked(this);" style="width:10.88%; text-align: left; vertical-align: top; padding: 2.83pt; background-color: rgb(179, 204, 255);border:1.0pt solid #000000; " colspan="1;" rowspan="2;" data-colspan-width="5.22pt;"></td> <td id="CELL_2_1_1545386072091" data-column="1" data-row="2" onclick="clicked(this);" oncontextmenu="clicked(this);" onmousemove="moved(this, event)" onmousedown="clicked(this);" style="width:8.68%;text-align:left;vertical-align:top;padding:2.83pt;background-color:#b3ccff;border:1.0pt solid #000000; " colspan="1;" rowspan="2;" data-colspan-width="3.02pt;"></td> <td id="CELL_2_2_1545386072091" data-column="2" data-row="2" onclick="clicked(this);" oncontextmenu="clicked(this);" onmousemove="moved(this, event)" onmousedown="clicked(this);" style="width:13.06%; text-align: left; vertical-align: top; padding: 2.83pt; background-color: rgb(179, 204, 255);border:1.0pt solid #000000; " colspan="1;" rowspan="2;" data-colspan-width="7.4pt;"></td> <td id="CELL_2_3_1545386072091" data-column="3" data-row="2" onclick="clicked(this);" oncontextmenu="clicked(this);" onmousemove="moved(this, event)" onmousedown="clicked(this);" style="width:7.08%; text-align: left; vertical-align: top; padding: 2.83pt; background-color: rgb(179, 204, 255);border:1.0pt solid #000000; " colspan="1;" rowspan="2;" data-colspan-width="1.42pt;"></td> <td id="CELL_2_4_1545386072091" data-column="4" data-row="2" onclick="clicked(this);" oncontextmenu="clicked(this);" onmousemove="moved(this, event)" onmousedown="clicked(this);" style="width:6.54%; text-align: left; vertical-align: top; padding: 2.83pt; background-color: rgb(179, 204, 255);border:1.0pt solid #000000; " colspan="1;" rowspan="2;" data-colspan-width="0.88pt;"></td> <td id="CELL_2_5_1545386072092" data-column="5" data-row="2" onclick="clicked(this);" oncontextmenu="clicked(this);" onmousemove="moved(this, event)" onmousedown="clicked(this);" style="width:14.12%; text-align: left; vertical-align: top; padding: 2.83pt; cursor: row-resize;border:1.0pt solid #000000; "></td> <td id="CELL_2_6_1545386072092" data-column="6" data-row="2" onclick="clicked(this);" oncontextmenu="clicked(this);" onmousemove="moved(this, event)" onmousedown="clicked(this);" style="width:14.14%; text-align: left; vertical-align: top; padding: 2.83pt; cursor: col-resize;border:1.0pt solid #000000; "></td> <td id="CELL_2_7_1545386072092" data-column="7" data-row="2" onclick="clicked(this);" oncontextmenu="clicked(this);" onmousemove="moved(this, event)" onmousedown="clicked(this);" style="width:14.14%; text-align: left; vertical-align: top; padding: 2.83pt; cursor: row-resize;border:1.0pt solid #000000; "></td> <td id="CELL_2_8_1545386072092" data-column="8" data-row="2" onclick="clicked(this);" oncontextmenu="clicked(this);" onmousemove="moved(this, event)" onmousedown="clicked(this);" style="width:11.36%; text-align: left; vertical-align: top; padding: 2.83pt; cursor: row-resize;border:1.0pt solid #000000; "></td> </tr> <tr id="tr_3_1545386072092" style="height:21.14pt;" data-row="3"> <td id="CELL_3_5_1545386072093" data-column="5" data-row="3" onclick="clicked(this);" oncontextmenu="clicked(this);" onmousemove="moved(this, event)" onmousedown="clicked(this);" style="width:14.12%; text-align: left; vertical-align: top; padding: 2.83pt;border:1.0pt solid #000000; "></td> <td id="CELL_3_6_1545386072093" data-column="6" data-row="3" onclick="clicked(this);" oncontextmenu="clicked(this);" onmousemove="moved(this, event)" onmousedown="clicked(this);" style="width:14.14%; text-align: left; vertical-align: top; padding: 2.83pt;border:1.0pt solid #000000; "></td> <td id="CELL_3_7_1545386072093" data-column="7" data-row="3" onclick="clicked(this);" oncontextmenu="clicked(this);" onmousemove="moved(this, event)" onmousedown="clicked(this);" style="width:14.14%;text-align:left;vertical-align:top;padding:2.83pt;border:1.0pt solid #000000; "></td> <td id="CELL_3_8_1545386072093" data-column="8" data-row="3" onclick="clicked(this);" oncontextmenu="clicked(this);" onmousemove="moved(this, event)" onmousedown="clicked(this);" style="width:11.36%;text-align:left;vertical-align:top;padding:2.83pt;border:1.0pt solid #000000; "></td> </tr> <tr id="tr_4_1545386072093" style="height:28.5pt;" data-row="4"> <td id="CELL_4_0_1545386072093" data-column="0" data-row="4" onclick="clicked(this);" oncontextmenu="clicked(this);" onmousemove="moved(this, event)" onmousedown="clicked(this);" style="width:10.88%;text-align:left;vertical-align:top;padding:2.83pt;"></td> <td id="CELL_4_1_1545386072093" data-column="1" data-row="4" onclick="clicked(this);" oncontextmenu="clicked(this);" onmousemove="moved(this, event)" onmousedown="clicked(this);" style="width:8.68%;text-align:left;vertical-align:top;padding:2.83pt;"></td> <td id="CELL_4_2_1545386072093" data-column="2" data-row="4" onclick="clicked(this);" oncontextmenu="clicked(this);" onmousemove="moved(this, event)" onmousedown="clicked(this);" style="width:13.06%;text-align:left;vertical-align:top;padding:2.83pt;"></td> <td id="CELL_4_3_1545386072093" data-column="3" data-row="4" onclick="clicked(this);" oncontextmenu="clicked(this);" onmousemove="moved(this, event)" onmousedown="clicked(this);" style="width:7.08%;text-align:left;vertical-align:top;padding:2.83pt;"></td> <td id="CELL_4_4_1545386072093" data-column="4" data-row="4" onclick="clicked(this);" oncontextmenu="clicked(this);" onmousemove="moved(this, event)" onmousedown="clicked(this);" style="width:6.54%;text-align:left;vertical-align:top;padding:2.83pt;"></td> <td id="CELL_4_5_1545386072093" data-column="5" data-row="4" onclick="clicked(this);" oncontextmenu="clicked(this);" onmousemove="moved(this, event)" onmousedown="clicked(this);" style="width:14.12%;text-align:left;vertical-align:top;padding:2.83pt;"></td> <td id="CELL_4_6_1545386072094" data-column="6" data-row="4" onclick="clicked(this);" oncontextmenu="clicked(this);" onmousemove="moved(this, event)" onmousedown="clicked(this);" style="width:14.14%;text-align:left;vertical-align:top;padding:2.83pt;"></td> <td id="CELL_4_7_1545386072094" data-column="7" data-row="4" onclick="clicked(this);" oncontextmenu="clicked(this);" onmousemove="moved(this, event)" onmousedown="clicked(this);" style="width:14.14%;text-align:left;vertical-align:top;padding:2.83pt;"></td> <td id="CELL_4_8_1545386072094" data-column="8" data-row="4" onclick="clicked(this);" oncontextmenu="clicked(this);" onmousemove="moved(this, event)" onmousedown="clicked(this);" style="width:11.36%;text-align:left;vertical-align:top;padding:2.83pt;"></td> </tr> </tbody> </table> </div> </body> </html>

        Gruß Guest191218

        1. Hallo Guest191218,

          wenn Du letztlich nur HTML baust um ein PDF zu erstellen, solltest Du uns das Tool nennen mit dem Du HTML in PDF konvertierst, damit man weiß welche Restriktionen gelten.

          Dein Problem scheint aus meiner Sicht aber gelöst. Wenn ich dein HTML kopiere und anzeige, sind 3-er Colspans da und die Breiten scheinen okay zu sein.

          Der Standardkopf für XHTML5 sieht übrigens so aus:

          <?xml version=”1.0” encoding=”UTF-8”?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">

          Rein formal sind die <?xml ...?> und <!DOCTYPE...> Zeile bei XHTML5 nicht nötig. Dass es XHTML ist, weiß ein Browser an Hand des Content-Type. Dein PDF-Konverter weiß es möglicherweise nicht, deshalb könnte es nützlich sein, sie drin zu lassen.

          Ist das handgemachtes HTML oder von einem Generator erzeugt? Wenn Generator, ok, dann ist das so.

          Wenn handgemacht:

          Deine oncontextmenu/onclick Hölle kannst Du durch Eventbubbling verbessern. Registriere die Eventhandler nur auf dem div_1545386012552 Element, nicht auf jedem einzelnen td. Die click, contextmenu und mousemove Events werden nicht nur auf den Blättern des DOM-Baums signalisiert, sondern wandern danach bis zur Wurzel und können überall behandelt werden. Aber ruf die Eventhandler nicht mit this als Parameter auf, sondern mit event:

          <div id="div_1545386012552" onclick="clicked(event)" ...>

          Damit bekommst Du das Event-Objekt, was Du bei Bubbling brauchst. Es hat eine Eigenschaft namens target, und das ist das Element, auf dem das Event ausgelöst wurde. Auf unobtrusive JavaScript und bessere Event-Registrierung mit addEventListener Funktion gehe ich jetzt nicht ein, du sagst Du bist da ungeübt und das wird zu kompliziert.

          Werden die data-Attribute vom PDF-Generator gebraucht? Weil - wenn Du die data-row Attribute auf den <td> nur für dein JavaScript brauchst: nimm sie weg (nur von den td!). Das bläht das HTML auf. Geh im JavaScript lieber her und hol Dir das parentElement des td Node, da steht data-row auch dran.

          Rolf

          -- sumpsi - posui - clusi
          1. @@Rolf B

            Registriere die Eventhandler nur auf dem div_1545386012552 Element, nicht auf jedem einzelnen td. Die click, contextmenu und mousemove Events […]

            Du solltest es besser wissen! td ist nicht clickbar (nicht allgemein, sondern nur für einige Nutzer). td sollte also nicht Target von Click-Events sein.

            LLAP 🖖

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

              Bingo. Ich hab gewusst, dass das kam.

              Da steht contenteditable="true". Ist das nicht bedienbar?

              Rolf

              -- sumpsi - posui - clusi
              1. @@Rolf B

                Da steht contenteditable="true". Ist das nicht bedienbar?

                Man kann den Inhalt editieren. Man kann kein Click-Event auslösen.

                LLAP 🖖

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

                  @@Rolf B

                  Da steht contenteditable="true". Ist das nicht bedienbar?

                  Man kann den Inhalt editieren. Man kann kein Click-Event auslösen.

                  Die Frage, die wir stellen sollten:

                  ist das resultierende pdf für die allgemeine Öffentlichkeit bestimmt?

                  Dann haben wir schon allein aus Sicherheitsgründen damit zu rechnen, dass Javascript nicht ausgeführt wird.

                  -- https://beat-stoecklin.ch/pub/index.html
        2. @@Guest191218

          Ich brauche die Tabelle für ein Layout, das später in ein PDF umgewandelt wird.

          Oh je … PDF-Generatoren hinken der Zeit in puncto CSS-Verständnis Äonen hinterher. Das muss man tatsächlich heute noch mit table layouten.

          Wenn du das tust, schreib <table role="none presentation"> in Start-Tag, wenn es sich nicht um tabellarische Daten handelt, damit die Seite erstmal im Browser benutzbar ist. („Später“ verstehe ich so, dass die Seite erstemal im Browser benutzt wird, dann daraus (mit getätigten Nutzereingaben?) ein PDF generiert wird.

          Deshalb schreibe ich den Style auch direkt in die Zelle.

          Nö, so weit sind PDF-Generatoren nun auch nicht hinterher, dass die im Stylesheet (extern oder <style>-Element im <head>) gemachten Angaben nicht interpretieren würden. Für Inline-Styles gibt es keine Rechtfertigung.

          Und schon gar nicht dafür, immer wieder dieselben Angaben in jeder Tabellenzeile zu wiederholen. Wenn für die Zellen der ersten Zeile die Breiten angegben werden, dann haben die Zellen der nachfolgenden Zeilen ohne weitere Angaben automatisch dieselben Breiten.

          Die zigfache Wiederholung bläht den Quelltext sinnlos auf – und der will ja erstmal zum Nutzer übertragen und auf seinem Gerät verarbeitet werden. Die sinnlosen Angaben vergeuden Zeit.

          Zum Punkt Doctype. Da kenne ich mich gar nicht aus. Ich brauche ein XHTML.

          Wird das PDF über XSLT o.a. XML-Prozessoren generiert? Ansonsten würde mich das sehr wundern. PDF-Generatoren parsen für gewöhnlich HTML – ohne X.

          <td id="CELL_0_0_1545386012552" data-column="0" data-row="0" onclick="clicked(this);" oncontextmenu="clicked(this);" onmousemove="moved(this, event)" onmousedown="clicked(this);" style="width:521.3%;text-align:left;vertical-align:top;padding:2.83pt;"><p><span style="font-size:10pt;line-height:12.83pt;font-weight:bold;text-decoration:underline;">TEXT</span></p></td>

          521.3%? Wirklich? Aber wie gesagt: Die Styles ins Stylesheet.

          Und was passiert da mit JavaScript? Wie ich schon erwähnte kann man <td>s nicht anclicken. Einige Nutzer (Maus o.a. Zeigegeräte) können das; viele andere Nutzer (Tastaturbediener) können das nicht. Zum Auslösen von Aktionen per Click braucht man ein interaktives Element: <button>.

          LLAP 🖖

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

            vor allem ist die Vielfalt der beobachteten Events merkwürdig. onclick und oncontextmenu - das sind rinke und lechte Maustaste (je nach Computereinstellungen), aber onmousedown, das ist ein vorgelagertes Event das bei jeder Maustaste ausgelöst wird. Man sieht das JavaScript nicht, deswegen ist nicht klar warum die Eventhandler überhaupt da sind, aber ich habe den Eindruck dass es hier um die Erkenntnis geht, ob eine Zelle gerade aktiviert wurde (was natürlich auch per Pfeil auf/ab geht) und die Präsentation angepasst werden soll. Den mousemove kann ich mir für ein Erfassungsformular aber gar nicht erklären.

            Meine erste Idee war, das JS durch CSS-Styling mit :focus und :hover zu ersetzen. Problem: Ein td bekommt keinen Fokus. Auch nicht wenn es contenteditable ist. Es ist und bleibt nicht-interaktiv.

            Dann hatte ich den Gedanken, contenteditable zu verwerfen und jedes table cell mit einer textarea zu füllen, die width/height 100% hat. Aber auch bei box-sizing:border-box bekomme ich es unter Chrome nicht hin. Im Firefox ist es ok, in Chrome sind die textareas zu weit oben und nicht hoch genug. Keine Ahnung was los ist. Wenn man das hinnimmt, sähe es so aus. Die Hintergrundfarben dienen zur Sichtbarmachung der Größenfehler.

            Rolf

            -- sumpsi - posui - clusi
          2. Hallo Gunnar,

            Den HTML Generator musste ich selber schreiben und das Html steht nicht der Öffentlichkeit zur Verfügung, sondern wird nur in der Applikation verwendet.

            Das mit den Events muss ich mir noch genauer anschauen.

            Was ich nicht verstehe ist, wenn ich in der Tabelle mehrere Colspans habe, dass die width im td style nicht richtig gerändert wird aber mit colgroup. Wo liegt da der Unterschied?