diff options
Diffstat (limited to 'files/de/web/html/element/col/index.html')
| -rw-r--r-- | files/de/web/html/element/col/index.html | 240 |
1 files changed, 240 insertions, 0 deletions
diff --git a/files/de/web/html/element/col/index.html b/files/de/web/html/element/col/index.html new file mode 100644 index 0000000000..64d9cffcf1 --- /dev/null +++ b/files/de/web/html/element/col/index.html @@ -0,0 +1,240 @@ +--- +title: <col> +slug: Web/HTML/Element/col +translation_of: Web/HTML/Element/col +--- +<div> </div> + +<div><span id="result_box" lang="de"><span>Das <strong>HTML <code><col></code>-Element </strong>definiert eine Spalte innerhalb einer Tabelle und wird zum Definieren einer gemeinsamen Semantik für alle gängigen Zellen verwendet.</span> <span>Es wird allgemein innerhalb eines {{HTMLElement("colgroup")}} -Elements gefunden.</span></span></div> + +<div> </div> + +<div><span id="result_box" lang="de"><span>Auf dieses Element können CSS-Stilvorschriften für das Design von Spalten angewendet werden, aber nur wenige Attribute wirken sich auf die Spalte aus (siehe die CSS 2.1-Spezifikation für eine Liste).</span></span></div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Inhaltskategorien</a></th> + <td>Keine</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td>Keiner, es ist ein {{Glossary("empty element")}}</td> + </tr> + <tr> + <th scope="row">Tag-Auslassung</th> + <td><span id="result_box" lang="de"><span>Das Start-Tag ist obligatorisch, aber da es sich um ein void-Element handelt, ist die Verwendung eines End-Tags nicht zulässig.</span></span></td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Nur {{HTMLElement("colgroup")}}<span lang="de"><span>, obwohl es implizit definiert werden kann, da sein Start-Tag nicht obligatorisch ist.</span> <span>Das </span></span> {{HTMLElement("colgroup")}} <span lang="de"><span> darf kein </span></span> {{htmlattrxref("span", "colgroup")}} <span lang="de"><span> - Attribut haben.</span></span></td> + </tr> + <tr> + <th scope="row"><span class="short_text" id="result_box" lang="de"><span>Zulässige ARIA-Rollen</span></span></th> + <td>Keine</td> + </tr> + <tr> + <th scope="row">DOM Schnittstelle</th> + <td>{{domxref("HTMLTableColElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p><span class="short_text" id="result_box" lang="de"><span>Dieses Element enthält die globalen Attribute</span></span></p> + +<dl> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd><span id="result_box" lang="de"><span>Dieses Aufzählungsattribut gibt an, wie die horizontale Ausrichtung der einzelnen Spaltenzelleninhalte behandelt wird.</span> <span>Mögliche Werte sind:</span></span> + <ul> + <li><code>left</code>, <span id="result_box" lang="de"><span>richtet den Inhalt links von der Zelle aus</span></span></li> + <li><code>center</code>, <span id="result_box" lang="de"><span>zentriert den Inhalt in der Zelle</span></span></li> + <li><code>right</code>, <span id="result_box" lang="de"><span>richtet den Inhalt auf der rechten Seite der Zelle aus</span></span></li> + <li><code>justify</code>, <span id="result_box" lang="de"><span>einfügen von Leerzeichen in den Textinhalt, so dass der Inhalt in der Zelle gerechtfertigt ist</span></span></li> + <li><code>char</code>, <span id="result_box" lang="de"><span>richtet den Textinhalt auf ein Sonderzeichen mit einem minimalen Offset aus, definiert durch htmlattrxref <char>, <col> und htmlattrxref <charoff>, <col> Attribute ;</span> </span><span class="short_text" id="result_box" lang="de"><span>nicht implementiert</span></span><span lang="de"><span>_inline (2212).</span></span></li> + </ul> + + <p><span id="result_box" lang="de"><span>Wenn dieses Attribut nicht gesetzt ist, wird der Wert von </span></span> {{htmlattrxref("align", "colgroup")}} des {{HTMLElement("colgroup")}} <span lang="de"><span>-Elements geerbt, zu dem dieses <code><col></code> -Element gehört.</span> <span>Wenn es keine gibt, wird der Wert <code>left</code> angenommen.</span></span></p> + + <div class="note"><strong>Note: </strong><span id="result_box" lang="de"><span>Verwenden Sie dieses Attribut nicht, da es im neuesten Standard veraltet (nicht unterstützt) ist.</span></span> + + <ul> + <li> Um den gleichen Effekt zu erzielen wie die Werte <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code>: + + <ul> + <li>Versuchen Sie nicht, die Eigenschaft {{cssxref("text-align")}} in einem Selektor festzulegen, der ein {{HTMLElement("col")}} enthält. Da {{HTMLElement("td")}} nicht von <code><col></code>-Element abhängen, werden sie nicht übernommen..</li> + <li>Wenn die Tabelle keines der {{htmlattrxref("colspan", "td")}}-Attribute verwendet, benutzen Sie bitte den <code>td:nth-child(an+b)</code>-CSS-Selektoren. Setzen Sie <code>a</code> auf null und <code>b</code> auf die Position der Tabellenspalte, z.B. <code>td:nth-child(2) { text-align: right; }</code>, um die zweite Zeile rechts auszurichten.</li> + <li><span id="result_box" lang="de"><span>Wenn die Tabelle ein Attribut </span></span> {{htmlattrxref("colspan", "td")}} <span lang="de"><span>verwendet, kann der Effekt durch Kombination geeigneter CSS-Attributselektoren wie <code>[colspan = n] </code>erzielt werden, obwohl dies nicht trivial ist.</span></span></li> + </ul> + </li> + <li><span id="result_box" lang="de"><span>Um den gleichen Effekt wie den <code>char</code>-Wert zu erzielen, können Sie in CSS3 den Wert von </span></span> {{htmlattrxref("char", "col")}} <span lang="de"><span>als Wert von </span></span> {{cssxref("text-align")}} <span lang="de"><span> verwenden.</span><span>(Inline nicht implementiert) .</span></span></li> + </ul> + + <ul> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd><span id="result_box" lang="de"><span>Dieses Attribut definiert die Hintergrundfarbe jeder Zelle der Spalte</span></span>. <span id="result_box" lang="de"><span>Zugelassene Werte sind jeweils einer der 6-stelligen Hexadezimalcodes, wie in</span></span> <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a> definiert wurden, immer mit einem '#' vorangestellt. <span id="result_box" lang="de"><span>Außerdem kann einer der sechzehn vordefinierten Farbstrings verwendet werden:</span></span> + <table style="width: 80%;"> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>black</code> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>green</code> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>silver</code> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>lime</code> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>gray</code> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>olive</code> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>white</code> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>yellow</code> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>maroon</code> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>navy</code> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>red</code> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>blue</code> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>purple</code> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>teal</code> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>fuchsia</code> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>aqua</code> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><span id="result_box" lang="de"><span><u><strong>Hinweis zur Verwendung</strong></u>: Verwenden Sie dieses Attribut nicht, da es nicht standardgemäß ist und nur in einigen Versionen von Microsoft Internet Explorer implementiert ist: Das Element <code><col></code> sollte mit CSS formatiert werden.</span> <span>Verwenden Sie die CSS-Eigenschaft </span></span> {{cssxref("background-color")}} <span lang="de"><span> in den relevanten </span></span> {{HTMLElement("td")}}-Elementen<span lang="de"><span>, um einen mit dem <code>bgcolor</code>-Attribut vergleichbaren Effekt zu erzielen.</span></span></div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dt> </dt> + <dd> + <p><span lang="de"><span>Dieses Attribut wird verwendet, um das Zeichen festzulegen, an dem die Zellen in einer Spalte ausgerichtet werden sollen.</span> <span>Typische Werte hierfür sind ein Punkt (.) Beim Ausrichten von Zahlen oder Geldwerten.</span> <span>Wenn </span></span> {{htmlattrxref("align", "col")}} <span lang="de"><span> nicht auf <code>char</code> gesetzt ist, wird dieses Attribut ignoriert</span></span>;</p> + </dd> + <dd> + <div class="note"><span id="result_box" lang="de"><span><u><strong>Anmerkung</strong></u>: Verwenden Sie dieses Attribut nicht, da es im neuesten Standard veraltet (und nicht unterstützt) ist.</span> <span>Um den gleichen Effekt wie bei </span></span> {{htmlattrxref("char", "col")}} <span lang="de"><span> zu erzielen, können Sie in CSS3 den Zeichensatz mit dem </span></span> {{htmlattrxref("char", "col")}} <span lang="de"><span> Attribut als</span> <span>Wert der Eigenschaft </span></span> {{cssxref("text-align")}} <span lang="de"><span> einsetzen.</span></span></div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd><span id="result_box" lang="de"><span>Dieses Attribut gibt die Anzahl der Zeichen an, die die Spaltendaten von den vom char-Attribut angegebenen Ausrichtungszeichen versetzen sollen</span></span> + <div class="note"><strong><u>Anmerkung</u>: </strong><span id="result_box" lang="de"><span>Verwenden Sie dieses Attribut nicht, da es im aktuellen Standard veraltet (und nicht unterstützt) ist.</span></span></div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("span")}}</dt> + <dd><span id="result_box" lang="de"><span>Dieses Attribut enthält eine positive ganze Zahl, die die Anzahl aufeinanderfolgender Spalten angibt, die das <code><col></code> -Element überspannt.</span> <span>Wenn nicht vorhanden, ist der Standardwert <code>1</code>.</span></span></dd> +</dl> + +<dl> + <dt>{{htmlattrdef("valign")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd><span id="result_box" lang="de"><span>Dieses Attribut gibt die vertikale Ausrichtung des Texts in jeder Zelle der Spalte an.</span> <span>Mögliche Werte für dieses Attribut sind:</span></span></dd> + <dd> + <ul> + <li><code>baseline</code>, <span id="result_box" lang="de"><span>setzt</span></span><span lang="de"><span> den Text so nahe wie möglich an den unteren Rand der Zelle , richtet ihn aber an der Grundlinie der Zeichen anstatt am unteren Rand aus.</span> <span>Wenn alle Zeichen dieselbe Größe haben, hat dies den gleichen Effekt wie</span></span> <code>bottom</code></li> + <li><code>bottom</code>, setzt<span lang="de"><span> den Text so nahe wie möglich an den unteren Rand der Zelle</span></span></li> + <li><code>middle</code>, zentriert den Text in der Zelle</li> + <li><code>top</code>, <span id="result_box" lang="de"><span>setzt den Text so nahe wie möglich an den oberen Rand der Zelle</span></span></li> + </ul> + + <div class="note"><strong><u>Anmerkung</u>: </strong><span id="result_box" lang="de"><span>Verwenden Sie dieses Attribut nicht, da es im neuesten Standard veraltet (und nicht unterstützt) ist:</span></span> + + <ul> + <li><span id="result_box" lang="de"><span>Versuchen Sie nicht, die Eigenschaft {{cssxref ("vertical-align")}} in einem Selektor festzulegen, der ein HTMLElement <col> enthält.</span> <span>Da das</span></span> {{HTMLElement("td")}}-Element <span lang="de"><span> nicht vom</span></span> {{HTMLElement("col")}}-Element <span lang="de"><span>abhängt, werden sie nicht vererbt</span></span>.</li> + <li><span id="result_box" lang="de"><span>Wenn die Tabelle kein </span></span> {{htmlattrxref("colspan", "td")}}<span lang="de"><span> - Attribut verwendet, verwenden Sie den CSS-Selektor <code>td: nth-child (an + b)</code>, wobei a die Gesamtanzahl der Spalten in der Tabelle ist</span> <span>und b ist die Ordnungsposition der Spalte in der Tabelle.</span> <span>Erst nach diesem Selektor kann die Eigenschaft cssxref </span></span> {{cssxref("vertical-align")}} <span lang="de"><span> verwendet werden.</span></span></li> + <li><span id="result_box" lang="de"><span>Wenn die Tabelle ein </span></span> {{htmlattrxref("colspan", "td")}}<span lang="de"><span>- Attribut verwendet, kann der Effekt durch Kombination geeigneter CSS-Attributselektoren wie <code>[colspan = n]</code> erzielt werden, obwohl dies nicht trivial ist.</span></span></li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("width")}} {{obsolete_inline("html5")}}</dt> + <dd><span id="result_box" lang="de"><span>Dieses Attribut gibt eine Standardbreite für jede Spalte in der aktuellen Spaltengruppe an.</span> <span>Zusätzlich zu den Standardpixel- und -prozentwerten kann dieses Attribut das Sonderformat <code>0 *</code> annehmen, was bedeutet, dass die Breite jeder Spalte in der Gruppe die minimale Breite sein sollte, die erforderlich ist, um den Inhalt der Spalte aufzunehmen.</span> <span>Relative Breiten wie <code>0,5 *</code> können ebenfalls verwendet werden.</span></span></dd> +</dl> + +<h2 id="Beispiel"><span class="short_text" id="result_box" lang="de"><span>Beispiel</span></span></h2> + +<p><span id="result_box" lang="de"><span>Auf der Seite </span></span> {{HTMLElement("table")}} <span lang="de"><span> finden Sie Beispiele für <code><col></code>.</span></span></p> + +<h2 id="Spezifikationen"><span class="short_text" id="result_box" lang="de"><span>Spezifikationen</span></span></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'tables.html#the-col-element', '<col>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-col-element', '<col>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.4.2', '<col>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Initiale Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<div class="hidden"><span id="result_box" lang="de"><span>Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert.</span> <span>Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte</span></span> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> <span id="result_box" lang="de"><span>und senden Sie uns eine Pull-Anfrage</span></span>.</div> + +<p>{{Compat("html.elements.col")}}</p> + +<h2 id="Siehe_auch"><span class="short_text" id="result_box" lang="de"><span>Siehe auch</span></span></h2> + +<ul> + <li><span id="result_box" lang="de"><span>Andere tabellenbezogene HTML-Elemente: </span></span> {{HTMLElement("caption")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li> + <li><span id="result_box" lang="de"><span>CSS-Eigenschaften und Pseudoklassen, die besonders nützlich sein können, um das <code><col></code> -Element zu formatieren:</span></span> + <ul> + <li><span id="result_box" lang="de"><span>Die Eigenschaft </span></span> {{cssxref("width")}} <span lang="de"><span>, um die Breite der Spalte zu steuern;</span></span></li> + <li><span id="result_box" lang="de"><span>Die Pseudoklasse </span></span> {{cssxref(":nth-child")}} <span lang="de"><span>, um die Ausrichtung auf die Zellen der Spalte festzulegen;</span></span></li> + <li><span id="result_box" lang="de"><span>Die </span></span> {{cssxref("text-align")}} <span lang="de"><span> -Eigenschaft, um den Inhalt aller Zellen auf dasselbe Zeichen wie '.'.</span></span></li> + </ul> + </li> +</ul> |