path: root/files/de/web/html/element/table/index.html

---
title: <table>
slug: Web/HTML/Element/table
tags:
  - Element
  - Reference
  - Tables
  - Web
translation_of: Web/HTML/Element/table
---
<h2 id="Zusammenfassung">Zusammenfassung</h2>

<p>Das <em>HTML-Tabellen-Element </em>(<code>&lt;table&gt;</code>) repräsentiert Daten in zwei oder mehr Dimensionen.</p>

<div class="note"><strong>Hinweis: </strong>Bevor es <a href="/en-US/docs/CSS" title="CSS">CSS</a> gab, wurden HTML-{{HTMLElement("table")}}-Elemente oft für das Seitenlayout verwendet. Von dieser Nutzung wird seit HTML 4 abgeraten, und das {{HTMLElement("table")}}-Element <strong style="font-weight: bold;">sollte nicht</strong> für Layoutzwecke verwendet werden.</div>

<h2 id="Nutzungskontext">Nutzungskontext</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <td><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content categories">Inhaltskategorien</a></td>
   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließ-Inhalt</a></td>
  </tr>
  <tr>
   <td>Erlaubter Inhalt</td>
   <td>
    <div class="content-models">
    <div id="table-mdls">In dieser Reihenfolge:
    <ul>
     <li>ein optionales {{HTMLElement("caption")}}-Element,</li>
     <li>null oder mehr {{HTMLElement("colgroup")}}-Elemente,</li>
     <li>ein optionales {{HTMLElement("thead")}}-Element,</li>
     <li>eine der beiden Alternativen:
      <ul>
       <li>ein {{HTMLElement("tfoot")}}-Element, gefolgt von:
        <ul>
         <li>null oder mehr {{HTMLElement("tbody")}}-Elementen,</li>
         <li>oder einem oder mehr {{HTMLElement("tr")}}-Elementen,</li>
        </ul>
       </li>
       <li>eine zweite Alternative gefolgt von einem optionalen {{HTMLElement("tfoot")}}-Element:
        <ul>
         <li>entweder null oder mehr {{HTMLElement("tbody")}}-Elemente,</li>
         <li>oder ein oder mehr {{HTMLElement("tr")}}-Elemente</li>
        </ul>
       </li>
      </ul>
     </li>
    </ul>
    </div>
    </div>
   </td>
  </tr>
  <tr>
   <td>Tag-Auslassung</td>
   <td>Keine, sowohl das Start-Tag als auch das End-Tag sind Pflicht</td>
  </tr>
  <tr>
   <td>Erlaubte Eltern-Elemente</td>
   <td>Jedes Element, das Fließ-Inhalt akzeptiert</td>
  </tr>
  <tr>
   <td>Normatives Dokument</td>
   <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-table-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-table-element">HTML5, Abschnitt 4.9.1</a> (<a class="external" href="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TABLE" title="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TABLE">HTML4.01, Abschnitt 11.2.1</a>)</td>
  </tr>
 </tbody>
</table>

<h2 id="Attribute">Attribute</h2>

<p><span style="line-height: 21px;">Dieses Element beinhaltet die </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globalen Attribute</a><span style="line-height: 21px;">.</span></p>

<dl>
 <dt>{{htmlattrdef("align")}} {{Deprecated_inline}}</dt>
 <dd>Dieses aufgezählte Attribut gibt an, wie die Tabelle im beinhaltenden Dokument ausgerichtet werden muss. Es kann die folgenden Werte haben:
 <ul>
  <li><span>left</span>, bedeutet, dass die Tabelle links im Dokument angezeigt werden soll;</li>
  <li><span>center</span>, bedeutet, dass die Tabelle mittig im Dokument angezeigt werden soll;</li>
  <li><span>right</span>, bedeutet, dass die Tabelle rechts im Dokument angezeigt werden soll.</li>
 </ul>

 <div class="note"><strong>Hinweis: </strong>

 <ul>
  <li><strong>Verwenden Sie dieses Attribut nicht</strong>, da es überholt ist: das {{HTMLElement("table")}}-Element sollte mit <a href="/en-US/docs/CSS" title="CSS">CSS</a> angepasst werden. Um einen ähnlichen Effekt zu erreichen wie mit dem align-Attribut, sollten die <a href="/en-US/docs/CSS" title="CSS">CSS</a>-Eigenschaften "text-align" und "vertical-align" verwendet werden.</li>
  <li>Vor Firefox 4 unterstützte Firefox, nur im Quirks-Modus, auch die Werte <code>middle</code>, <code>absmiddle</code>, und <code>abscenter</code> als Synonyme von <code>center</code><em>.  </em></li>
 </ul>
 </div>
 </dd>
</dl>

<dl>
 <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt>
 <dd>Dieses Attribut definiert die Hintergrundsfarbe von der Tabelle und deren Inhalt. Die Farbe entspricht einem 6-stelligen Hexadezimalcode definiert in <a class="external" href="http://www.w3.org/Graphics/Color/sRGB" title="http://www.w3.org/Graphics/Color/sRGB">sRGB</a> mit einem vorangestellten '#'. Es kann auch einer der sechszehn vordefinierten Farbnamen benutzt werden:
 <table>
  <tbody>
   <tr>
    <td style="width: 24px; background-color: black;"> </td>
    <td><span>black</span> = "#000000"</td>
    <td style="width: 24px; background-color: green;"> </td>
    <td><span>green</span> = "#008000"</td>
   </tr>
   <tr>
    <td style="width: 24px; background-color: silver;"> </td>
    <td><span>silver</span> = "#C0C0C0"</td>
    <td style="width: 24px; background-color: lime;"> </td>
    <td><span>lime</span> = "#00FF00"</td>
   </tr>
   <tr>
    <td style="width: 24px; background-color: gray;"> </td>
    <td><span>gray</span> = "#808080"</td>
    <td style="width: 24px; background-color: olive;"> </td>
    <td><span>olive</span> = "#808000"</td>
   </tr>
   <tr>
    <td style="width: 24px; background-color: white;"> </td>
    <td><span>white</span> = "#FFFFFF"</td>
    <td style="width: 24px; background-color: yellow;"> </td>
    <td><span>yellow</span> = "#FFFF00"</td>
   </tr>
   <tr>
    <td style="width: 24px; background-color: maroon;"> </td>
    <td><span>maroon</span> = "#800000"</td>
    <td style="width: 24px; background-color: navy;"> </td>
    <td><span>navy</span> = "#000080"</td>
   </tr>
   <tr>
    <td style="width: 24px; background-color: red;"> </td>
    <td><span>red</span> = "#FF0000"</td>
    <td style="width: 24px; background-color: blue;"> </td>
    <td><span>blue</span> = "#0000FF"</td>
   </tr>
   <tr>
    <td style="width: 24px; background-color: purple;"> </td>
    <td><span>purple</span> = "#800080"</td>
    <td style="width: 24px; background-color: teal;"> </td>
    <td><span>teal</span> = "#008080"</td>
   </tr>
   <tr>
    <td style="width: 24px; background-color: fuchsia;"> </td>
    <td><span>fuchsia</span> = "#FF00FF"</td>
    <td style="width: 24px; background-color: aqua;"> </td>
    <td><span>aqua</span> = "#00FFFF"</td>
   </tr>
  </tbody>
 </table>

 <div class="note"><strong>Gebrauchshinweis:</strong> Es wird von der Benutzung dieses Attributs abgeraten, da es veraltet ist. Das {{HTMLElement("table")}} Element sollte mit <a href="/de/docs/Web/CSS" title="CSS">CSS</a> formatiert werden. Um einen ähnlichen Effekt zu erzielen sollte das <a href="/de/docs/Web/CSS" title="CSS">CSS </a>Attribut {{cssxref("background-color")}} verwendet werden.</div>
 </dd>
</dl>

<dl>
 <dt>{{htmlattrdef("border")}} {{Deprecated_inline}}</dt>
 <dd>Dieser Integer Wert definiert die Breite des Rahmens in Pixeln. Wenn er auf <span>0</span> gesetzt wird, dann impliziert es, dass das {{htmlattrxref("frame", "table")}} Attribut auf <span>void</span> gesetzt ist.
 <div class="note"><strong>Gebrauchshinweis: </strong> Es wird von der Benutzung dieses Attributs abgeraten, da es veraltet ist. Das {{HTMLElement("table")}} Element sollte mit <a href="/de/docs/Web/CSS" title="CSS">CSS</a> formatiert werden.. Um einen ähnlichen Effekt wie das border Attribut zu erzielen sollten die <a href="/de/docs/Web/CSS" title="CSS">CSS</a> Eigenschaften {{cssxref("border")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}} und{{cssxref("border-style")}} benutzt werden.</div>
 </dd>
</dl>

<dl>
 <dt>{{htmlattrdef("cellpadding")}} {{Deprecated_inline}}</dt>
 <dd>This attribute defines the space between the content of a cell and the border, displayed or not, of it. If it is a pixel length, this pixel-sized space will be applied on all four sides; if it is a percentage length, the content will be centered and the total vertical space (top and bottom) will represent this percentage. The same is true for the total horizontal space (left and right).
 <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it has been deprecated: the {{HTMLElement("table")}} element should be styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. To give a similar effect than the <span>border</span> attribute, use the <a href="/en-US/docs/CSS" title="CSS">CSS</a> property {{cssxref("border-collapse")}} with the value collapse on the  {{HTMLElement("table")}} element itself, and the property {{cssxref("padding")}} on the {{HTMLElement("td")}}.</div>
 </dd>
</dl>

<dl>
 <dt>{{htmlattrdef("cellspacing")}} {{Deprecated_inline}}</dt>
 <dd>This attribute defines the size, in percentage or in pixels, of the space between two cells (both horizontally and vertically), between the top of the table and the cells of the first row, the left of the table and the first column, the right of the table and the last column and the bottom of the table and the last row.
 <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it has been deprecated: the {{HTMLElement("table")}} element should be styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. To give a similar effect than the <span>border</span> attribute, use the <a href="/en-US/docs/CSS" title="CSS">CSS</a> property {{cssxref("border-collapse")}} with the value collapse on the  {{HTMLElement("table")}} element itself, and the property {{cssxref("margin")}} on the {{HTMLElement("td")}} element.</div>
 </dd>
</dl>

<dl>
 <dt>{{htmlattrdef("frame")}} {{Deprecated_inline}}</dt>
 <dd>This enumerated attribute defines which side of the frame surrounding the table must be displayed. It may have the following values:
 <table style="width: 668px;">
  <tbody>
   <tr>
    <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
    <td><span>above</span></td>
    <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
    <td><span>below</span></td>
   </tr>
   <tr>
    <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
    <td><span>hsides</span></td>
    <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
    <td><span>vsides</span></td>
   </tr>
   <tr>
    <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
    <td><span>lhs</span></td>
    <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
    <td><span>rhs</span></td>
   </tr>
   <tr>
    <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
    <td><span>border</span></td>
    <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
    <td><span>box</span></td>
   </tr>
   <tr>
    <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
    <td><span>void</span></td>
   </tr>
  </tbody>
 </table>

 <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it has been deprecated: the {{HTMLElement("table")}} element should be styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. To give a similar effect than the <span>frame</span> attribute, use the <a href="/en-US/docs/CSS" title="CSS">CSS</a> properties {{cssxref("border-style")}} and {{cssxref("border-width")}}.</div>
 </dd>
</dl>

<dl>
 <dt>{{htmlattrdef("rules")}} {{Deprecated_inline()}}</dt>
 <dd>This enumerated attribute defines where rules, i.e. lines, should appear in a table. It can have the following values:
 <ul>
  <li><span>none</span>, which indicates the no rules will be displayed; it is the default value;</li>
  <li><span>groups</span>, which will make the rules to be displayed between row groups (defined by the {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} and {{HTMLElement("tfoot")}} elements) and between column groups (defined by the {{HTMLElement("col")}} and {{HTMLElement("colgroup")}} elements) only;</li>
  <li><span>rows</span>, which will make the rules to be displayed between rows;</li>
  <li><span>columns</span>, which will make the rules to be displayed between columns;</li>
  <li><span>all</span>, which wil make the rules to be displayed between rows and columns.</li>
 </ul>

 <div class="note"><strong>Note</strong>:

 <ul>
  <li>The styling of the rules is browser-dependant and cannot be modified.</li>
  <li>Do not use this attribute, as it has been deprecated: the rules should be defined and styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. use the <a href="/en-US/docs/CSS" title="CSS">CSS</a> property {{cssxref("border")}} on the adequate {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("col")}} or {{HTMLElement("colgroup")}} elements.</li>
 </ul>
 </div>
 </dd>
</dl>

<dl>
 <dt>{{htmlattrdef("summary")}} {{Deprecated_inline}}</dt>
 <dd>This attribute defines an alternative text use to describe the table in user-agent unable to display it. Typically, it contents a description of it to allow visually impaired people, like blind people browsing the web using Braille screen, to get the information in it. If the information added in this attribute may also be useful for non-visually impaired people, consider using the {{HTMLElement("caption")}} instead. The summary attribute is not mandatory and may be omitted when a {{HTMLElement("caption")}} element fulfills its role.
 <div class="note"><strong>Usage Note: </strong>Do not use this attribute, as it has been deprecated. Instead, use one of these way of describing a table:
 <ul>
  <li>In prose, surrounding the table (this is the less semantic-conveying way of doing it).</li>
  <li>In the table's {{HTMLElement("caption")}} element.</li>
  <li>In a {{HTMLElement("details")}} element, inside the table's {{HTMLElement("caption")}} element.</li>
  <li>Include the {{HTMLElement("table")}} element in a {{HTMLElement("figure")}} element and add the description in prose next to it.</li>
  <li>Include the {{HTMLElement("table")}} element in a {{HTMLElement("figure")}} element and add the description in prose inside a {{HTMLElement("figcaption")}} element.</li>
  <li>Adjust the table so that such description is no more needed, by using {{HTMLElement("th")}} and {{HTMLElement("thead")}} elements for example.</li>
 </ul>
 </div>
 </dd>
</dl>

<dl>
 <dt>{{htmlattrdef("width")}} {{Deprecated_inline}}</dt>
 <dd>This attribute defines the width of the table. It may either be a pixel length or a percentage value, representing the percentage of the width of its container that the table should use.
 <div class="note"><strong>Usage Note: </strong>Do not use this attribute, as it has been deprecated: the rules should be defined and styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. use the <a href="/en-US/docs/CSS" title="CSS">CSS</a> property {{cssxref("width")}} instead.</div>
 </dd>
</dl>

<h2 id="DOM_interface">DOM interface</h2>

<p>This element implements the <code><a href="/en-US/docs/DOM/HTMLTableElement" title="DOM/HTMLTableElement">HTMLTableElement</a></code> interface.</p>

<h2 id="Beispiele">Beispiele</h2>

<h3 id="Einfache_Tabelle">Einfache Tabelle</h3>

<pre class="brush: html" style="font-size: 12px;">&lt;table&gt;
  &lt;tr&gt;
    &lt;td&gt;Max&lt;/td&gt;
    &lt;td&gt;Mustermann&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Maxine&lt;/td&gt;
    &lt;td&gt;Mustermann&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</pre>

<p><span style="line-height: 1.5;">{{ EmbedLiveSample('Einfache_Tabelle', '100%', '100') }}</span></p>

<h3 id="Weitere_Beispiele">Weitere Beispiele</h3>

<pre class="brush: html">&lt;p&gt;Einfache Tabelle mit Überschrift&lt;/p&gt;
&lt;table&gt;
  &lt;tr&gt;
    &lt;th&gt;Vorname&lt;/th&gt;
    &lt;th&gt;Nachname&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Max&lt;/td&gt;
    &lt;td&gt;Mustermann&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Maxine&lt;/td&gt;
    &lt;td&gt;Mustermann&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;

&lt;p&gt;Tabelle mit thead, tfoot, and tbody&lt;/p&gt;
&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Header content 1&lt;/th&gt;
      &lt;th&gt;Header content 2&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tfoot&gt;
    &lt;tr&gt;
      &lt;td&gt;Footer content 1&lt;/td&gt;
      &lt;td&gt;Footer content 2&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tfoot&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;Body content 1&lt;/td&gt;
      &lt;td&gt;Body content 2&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;

&lt;p&gt;Tabelle mit colgroup&lt;/p&gt;
&lt;table&gt;
  &lt;colgroup span="4" class="columns"&gt;&lt;/colgroup&gt;
  &lt;tr&gt;
    &lt;th&gt;Länder&lt;/th&gt;
    &lt;th&gt;Hauptstädte&lt;/th&gt;
    &lt;th&gt;Bevölkerung&lt;/th&gt;
    &lt;th&gt;Sprache&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;USA&lt;/td&gt;
    &lt;td&gt;Washington D.C.&lt;/td&gt;
    &lt;td&gt;309 Millionen&lt;/td&gt;
    &lt;td&gt;Englisch&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Schweden&lt;/td&gt;
    &lt;td&gt;Stockholm&lt;/td&gt;
    &lt;td&gt;9 Millionen&lt;/td&gt;
    &lt;td&gt;Schwedisch&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;

&lt;p&gt;Tabelle mit colgroup und col&lt;/p&gt;
&lt;table&gt;
  &lt;colgroup&gt;
    &lt;col class="column1"&gt;
    &lt;col class="columns2plus3" span="2"&gt;
  &lt;/colgroup&gt;
  &lt;tr&gt;
    &lt;th&gt;Limone&lt;/th&gt;
    &lt;th&gt;Zitrone&lt;/th&gt;
    &lt;th&gt;Orange&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Grün&lt;/td&gt;
    &lt;td&gt;Gelb&lt;/td&gt;
    &lt;td&gt;Orange&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;

&lt;p&gt;Einfache Tabelle mit Beschreibung&lt;/p&gt;
&lt;table&gt;
  &lt;caption&gt;Unglaublich tolle Beschreibung&lt;/caption&gt;
  &lt;tr&gt;
    &lt;td&gt;Unglaublich tolle Daten&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
</pre>

<div class="hidden">
<pre class="brush: css">table
{
border-collapse: collapse;
border-spacing: 0px;
}
table, th, td
{
padding: 5px;
border: 1px solid black;
}</pre>
</div>

<p>{{ EmbedLiveSample('Weitere_Beispiele', '100%', '800') }}</p>

<h2 id="Browser_Kompabilität">Browser Kompabilität</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1")}}</td>
   <td>4.0</td>
   <td>7.0</td>
   <td>1.0</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatGeckoMobile("1")}}</td>
   <td>6.0</td>
   <td>6.0</td>
   <td>1.0</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>Other table-related HTML Elements: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li>
 <li>CSS properties that may be specially useful to style the <span style="font-family: courier new;">&lt;table&gt;</span> element:
  <ul>
   <li>{{cssxref("width")}} to control the width of the table;</li>
   <li>{{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-collapse")}}, {{cssxref("border-spacing")}} to control the aspect of cell borders, rules and frame;</li>
   <li>{{cssxref("margin")}} and {{cssxref("padding")}} to style the individual cell content;</li>
   <li>{{cssxref("text-align")}} and {{cssxref("vertical-align")}} to define alignment of text and cell content.</li>
  </ul>
 </li>
</ul>

<p>{{HTMLRef}}</p>