diff options
Diffstat (limited to 'files/fr/web/api/htmltableelement')
| -rw-r--r-- | files/fr/web/api/htmltableelement/caption/index.html | 26 | ||||
| -rw-r--r-- | files/fr/web/api/htmltableelement/index.html | 110 | ||||
| -rw-r--r-- | files/fr/web/api/htmltableelement/insertrow/index.html | 152 |
3 files changed, 288 insertions, 0 deletions
diff --git a/files/fr/web/api/htmltableelement/caption/index.html b/files/fr/web/api/htmltableelement/caption/index.html new file mode 100644 index 0000000000..a3d9226edd --- /dev/null +++ b/files/fr/web/api/htmltableelement/caption/index.html @@ -0,0 +1,26 @@ +--- +title: table.caption +slug: Web/API/HTMLTableElement/caption +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/HTMLTableElement/caption +--- +<p>{{ ApiRef() }}</p> +<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<p><b>caption</b> renvoie la légende du tableau.</p> +<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<pre class="eval"><i>string</i> = table.caption +</pre> +<h3 id="Exemple" name="Exemple">Exemple</h3> +<pre class="eval">if (table.caption) { + // On peut alors faire quelque chose avec la légende du tableau +} +</pre> +<h3 id="Notes" name="Notes">Notes</h3> +<p>Cette propriété ne renvoie rien s'il n'y a aucune légende pour le tableau.</p> +<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-14594520">DOM Level 2 HTML : caption</a> <small>(<a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-14594520">traduction</a>)</small></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-12035137">Interface HTMLTableCaptionElement</a> <small>(<a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-12035137">traduction</a>)</small></li> +</ul> +<p>{{ languages( { "en": "en/DOM/table.caption", "pl": "pl/DOM/table.caption" } ) }}</p> diff --git a/files/fr/web/api/htmltableelement/index.html b/files/fr/web/api/htmltableelement/index.html new file mode 100644 index 0000000000..ab997c53a9 --- /dev/null +++ b/files/fr/web/api/htmltableelement/index.html @@ -0,0 +1,110 @@ +--- +title: table +slug: Web/API/HTMLTableElement +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/HTMLTableElement +--- +<div> + {{ ApiRef() }}</div> +<h2 id="Interface_de_l.27.C3.A9l.C3.A9ment_HTML_Table" name="Interface_de_l.27.C3.A9l.C3.A9ment_HTML_Table">Interface de l'élément HTML Table</h2> +<p>Les objets <code>table</code> exposent l'interface <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-64060425"><code>HTMLTableElement</code></a> <small>(<a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-64060425">traduction</a>)</small>, qui fournit des propriétés et méthodes spécialisées (outre l'interface des objets <a href="/fr/docs/DOM/element">element</a> qu'ils acquièrent également par héritage) pour manipuler la disposition et la présentation des tableaux en HTML.</p> +<h2 id="Propri.C3.A9t.C3.A9s" name="Propri.C3.A9t.C3.A9s">Propriétés</h2> +<dl> + <dt> + <a href="/fr/docs/DOM/table.caption">table.caption</a></dt> + <dd> + <b>caption</b> renvoie la légende du tableau.</dd> + <dt> + <a href="/fr/docs/DOM/table.tHead">table.tHead</a></dt> + <dd> + <b>tHead</b> renvoie l'en-tête du tableau.</dd> + <dt> + <a href="/fr/docs/DOM/table.tFoot">table.tFoot</a></dt> + <dd> + <b>tFoot</b> renvoie le pied du tableau.</dd> + <dt> + <a href="/fr/docs/DOM/table.rows">table.rows</a></dt> + <dd> + <b>rows</b> renvoie les lignes du tableau.</dd> + <dt> + <a href="/fr/docs/DOM/table.tBodies">table.tBodies</a></dt> + <dd> + <b>tBodies</b> renvoie les corps du tableau.</dd> +</dl> +<dl> + <dt> + <a href="/fr/docs/DOM/table.align">table.align</a> {{ Deprecated_inline() }}</dt> + <dd> + <b>align</b> obtient ou définit l'alignement du tableau.</dd> + <dt> + <a href="/fr/docs/DOM/table.bgColor">table.bgColor</a> {{ Deprecated_inline() }}</dt> + <dd> + <b>bgColor</b> obtient ou définit la couleur de fond du tableau.</dd> + <dt> + <a href="/fr/docs/DOM/table.border">table.border</a> {{ Deprecated_inline() }}</dt> + <dd> + <b>border</b> obtient ou défini la bordure du tableau.</dd> + <dt> + <a href="/fr/docs/DOM/table.cellPadding">table.cellPadding</a></dt> + <dd> + <b>cellPadding</b> obtient ou définit les marges internes ( + <i> + padding</i> + ) des cellules.</dd> + <dt> + <a href="/fr/docs/DOM/table.cellSpacing">table.cellSpacing</a></dt> + <dd> + <b>cellSpacing</b> obtient ou définit l'espace entre les cellules.</dd> + <dt> + <a href="/fr/docs/DOM/table.frame">table.frame</a></dt> + <dd> + <b>frame</b> spécifie les côtés du tableau ayant une bordure.</dd> + <dt> + <a href="/fr/docs/DOM/table.rules">table.rules</a></dt> + <dd> + <b>rules</b> spécifie les bordures intérieures visibles.</dd> + <dt> + <a href="/fr/docs/DOM/table.summary">table.summary</a></dt> + <dd> + <b>summary</b> obtient ou définit le résumé du tableau.</dd> + <dt> + <a href="/fr/docs/DOM/table.width">table.width</a></dt> + <dd> + <b>width</b> obtient ou définit la largeur du tableau.</dd> +</dl> +<h2 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h2> +<dl> + <dt> + <a href="/fr/docs/DOM/table.createTHead">table.createTHead</a></dt> + <dd> + <b>createTHead</b> crée un en-tête de tableau.</dd> + <dt> + <a href="/fr/docs/DOM/table.deleteTHead">table.deleteTHead</a></dt> + <dd> + <b>deleteTHead</b> retire l'en-tête du tableau.</dd> + <dt> + <a href="/fr/docs/DOM/table.createTFoot">table.createTFoot</a></dt> + <dd> + <b>createTFoot</b> crée un pied de tableau.</dd> + <dt> + <a href="/fr/docs/DOM/table.deleteTFoot">table.deleteTFoot</a></dt> + <dd> + <b>deleteTFoot</b> retire un pied de tableau.</dd> + <dt> + <a href="/fr/docs/DOM/table.createCaption">table.createCaption</a></dt> + <dd> + <b>createCaption</b> crée une nouvelle légende pour le tableau.</dd> + <dt> + <a href="/fr/docs/DOM/table.deleteCaption">table.deleteCaption</a></dt> + <dd> + <b>deleteCaption</b> retire la légende d'un tableau.</dd> + <dt> + <a href="/fr/docs/DOM/table.insertRow">table.insertRow</a></dt> + <dd> + <b>insertRow</b> insère une nouvelle ligne.</dd> + <dt> + <a href="/fr/docs/DOM/table.deleteRow">table.deleteRow</a></dt> + <dd> + <b>deleteRow</b> retire une ligne.</dd> +</dl> diff --git a/files/fr/web/api/htmltableelement/insertrow/index.html b/files/fr/web/api/htmltableelement/insertrow/index.html new file mode 100644 index 0000000000..737195cf29 --- /dev/null +++ b/files/fr/web/api/htmltableelement/insertrow/index.html @@ -0,0 +1,152 @@ +--- +title: table.insertRow +slug: Web/API/HTMLTableElement/insertRow +tags: + - API + - DOM HTML + - HTMLTableElement + - Méthode + - NeedsMobileBrowserCompatibility + - Reference +translation_of: Web/API/HTMLTableElement/insertRow +--- +<div> +<p>{{APIRef("HTML DOM")}}</p> + +<p>La méthode <strong><code>HTMLTableElement.insertRow()</code></strong> insère une nouvelle ligne dans la table et retourne une référence à la nouvelle ligne.</p> +</div> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox">var <em>ligne</em> = <em>HTMLTableElement</em>.insertRow(<em>optionnel indice = -1</em>);</pre> + +<ul> + <li><a href="/en-US/docs/DOM/HTMLTableElement" title="DOM/HTMLTableElement"><code>HTMLTableElement</code></a> est une référence à un élément table HTML.</li> + <li><code>indice</code> est l'indice de ligne de la nouvelle ligne.</li> + <li><code>ligne</code> reçoit la référence à la nouvelle ligne. Une référence à un <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement">HTMLTableRowElement</a>. Si l'indice est -1 ou est égal au nombre de lignes, la ligne est ajoutée comme dernière ligne. Si <code>indice</code> est plus grand que le nombre de lignes, une exception IndexSizeError sera générée. Si indice est omis, sa valeur sera -1 par défaut.</li> + <li>Si une table a plusieurs éléments <code>tbody</code>, par défaut, la nouvelle ligne est ajoutée dans le dernier <code>tbody</code>. Pour insérer la ligne dans un <code>tbody</code> particulier :<br> + <code>var <em>tbody_particulier</em></code><code>=document.getElementById(<em>id_tbody</em>);<br> + var <em>ligne</em>=tbody_particulier.</code><code>insertRow(<em>indice</em>)</code></li> +</ul> + +<h2 id="Example" name="Example">Exemple</h2> + +<pre class="brush:html"><table id="TableA"> +<tr> +<td>Ancienne ligne supérieure</td> +</tr> +</table> +<script type="text/javascript"> + +function ajouteLigne(tableID) { + // Récupération d'une référence à la table + var refTable = document.getElementById(tableID); + + // Insère une ligne dans la table à l'indice de ligne 0 + var nouvelleLigne = refTable.insertRow(0); + + // Insère une cellule dans la ligne à l'indice 0 + var nouvelleCellule = nouvelleLigne.insertCell(0); + + // Ajoute un nœud texte à la cellule + var nouveauTexte = document.createTextNode('Nouvelle ligne supérieure') + nouvelleCellule.appendChild(nouveauTexte); +} + +// Appelle ajouteLigne() avec l'ID d'une table +ajouteLigne('TableA'); + +</script></pre> + +<p>Pour être valide dans un document HTML, un élément TR doit avoir au moins un élément TD.</p> + +<p>Remarquez que <code>insertRow</code> insère directement la ligne dans la table et renvoie une référence à la nouvelle ligne. La ligne n'a pas besoin d'être ajoutée séparement comme cela aurait été le cas si <code><a href="/en-US/docs/DOM/document.createElement" title="DOM/document.createElement">document.createElement()</a></code> avait été utilisé pour créer un nouvel élement TR.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table> + <tbody> + <tr> + <th>Spécification</th> + <th>Statut</th> + <th>Commentaire</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>Spécifie plus en détail où la ligne est insérée.</td> + </tr> + <tr> + <td>{{SpecName("DOM1", "level-one-html.html#ID-39872903", "HTMLTableElement.insertRow()")}}</td> + <td>{{Spec2("DOM1")}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p> </p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<p>{{CompatibilityTable}}</p> + +<table> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Support de base</td> + <td>4</td> + <td>{{CompatVersionUnknown}}</td> + <td>3<sup>[1]</sup></td> + <td>5.5</td> + <td>10</td> + <td>4</td> + </tr> + </tbody> +</table> + +<table> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support de base</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> + +<p>[1] A partir de Gecko 20.0 {{geckoRelease("20.0")}}, l'argument indice a été rendu optionnel et a -1 comme valeur par défaut d'après la spécification HTML.</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("HTMLTableRowElement.insertCell()")}}</li> +</ul> |