---
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>&lt;col&gt;</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 &lt;char&gt;, &lt;col&gt; und htmlattrxref &lt;charoff&gt;, &lt;col&gt; 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>&lt;col&gt;</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>&lt;col&gt;</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>&lt;col&gt;</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>&lt;col&gt;</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 &lt;col&gt; 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>&lt;col&gt;</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', '&lt;col&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-col-element', '&lt;col&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.4.2', '&lt;col&gt;')}}</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>&lt;col&gt;</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>