aboutsummaryrefslogtreecommitdiff
path: root/files/de/web/api/htmltableelement
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:41:15 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:41:15 -0500
commit4b1a9203c547c019fc5398082ae19a3f3d4c3efe (patch)
treed4a40e13ceeb9f85479605110a76e7a4d5f3b56b /files/de/web/api/htmltableelement
parent33058f2b292b3a581333bdfb21b8f671898c5060 (diff)
downloadtranslated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.gz
translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.bz2
translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.zip
initial commit
Diffstat (limited to 'files/de/web/api/htmltableelement')
-rw-r--r--files/de/web/api/htmltableelement/createcaption/index.html75
-rw-r--r--files/de/web/api/htmltableelement/index.html132
-rw-r--r--files/de/web/api/htmltableelement/insertrow/index.html122
3 files changed, 329 insertions, 0 deletions
diff --git a/files/de/web/api/htmltableelement/createcaption/index.html b/files/de/web/api/htmltableelement/createcaption/index.html
new file mode 100644
index 0000000000..fb27bd6480
--- /dev/null
+++ b/files/de/web/api/htmltableelement/createcaption/index.html
@@ -0,0 +1,75 @@
+---
+title: HTMLTableElement.createCaption()
+slug: Web/API/HTMLTableElement/createCaption
+tags:
+ - API
+ - DOM
+ - HTML DOM
+ - HTMLTableElement
+ - Method
+ - Reference
+translation_of: Web/API/HTMLTableElement/createCaption
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Die <code><strong>HTMLTableElement.createCaption()</strong></code> Methode gibt das {{HtmlElement("caption")}} Element zurück, das einer {{HtmlElement("table")}} zugeordnet ist. Wenn in der Tabelle noch kein <code>&lt;caption&gt;</code> Element existiert, wird es durch diese Methode erzeugt und dann zurückgegeben..</p>
+
+<div class="blockIndicator note">
+<p><strong>Anmerkung:</strong> Wenn noch keine Überschrift vorhanden ist, fügt <code>createCaption()</code> sie direkt in die Tabelle ein. Die Überschrift muss nicht eigens hinzugefügt werden, wie man es tun müsste, wenn man das <code>&lt;caption&gt;</code> Element mittels {{domxref("Document.createElement()")}} erzeugt hätte.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><em>HTMLTableCaptionElement</em> = <em>table</em>.createCaption();</pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>{{domxref("HTMLTableCaptionElement")}}</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Dieses Beispiel verwendet JavaScript, um eine Tabelle um eine Überschrift zu erweitern.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;table&gt;
+ &lt;tr&gt;&lt;td&gt;Cell 1.1&lt;/td&gt;&lt;td&gt;Cell 1.2&lt;/td&gt;&lt;td&gt;Cell 1.3&lt;/td&gt;&lt;/tr&gt;
+ &lt;tr&gt;&lt;td&gt;Cell 2.1&lt;/td&gt;&lt;td&gt;Cell 2.2&lt;/td&gt;&lt;td&gt;Cell 2.3&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js; highlight:[2] notranslate">let table = document.querySelector('table');
+let caption = table.createCaption();
+caption.textContent = 'Diese Überschrift wurde mit JavaScript erzeugt!';</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>{{EmbedLiveSample("Beispiel")}}</p>
+
+<h2 id="Specification" name="Specification">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('HTML WHATWG', '#dom-table-createcaption', 'HTMLTableElement: createCaption')}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("api.HTMLTableElement.createCaption")}}</p>
+</div>
diff --git a/files/de/web/api/htmltableelement/index.html b/files/de/web/api/htmltableelement/index.html
new file mode 100644
index 0000000000..696556f62f
--- /dev/null
+++ b/files/de/web/api/htmltableelement/index.html
@@ -0,0 +1,132 @@
+---
+title: HTMLTableElement
+slug: Web/API/HTMLTableElement
+tags:
+ - API
+ - HTML DOM
+ - Interface
+ - NeedsTranslation
+ - Reference
+ - TopicStub
+translation_of: Web/API/HTMLTableElement
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>The <strong><code>HTMLTableElement</code></strong> interface provides special properties and methods (beyond the regular {{DOMxRef("HTMLElement")}} object interface it also has available to it by inheritance) for manipulating the layout and presentation of tables in an HTML document.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent, {{DOMxRef("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{DOMxRef("HTMLTableElement.caption")}}</dt>
+ <dd>Is a {{DOMxRef("HTMLTableCaptionElement")}} representing the first {{HTMLElement("caption")}} that is a child of the element, or <code>null</code> if none is found. When set, if the object doesn't represent a <code>&lt;caption&gt;</code>, a {{DOMxRef("DOMException")}} with the <code>HierarchyRequestError</code> name is thrown. If a correct object is given, it is inserted in the tree as the first child of this element and the first <code>&lt;caption&gt;</code> that is a child of this element is removed from the tree, if any.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.tHead")}}</dt>
+ <dd>Is a {{DOMxRef("HTMLTableSectionElement")}} representing the first {{HTMLElement("thead")}} that is a child of the element, or <code>null</code> if none is found. When set, if the object doesn't represent a <code>&lt;thead&gt;</code>, a {{DOMxRef("DOMException")}} with the <code>HierarchyRequestError</code> name is thrown. If a correct object is given, it is inserted in the tree immediately before the first element that is neither a {{HTMLElement("caption")}}, nor a {{HTMLElement("colgroup")}}, or as the last child if there is no such element, and the first <code>&lt;thead&gt;</code> that is a child of this element is removed from the tree, if any.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.tFoot")}}</dt>
+ <dd>Is a {{DOMxRef("HTMLTableSectionElement")}} representing the first {{HTMLElement("tfoot")}} that is a child of the element, or <code>null</code> if none is found. When set, if the object doesn't represent a <code>&lt;tfoot&gt;</code>, a {{DOMxRef("DOMException")}} with the <code>HierarchyRequestError</code> name is thrown. If a correct object is given, it is inserted in the tree immediately before the first element that is neither a {{HTMLElement("caption")}}, a {{HTMLElement("colgroup")}}, nor a {{HTMLElement("thead")}}, or as the last child if there is no such element, and the first <code>&lt;tfoot&gt;</code> that is a child of this element is removed from the tree, if any.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.rows")}}{{ReadOnlyInline}}</dt>
+ <dd>Returns a live {{DOMxRef("HTMLCollection")}} containing all the rows of the element, that is all {{HTMLElement("tr")}} that are a child of the element, or a child of one of its {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} and {{HTMLElement("tfoot")}} children. The rows members of a <code>&lt;thead&gt;</code> appear first, in tree order, and those members of a <code>&lt;tbody&gt;</code> last, also in tree order. The <code>HTMLCollection</code> is live and is automatically updated when the <code>HTMLTableElement</code> changes.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.tBodies")}}{{ReadOnlyInline}}</dt>
+ <dd>Returns a live {{DOMxRef("HTMLCollection")}} containing all the {{HTMLElement("tbody")}} of the element. The <code>HTMLCollection</code> is live and is automatically updated when the <code>HTMLTableElement</code> changes.</dd>
+</dl>
+
+<h3 id="Obsolete_Properties">Obsolete Properties</h3>
+
+<div class="blockIndicator warning">
+<p><strong>Warning:</strong> The following properties are obsolete.  You should avoid using them.</p>
+</div>
+
+<details>
+<dl>
+ <dt>{{DOMxRef("HTMLTableElement.align")}} {{Obsolete_Inline}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} containing an enumerated value reflecting the {{HTMLAttrxRef("align", "table")}} attribute. It indicates the alignment of the element's contents with respect to the surrounding context. The possible values are <code>"left"</code>, <code>"right"</code>, and <code>"center"</code>.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.bgColor")}} {{Obsolete_Inline}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} containing the background color of the cells. It reflects the obsolete {{HTMLAttrxRef("bgColor", "table")}} attribute.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.border")}} {{Obsolete_Inline}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} containing the width in pixels of the border of the table. It reflects the obsolete {{HTMLAttrxRef("border", "table")}} attribute.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.cellPadding")}} {{Obsolete_Inline}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} containing the width in pixels of the horizontal and vertical sapce between cell content and cell borders. It reflects the obsolete {{HTMLAttrxRef("cellpadding", "table")}} attribute.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.cellSpacing")}} {{Obsolete_Inline}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} containing the width in pixels of the horizontal and vertical separation between cells. It reflects the obsolete {{HTMLAttrxRef("cellspacing", "table")}} attribute.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.frame")}} {{Obsolete_Inline}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} containing the type of the external borders of the table. It reflects the obsolete {{HTMLAttrxRef("frame", "table")}} attribute and can take one of the following values: <code>"void"</code>, <code>"above"</code>, <code>"below"</code>, <code>"hsides"</code>, <code>"vsides"</code>, <code>"lhs"</code>, <code>"rhs"</code>, <code>"box"</code>, or <code>"border"</code>.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.rules")}} {{Obsolete_Inline}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} containing the type of the internal borders of the table. It reflects the obsolete {{HTMLAttrxRef("rules", "table")}} attribute and can take one of the following values: <code>"none"</code>, <code>"groups"</code>, <code>"rows"</code>, <code>"cols"</code>, or <code>"all"</code>.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.summary")}} {{Obsolete_Inline}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} containing a description of the purpose or the structure of the table. It reflects the obsolete {{HTMLAttrxRef("summary", "table")}} attribute.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.width")}} {{Obsolete_Inline}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} containing the length in pixels or in percentage of the desired width fo the entire table. It reflects the obsolete {{HTMLAttrxRef("width", "table")}} attribute.</dd>
+</dl>
+</details>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, {{DOMxRef("HTMLElement")}}</em>.</p>
+
+<dl>
+ <dt>{{DOMxRef("HTMLTableElement.createTHead()")}}</dt>
+ <dd>Returns an {{DOMxRef("HTMLElement")}} representing the first {{HTMLElement("thead")}} that is a child of the element. If none is found, a new one is created and inserted in the tree immediately before the first element that is neither a {{HTMLElement("caption")}}, nor a {{HTMLElement("colgroup")}}, or as the last child if there is no such element.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.deleteTHead()")}}</dt>
+ <dd>Removes the first {{HTMLElement("thead")}} that is a child of the element.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.createTFoot()")}}</dt>
+ <dd>Returns an {{DOMxRef("HTMLElement")}} representing the first {{HTMLElement("tfoot")}} that is a child of the element. If none is found, a new one is created and inserted in the tree immediately before the first element that is neither a {{HTMLElement("caption")}}, a {{HTMLElement("colgroup")}}, nor a {{HTMLElement("thead")}}, or as the last child if there is no such element.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.deleteTFoot()")}}</dt>
+ <dd>Removes the first {{HTMLElement("tfoot")}} that is a child of the element.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.createCaption()")}}</dt>
+ <dd>Returns an {{DOMxRef("HTMLElement")}} representing the first {{HTMLElement("caption")}} that is a child of the element. If none is found, a new one is created and inserted in the tree as the first child of the {{HTMLElement("table")}} element.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.deleteCaption()")}}</dt>
+ <dd>Removes the first {{HTMLElement("caption")}} that is a child of the element.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.insertRow()")}}</dt>
+ <dd>Returns an {{DOMxRef("HTMLTableRowElement")}} representing a new row of the table. It inserts it in the rows collection immediately before the {{HTMLElement("tr")}} element at the given <code>index</code> position. If necessary a {{HTMLElement("tbody")}} is created. If the <code>index</code> is <code>-1</code>, the new row is appended to the collection. If the <code>index</code> is smaller than <code>-1</code> or greater than the number of rows in the collection, a {{DOMxRef("DOMException")}} with the value <code>IndexSizeError</code> is raised.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.deleteRow()")}}</dt>
+ <dd>Removes the row corresponding to the <code>index</code> given in parameter. If the <code>index</code> value is <code>-1</code> the last row is removed; if it smaller than <code>-1</code> or greater than the amount of rows in the collection, a {{DOMxRef("DOMException")}} with the value <code>IndexSizeError</code> is raised.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('HTML WHATWG', "#htmltableelement", "HTMLTableElement")}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>Added the <code>sortable</code> property and the <code>stopSorting()</code> method.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5 W3C', "tabular-data.html#the-table-element", "HTMLTableElement")}}</td>
+ <td>{{Spec2('HTML5 W3C')}}</td>
+ <td>Added the <code>createTBody()</code> method.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('DOM2 HTML', 'html.html#ID-64060425', 'HTMLTableElement')}}</td>
+ <td>{{Spec2('DOM2 HTML')}}</td>
+ <td>Defined when <code>caption</code>, <code>tHead</code>, <code>tFoot</code>, <code>insertRow()</code>, and <code>deleteRow()</code> raise exceptions.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('DOM1', 'level-one-html.html#ID-64060425', 'HTMLTableElement')}}</td>
+ <td>{{Spec2('DOM1')}}</td>
+ <td>Initial definition.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLTableElement")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The HTML element implementing this interface: {{HTMLElement("table")}}.</li>
+</ul>
diff --git a/files/de/web/api/htmltableelement/insertrow/index.html b/files/de/web/api/htmltableelement/insertrow/index.html
new file mode 100644
index 0000000000..869d185b98
--- /dev/null
+++ b/files/de/web/api/htmltableelement/insertrow/index.html
@@ -0,0 +1,122 @@
+---
+title: HTMLTableElement.insertRow()
+slug: Web/API/HTMLTableElement/insertRow
+tags:
+ - API
+ - HTML DOM
+ - HTMLTableElement
+ - Method
+ - Reference
+translation_of: Web/API/HTMLTableElement/insertRow
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Die Methode <strong><code>HTMLTableElement.insertRow()</code></strong> fügt einer vorhandenen {{HtmlElement("table")}} eine neue Zeile ({{HtmlElement("tr")}}) hinzu und gibt eine Referenz auf die neue Zeile zurück.</p>
+
+<p>Wenn eine Tabelle mehrere {{HtmlElement("tbody")}} Elemente besitzt, wird die neue Zeile standardmäßig dem letzten <code>&lt;tbody&gt;</code> hinzugefügt. Um sie einem bestimmten <code>&lt;tbody&gt;</code> Element hinzuzufügen, beschaffen Sie sich eine Referenz auf das gewünschte <code>&lt;tbody&gt;</code> Element und rufen Sie <code>insertRow()</code> auf diesem Element auf:</p>
+
+<pre class="brush: js notranslate">let bestimmter_tbody = document.getElementById(tbody_id);
+let zeile = bestimmter_tbody.insertRow(index)</pre>
+
+
+
+<div class="blockIndicator note">
+<p><strong>Anmerkung:</strong> <code>insertRow()</code> fügt die Zeile direkt in die Tabelle ein. Die Zeile muss nicht eigens hinzugefügt werden, wie man es tun müsste, wenn man das <code>&lt;tr&gt;</code> Element mittels <a href="https://wiki.developer.mozilla.org/de/docs/Web/API/Document/createElement"><code>Document.createElement()</code></a> erzeugt hätte.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">var <em>neueZeile</em> = <em>HTMLTableElement</em>.insertRow(<em>index</em>);</pre>
+
+<p>{{domxref("HTMLTableElement")}} ist eine Referenz auf ein HTML {{HtmlElement("table")}} Element.</p>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>index</code> {{optional_inline}}</dt>
+ <dd>Der Zeilenindex der neuen Zeile. Ist der Index <code>-1</code> or gleich der Anzahl der vorhandenen Zeilen, wird die Zeile als letzte Zeile angefügt. Wenn <code>index</code> größer als die Anzahl vorhandener Zeilen ist, führt dies zi einer <code>IndexSizeError</code> Exception. Wird <code>index</code> weggelassen, ist der Standardwert <code>-1</code>.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p><code>neueZeile</code> ist ein {{domxref("HTMLTableRowElement")}}, das die neue Zeile referenziert.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Dieses Beispiel verwendet <code>insertRow(-1)</code>, um an eine Tabelle eine neue Zeile anzufügen.</p>
+
+<p>Wir verwenden daraufhin {{domxref("HTMLTableRowElement.insertCell()")}}, um der neuen Zeile noch eine Zelle hinzufügen. (Um gültiges HTML zu sein, muss ein <code>&lt;tr&gt;</code> mindestens ein <code>&lt;td&gt;</code> Element enthalten.) Schließlich fügen wir der Zelle mittels {{domxref("Document.createTextNode()")}} und {{domxref("Node.appendChild()")}} Text hinzu.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;table id="my-table"&gt;
+ &lt;tr&gt;&lt;td&gt;Row 1&lt;/td&gt;&lt;/tr&gt;
+ &lt;tr&gt;&lt;td&gt;Row 2&lt;/td&gt;&lt;/tr&gt;
+ &lt;tr&gt;&lt;td&gt;Row 3&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">function addRow(tableID) {
+ // Beschaffe eine Referenz auf die Tabelle
+ let tableRef = document.getElementById(tableID);
+
+ // Füge am Ende der Tabelle eine neue Zeile an
+ let newRow = tableRef.insertRow(-1);
+
+ // Erstelle in der Zeile eine Zelle am Index 0
+ let newCell = newRow.insertCell(0);
+
+ // Füge der Zelle einen textnode hinzu
+ let newText = document.createTextNode('Neue letzte Zeile');
+ newCell.appendChild(newText);
+}
+
+// Rufe addRow() mit der ID der Tabelle auf
+addRow('my-table');</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Beispiel")}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th>Specification</th>
+ <th>Status</th>
+ <th>Comment</th>
+ </tr>
+ <tr>
+ <td>{{SpecName("HTML WHATWG", "tables.html#dom-table-insertrow", "HTMLTableElement.insertRow()")}}</td>
+ <td>{{Spec2("HTML WHATWG")}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName("DOM2 HTML", "html.html#ID-93995626", "HTMLTableElement.insertRow()")}}</td>
+ <td>{{Spec2("DOM2 HTML")}}</td>
+ <td>Spezifiziert genauer, wo die Zeile eingefügt wird.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName("DOM1", "level-one-html.html#ID-39872903", "HTMLTableElement.insertRow()")}}</td>
+ <td>{{Spec2("DOM1")}}</td>
+ <td>Initiale Definition</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.HTMLTableElement.insertRow")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("HTMLTableRowElement.insertCell()")}}</li>
+ <li>Das HTML Element, das Zeilen repräsentiert: {{domxref("HTMLTableRowElement")}}</li>
+</ul>