nicht angemeldet
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Rolf B
Gunnar Bittersmann
Rolf B
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?
@@Guest191218
Kann mir bitte jemand dazu Hilfe geben?
Wenn du deine fragliche Seite verlinkst, gerne.
LLAP 🖖
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%;"> </td>
<td style="width=25%;"> </td>
<td style="width=20%;"> </td>
<td style="width=30%;"> </td>
</tr>
<tr>
<td style="width=25%;"> </td>
<td style="width=25%;"> </td>
<td style="width=20%;"> </td>
<td style="width=30%;"> </td>
</tr>
<tr>
<td style="width=25%;"> </td>
<td style="width=25%;"> </td>
<td colspan="2" >COLSPAN="2"</td>
</tr>
<tr>
<td style="width=25%;"> </td>
<td style="width=25%;"> </td>
<td style="width=20%;"> </td>
<td style="width=30%;"> </td>
</tr>
</table>
<table width="100%">
<tr>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="20%"> </td>
<td width="30%"> </td>
</tr>
<tr>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="20%"> </td>
<td width="30%"> </td>
</tr>
<tr>
<td width="25%"> </td>
<td width="25%"> </td>
<td colspan="2" >COLSPAN="2"</td>
</tr>
<tr>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="20%"> </td>
<td width="30%"> </td>
</tr>
</table>
</body>
</html>
hallo
Ich habe folgendes Problem:
<element style="property=value">
ist immer ungültiges CSS.
<element style="property:value">
dürfte da schon korrekter sein.
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%;">
</td>
<td style="width=25%;">
</td>
<td style="width=20%;">
</td>
<td style="width=30%;">
</td>
</tr>
<tr>
<td style="width=25%;">
</td>
<td style="width=25%;">
</td>
<td style="width=20%;">
</td>
<td style="width=30%;">
</td>
</tr>
<tr>
<td style="width=25%;">
</td>
<td style="width=25%;">
</td>
<td colspan="2">
COLSPAN="2"
</td>
</tr>
<tr>
<td style="width=25%;">
</td>
<td style="width=25%;">
</td>
<td style="width=20%;">
</td>
<td style="width=30%;">
</td>
</tr>
</table>
<table width="100%">
<tr>
<td width="25%">
</td>
<td width="25%">
</td>
<td width="20%">
</td>
<td width="30%">
</td>
</tr>
<tr>
<td width="25%">
</td>
<td width="25%">
</td>
<td width="20%">
</td>
<td width="30%">
</td>
</tr>
<tr>
<td width="25%">
</td>
<td width="25%">
</td>
<td colspan="2" >
COLSPAN="2"
</td>
</tr>
<tr>
<td width="25%">
</td>
<td width="25%">
</td>
<td width="20%">
</td>
<td width="30%">
</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
Danke für die prompte Unterstützung!
@@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 🖖
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
@@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 🖖
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
@@bobby
auch in diesem Fall könnte man im Umgangston anders agieren.
Was genau war denn für dich schlechter Umgangston?
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 🖖
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
@@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 🖖
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
@@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 🖖
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
@@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 🖖
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
@@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 eine bessere Antwort als meine es war weitergeholfen wurde.
LLAP 🖖
Moin,
Ich sage: Es geht bei Fragen zu HTML/CSS immer um gutes HTML.
Und das spiegelt eben nur deine Meinung wieder.
Gruß Bobby
@@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 🖖
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
@@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 🖖
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.
Moin,
Danke. genau das meine ich.
Gruß Bobby
@@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 🖖
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
@@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 🖖
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
@@bobby
sorry. Das ist das dümmste Argument ever.
Begründung?
LLAP 🖖
Moin,
Siehe meine Ausführungen nach dieser Feststellung.
Gruß Bobby
hallo
@@beatovich
Kannst du die Hilfe, die das primäre Problem nicht einfach mal würdigen?
Nein.
Danke, das ist doch eine Ansage!
@@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 🖖
@@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 🖖
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
@@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 🖖
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
@@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 🖖
hallo
Hilfe zum Syntax-Problem hast du erhalten.
Für weitere Hilfe muss ich zuerst ein paar Fragen stellen.
<!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?
<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%;"> </td>
> <td style="width=25%;"> </td>
> <td style="width=20%;"> </td>
> <td style="width=30%;"> </td>
> </tr>
> <tr>
> <td style="width=25%;"> </td>
> <td style="width=25%;"> </td>
> <td style="width=20%;"> </td>
> <td style="width=30%;"> </td>
> </tr>
> <tr>
> <td style="width=25%;"> </td>
> <td style="width=25%;"> </td>
> <td colspan="2" >COLSPAN="2"</td>
>
> </tr>
> <tr>
> <td style="width=25%;"> </td>
> <td style="width=25%;"> </td>
> <td style="width=20%;"> </td>
> <td style="width=30%;"> </td>
> </tr>
> </table>
Dieser Code weckt in mir den Verdacht, dass die Tabelle für Layoutzwecke verwendet wird.
@@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.
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
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
@@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 🖖
Hallo Gunnar,
Bingo. Ich hab gewusst, dass das kam.
Da steht contenteditable="true". Ist das nicht bedienbar?
Rolf
@@Rolf B
Da steht contenteditable="true". Ist das nicht bedienbar?
Man kann den Inhalt editieren. Man kann kein Click-Event auslösen.
LLAP 🖖
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.
@@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 🖖
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
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?