diff options
Diffstat (limited to 'files/fr/web/html/element/tr/index.html')
| -rw-r--r-- | files/fr/web/html/element/tr/index.html | 491 |
1 files changed, 302 insertions, 189 deletions
diff --git a/files/fr/web/html/element/tr/index.html b/files/fr/web/html/element/tr/index.html index 5ce13aedfc..26ae6e681c 100644 --- a/files/fr/web/html/element/tr/index.html +++ b/files/fr/web/html/element/tr/index.html @@ -1,153 +1,91 @@ --- title: '<tr> : l''élément de ligne d''un tableau' slug: Web/HTML/Element/tr -tags: - - Element - - HTML - - Reference - - Tableaux - - Web translation_of: Web/HTML/Element/tr +browser-compat: html.elements.tr --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><tr></code></strong> définit une ligne de cellules dans un tableau. Une ligne peut être constituée d'éléments {{HTMLElement("td")}} (les données des cellules) et {{HTMLElement("th")}} (les cellules d'en-têtes).</p> +<p>L'élément HTML <strong><code><tr></code></strong> définit une ligne de cellules dans un tableau. Une ligne peut être constituée d'éléments <a href="/fr/docs/Web/HTML/Element/td"><code><td></code></a> (les données des cellules) et <a href="/fr/docs/Web/HTML/Element/th"><code><th></code></a> (les cellules d'en-têtes).</p> <div>{{EmbedInteractiveExample("pages/tabbed/tr.html","tabbed-taller")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<p>Si on veut qu'une cellule s'étende sur plusieurs lignes/colonnes, on pourra utiliser l'attribut <a href="/fr/docs/Web/HTML/Element/td#attr-colspan"><code>colspan</code></a> ou <a href="/fr/docs/Web/HTML/Element/td#attr-rowspan"><code>rowspan</code></a> qui indiquent respectivement le nombre de colonnes / lignes sur lequel s'étendre (la valeur par défaut étant 1).</p> -<p>Si on veut qu'une cellule s'étende sur plusieurs lignes/colonnes, on pourra utiliser l'attribut {{htmlattrxref("colspan", "td")}} ou {{htmlattrxref("rowspan", "td")}} qui indiquent respectivement le nombre de colonnes / lignes sur lequel s'étendre (la valeur par défaut étant 1).</p> +<p>La construction de tableau peut parfois demander un peu de pratique. Au-delà des exemples présentés ci-après, vous pouvez consulter <a href="/fr/docs/Learn/HTML/Tables">les tutoriels sur les tableaux HTML</a> afin d'apprendre comment utiliser ces éléments et attributs HTML afin d'organiser vos données tabulaires.</p> -<p>La construction de tableau peut parfois demander un peu de pratique. Au-delà des exemples présentés ci-après, vous pouvez consulter <a href="/fr/docs/Apprendre/HTML/Tableaux">les tutoriels sur les tableaux HTML</a> afin d'apprendre comment utiliser ces éléments et attributs HTML afin d'organiser vos données tabulaires.</p> +<h2 id="attributes">Attributs</h2> -<h2 id="Attributs">Attributs</h2> - -<p>À l'instar de tous les éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> +<p>À l'instar de tous les éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>. Il existe également plusieurs attributs dépréciés à éviter désormais, mais qui peuvent être utiles pour comprendre du code ancien.</p> <h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3> <dl> - <dt>{{htmlattrdef("align")}}{{Obsolete_Inline("HTML5")}}</dt> - <dd>Cet attribut à valeurs définit l'alignement horizontal pour le contenu de chaque cellule. Les valeurs possibles sont : - <ul> - <li><code>left </code>: le contenu de la cellule est aligné à gauche de la cellule</li> - <li><code>center</code> : le contenu de la cellule est centré horizontalement</li> - <li><code>right</code> : le contenu de la cellule est aligné à droite de la cellule</li> - <li><code>justify</code> : insert des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié</li> - <li><code>char</code> : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum défini par les attributs {{htmlattrxref("char", "tr")}} et {{htmlattrxref("charoff", "tr")}} {{unimplemented_inline(2212)}}.</li> - </ul> + <dt><strong id="attr-align"><code>align</code></strong>{{deprecated_inline}}</dt> + <dd>Une chaîne de caractère qui définit l'alignement horizontal pour le contenu de chaque cellule. C'est un raccourci pour définir l'alignement sur l'ensemble de la ligne plutôt que pour chaque cellule. Les valeurs possibles sont : + <dl> + <dt><code>left</code></dt> + <dd>Le contenu de la cellule est aligné à gauche de la cellule.</dd> + <dt><code>center</code></dt> + <dd>Le contenu de la cellule est centré horizontalement.</dd> + <dt><code>right</code></dt> + <dd>Le contenu de la cellule est aligné à droite de la cellule.</dd> + <dt><code>justify</code></dt> + <dd>Insère des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié.</dd> + <dt><code>char</code></dt> + <dd>Aligne le contenu textuel de la cellule selon un caractère spécial défini par l'attribut <a href="#attr-char"><code>char</code></a> (par exemple un point ou une virgule quand on souhaite aligner des nombres) et le nombre de caractères <a href="#attr-charoff"><code>charoff</code></a> à afficher derrière ce caractère d'alignement. Ce mode d'alignement n'a jamais été pris en charge de façon conséquente.</dd> + </dl> <p>Si cet attribut n'est pas renseigné, la valeur est héritée du nœud parent.</p> - <div class="note"><strong>Notes : </strong>Cet attribut est devenu obsolète dans le dernier standard et ne doit donc plus être utilisé. + <div class="note"><strong>Note :</strong> Cet attribut est devenu obsolète dans le dernier standard et ne doit donc plus être utilisé. <ul> - <li>Pour réaliser les mêmes effets que les valeurs <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code>, il faut utiliser la propriété CSS {{cssxref("text-align")}} sur l'élément</li> - <li>Pour réaliser le même effet qu'avec la valeur <code>char</code>. Il est possible, en CSS3, d'utiliser la valeur de l'attribut {{htmlattrxref("char", "tr")}} comme valeur de la propriété {{cssxref("text-align")}}. {{unimplemented_inline}}.</li> + <li>Pour réaliser les mêmes effets que les valeurs <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code>, il faut utiliser la propriété CSS <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a> sur l'élément</li> + <li>Pour réaliser le même effet qu'avec la valeur <code>char</code>. Il est possible d'utiliser la valeur de l'attribut <a href="#attr-char"><code>char</code></a> comme valeur de la propriété <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a>.</li> </ul> </div> </dd> -</dl> - -<dl> - <dt>{{htmlattrdef("bgcolor")}} {{Obsolete_Inline("HTML5")}}</dt> - <dd>Cet attribut définit la couleur d'arrière-plan de toutes les cellules de la colonne. C'est un code à 6 chiffres hexadécimaux comme défini par le <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé. - <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> - <p><code>aqua</code> = "#00FFFF"</p> - </td> - </tr> - </tbody> - </table> - - <div class="note"><strong>Note d'utilisation : </strong>Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("tr")}} doit être mis en forme grâce au <a href="/fr/docs/CSS">CSS</a>. Pour fournir un effet semblable à celui achevé par l'attribut <code><strong>bgcolor</strong></code>, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}}.</div> + <dt><strong id="attr-bgcolor"><code>bgcolor</code></strong> {{deprecated_inline}}</dt> + <dd>Une chaîne de caractères qui définit la couleur d'arrière-plan de toutes les cellules de la colonne. Il peut s'agit d'une <a href="/fr/docs/Web/CSS/color_value#rgb()">notation hexadécimale #RRGGGBB ou #RGB</a> ou bien d'un <a href="/fr/docs/Web/CSS/color_value#color_keywords">mot-clé</a> pour une couleur. L'absence de cet attribut (ou sa déclaration à <code>null</code> en JavaScript) fera que la couleur des cellules de la ligne sera héritée de la couleur d'arrière-plan de l'élément parent. + <div class="note"><strong>Note :</strong> L'élément <code><tr></code> doit être mis en forme grâce au <a href="/fr/docs/Web/CSS">CSS</a>. Pour fournir un effet semblable à celui achevé par l'attribut <code>bgcolor</code>, il est possible d'utiliser la propriété CSS <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a>.</div> </dd> -</dl> - -<dl> - <dt>{{htmlattrdef("char")}}{{Obsolete_Inline("HTML5")}}</dt> - <dd>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "tr")}} ne vaut pas <code>char</code>, l'attribut est ignoré.</dd> + <dt><strong id="attr-char"><code>char</code></strong>{{deprecated_inline}}</dt> + <dd>Une chaîne de caractère qui définit le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point ou une virgule pour aligner des nombres ou des valeurs monétaires. Si l'attribut <a href="#attr-align"><code>align</code></a> ne vaut pas <code>char</code>, l'attribut est ignoré.</dd> <dd> - <div class="note"><strong>Note d'utilisation : </strong>Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "tr")}}, il faut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</div> + <div class="note"><strong>Note :</strong> Cet attribut est obsolète et peu implémenté : il est donc fortement déconseillé de l'utiliser. Pour réaliser le même effet qu'avec <a href="#attr-char"><code>char</code></a>, il faut utiliser la propriété CSS <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a>.</div> </dd> -</dl> - -<dl> - <dt>{{htmlattrdef("charoff")}} {{Obsolete_Inline("HTML5")}}</dt> - <dd>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère défini par l'attribut<strong> char</strong> à appliquer au contenu des cellules. - <div class="note"><strong>Note d'utilisation: </strong>Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.</div> + <dt><strong id="attr-charoff"><code>charoff</code></strong> {{deprecated_inline}}</dt> + <dd>Une chaîne de caractères utilisée pour indiquer le nombre de caractères à afficher après le caractère défini par l'attribut <code>char</code>. Cela peut par exemple servir à indiquer qu'on souhaite afficher deux chiffres après la virgule pour les valeurs monétaires afin d'indiquer les centimes. + <div class="note"><strong>Note :</strong> Cet attribut ne doit plus être utilisé, car il est maintenant obsolète et que sa compatibilité n'était pas répandue.</div> </dd> -</dl> - -<dl> - <dt>{{htmlattrdef("valign")}} {{Obsolete_Inline("HTML5")}}</dt> - <dd>Cet attribut définit l'alignement vertical du texte des cellules de la ligne. Les valeurs possibles de cet attribut sont : - <ul> - <li><code>baseline</code> qui alignera le texte à la ligne la plus basse possible en utilisant la <a class="external" href="https://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29">ligne de base</a> des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur <code>bottom</code>.</li> - <li><code>bottom</code> qui placera le texte au plus bas de la cellule</li> - <li><code>middle</code> qui centrera verticalement le texte dans la cellule</li> - <li><code>top</code> qui placera le texte au plus haut de la cellule.</li> - </ul> - - <div class="note"><strong>Note: </strong>Cet attribut est obsolète dans le dernier standard, la propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.</div> + <dt><strong id="attr-valign"><code>valign</code></strong> {{deprecated_inline}}</dt> + <dd><p>Une chaîne de caractères qui définit l'alignement vertical du texte des cellules de la ligne. Les valeurs possibles de cet attribut sont :</p> + <dl> + <dt><code>baseline</code></dt> + <dd>Aligne le texte à la ligne la plus basse possible en utilisant la <a href="https://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29">ligne de base</a> des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur <code>bottom</code>.</dd> + <dt><code>bottom</code></dt> + <dd>Place le texte au plus bas de la cellule.</dd> + <dt><code>middle</code></dt> + <dd>Centre verticalement le texte dans la cellule.</dd> + <dt><code>top</code></dt> + <dd>Place le texte au plus haut de la cellule.</dd> + </dl> + + <div class="note"><strong>Note: </strong>Cet attribut est obsolète dans le dernier standard, la propriété CSS <a href="/fr/docs/Web/CSS/vertical-align"><code>vertical-align</code></a> doit être utilisée à la place.</div> </dd> </dl> -<h2 id="Exemples">Exemples</h2> +<h2 id="examples">Exemples</h2> + +<p>Voir <a href="/fr/docs/Web/HTML/Element/table">la page sur <code><table></code></a> pour d'autres exemples sur <code><tr></code>.</p> -<h3 id="Exemple_simple">Exemple simple</h3> +<h3 id="basic_example">Exemple simple</h3> <h4 id="HTML">HTML</h4> -<pre class="brush: html"><table> +<pre class="brush: html"> +<table> <tr> <th>Prénom</th><th>Nom</th> </tr> @@ -157,23 +95,49 @@ translation_of: Web/HTML/Element/tr <tr> <td>Marcel</td> <td>Patulacci</td> </tr> -</table></pre> +</table> +</pre> + +<h4 id="CSS">CSS</h4> -<h4 id="Résultat">Résultat</h4> +<p>Ce fragment de CSS permet d'ajouter une bordure noire autour du tableau et des cellules, y compris pour celles définies avec <code><th></code> ou <code><td></code>. Cela marque clairement la zone de chaque cellule.</p> -<p>{{EmbedLiveSample("Exemple_simple","100%","200")}}</p> +<pre class="brush: css"> +table { + border: 1px solid black; +} -<div class="note"> -<p><strong>Note :</strong> Pour plus d'exemples, voir la page {{HTMLElement("table")}}.</p> -</div> +th, td { + border: 1px solid black; +} +</pre> + +<h4 id="result">Résultat</h4> + +<p>{{EmbedLiveSample("basic_example","100%","200")}}</p> + +<h3 id="row_and_column_spanning">Étendre sur plusieurs lignes ou colonnes</h3> + +<p>On utilise ici les attributs <code>rowspan</code> et <code>colspan</code> pour étendre des cellules sur plusieurs lignes et colonnes. On voit ainsi que l'en-tête occupe deux lignes pour les noms, l'identifiant et le solde tandis qu'il y a deux colonnes de dates pour l'inscription et la résiliation.</p> + +<h4 id="Résultat_2">Résultat</h4> -<h3 id="Étendre_sur_plusieurs_lignes_ou_colonnes">Étendre sur plusieurs lignes ou colonnes</h3> +<p>Une fois n'est pas coutume, commençons par regarder le résultat produit.</p> -<p>On utilise ici les attributs <code>rowspan</code> et <code>colspan</code> pour étendre des cellules sur plusieurs lignes et colonnes.</p> +<p>{{EmbedLiveSample("row_and_column_spanning")}}</p> + +<p>On voit que la zone d'en-tête occupe deux lignes : la première avec le nom, l'identifiant, les dates et le solde du compte ; la seconde avec les dates d'inscription et de résiliation qui forment un sous-groupe de colonnes. Pour obtenir ceci, on a: </p> + +<ul> + <li>Utilisé l'attribut <code>rowspan</code> sur la ligne d'en-tête pour les éléments sur le nom, l'identifiant et le solde. Ces cellules occupent ainsi deux lignes.</li> + <li>Utilisé l'attribut <code>colspan</code> sur la cellule d'en-tête pour les dates. Cela permet à ce que cette cellule s'étende sur deux colonnes.</li> + <li>Défini une deuxième ligne d'éléments <code>th</code> qui contient uniquement les en-têtes pour l'inscription et la résiliation. Ces cellules viennent combler l'espace laissé par le fait que l'en-tête Dates n'occupe qu'une seule ligne.</li> +</ul> <h4 id="HTML_2">HTML</h4> -<pre class="brush: html"><table> +<pre class="brush: html"> +<table> <tr> <th rowspan="2">Nom</th> <th rowspan="2">ID</th> @@ -185,49 +149,49 @@ translation_of: Web/HTML/Element/tr <th>Résiliation</th> </tr> <tr> - <th>Margaret Nguyen</td> + <th>Margaret Nguyen</th> <td>427311</td> <td><time datetime="2010-06-03">3 juin 2010</time></td> <td>n/a</td> <td>0</td> </tr> <tr> - <th>Edvard Galinski</td> + <th>Edvard Galinski</th> <td>533175</td> <td><time datetime="2011-01013">13 janvier 2011</time></td> <td><time datetime="2017-04008">8 avril 2017</time></td> <td>37</td> </tr> <tr> - <th>Hoshi Nakamura</td> + <th>Hoshi Nakamura</th> <td>601942</td> <td><time datetime="2012-07-23">23 juillet 2012</time></td> <td>n/a</td> <td>15</td> </tr> -</table></pre> +</table> +</pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css">table { +<pre class="brush: css"> +table { border: 1px solid black; } th, td { border: 1px solid black; -}</pre> - -<h4 id="Résultat_2">Résultat</h4> - -<p>{{EmbedLiveSample("Étendre_sur_plusieurs_lignes_ou_colonnes")}}</p> +} +</pre> -<h3 id="Distinguer_en-tête_et_contenu">Distinguer en-tête et contenu</h3> +<h3 id="explicitly_specifying_table_content_groups">Distinguer en-tête et contenu</h3> -<p>On utilise ici l'élément {{HTMLElement("thead")}} et l'élément {{HTMLElement("tbody")}} pour distinguer l'en-tête du tableau et le contenu de celui-ci.</p> +<p>On utilise ici l'élément <a href="/fr/docs/Web/HTML/Element/thead"><code><thead></code></a> et l'élément <a href="/fr/docs/Web/HTML/Element/tbody"><code><tbody></code></a> pour distinguer l'en-tête du tableau et le contenu de celui-ci.</p> <h4 id="HTML_3">HTML</h4> -<pre class="brush: html"><table> +<pre class="brush: html"> +<table> <thead> <tr> <th rowspan="2">Nom</th> @@ -242,52 +206,64 @@ th, td { </thead> <tbody> <tr> - <th scope="row">Margaret Nguyen</td> + <th scope="row">Margaret Nguyen</th> <td>427311</td> <td><time datetime="2010-06-03">3 juin 2010</time></td> <td>n/a</td> <td>0</td> </tr> <tr> - <th scope="row">Edvard Galinski</td> + <th scope="row">Edvard Galinski</th> <td>533175</td> <td><time datetime="2011-01013">13 janvier 2011</time></td> <td><time datetime="2017-04008">8 avril 2017</time></td> <td>37</td> </tr> <tr> - <th scope="row">Hoshi Nakamura</td> + <th scope="row">Hoshi Nakamura</th> <td>601942</td> <td><time datetime="2012-07-23">23 juillet 2012</time></td> <td>n/a</td> <td>15</td> </tr> </tbody> -</table></pre> +</table> +</pre> <h4 id="CSS_2">CSS</h4> -<pre class="brush: css">table { +<pre class="brush: css"> +table { border: 1px solid black; } th, td { border: 1px solid black; -}</pre> +} +</pre> + +<h4 id="result_3">Résultat</h4> -<h4 id="Résultat_3">Résultat</h4> +<p>Le résultat n'a pas changé visuellement mais la structure comporte des informations sémantiques complémentaires.</p> -<p>{{EmbedLiveSample("Distinguer_en-tête_et_contenu", 500, 150)}}</p> +<p>{{EmbedLiveSample("explicitly_specifying_table_content_groups", 500, 200)}}</p> -<h3 id="Mise_en_forme_simple">Mise en forme simple</h3> +<h3 id="basic_styling">Mise en forme simple</h3> -<p>Il est possible d'utiliser <a href="/fr/docs/Web/CSS/">CSS</a> afin de modifier l'apparence d'une ligne d'un tableau. Tous les styles appliqués à un élément <code><tr></code> auront un impact sur les cellules de cette ligne (sauf si celles-ci indiquent un style par dessus).</p> +<p>Il est possible d'utiliser <a href="/fr/docs/Web/CSS">CSS</a> afin de modifier l'apparence d'une ligne d'un tableau. Tous les styles appliqués à un élément <code><tr></code> auront un impact sur les cellules de cette ligne (sauf si celles-ci indiquent un style par-dessus).</p> <p>Modifions ici la police et la couleur d'arrière-plan pour la ligne d'en-tête.</p> +<h4 id="Résultat_4">Résultat</h4> + +<p>Là encore, regardons le résultat pour commencer.</p> + +<p>{{EmbedLiveSample("basic_styling", 500, 200)}}</p> + <h4 id="HTML_4">HTML</h4> -<pre class="brush: html"><table> +<pre class="brush: html"> +<table> <thead> <tr> <th rowspan="2">Nom</th> @@ -302,32 +278,34 @@ th, td { </thead> <tbody> <tr> - <th scope="row">Margaret Nguyen</td> + <th scope="row">Margaret Nguyen</th> <td>427311</td> <td><time datetime="2010-06-03">3 juin 2010</time></td> <td>n/a</td> <td>0</td> </tr> <tr> - <th scope="row">Edvard Galinski</td> + <th scope="row">Edvard Galinski</th> <td>533175</td> <td><time datetime="2011-01013">13 janvier 2011</time></td> <td><time datetime="2017-04008">8 avril 2017</time></td> <td>37</td> </tr> <tr> - <th scope="row">Hoshi Nakamura</td> + <th scope="row">Hoshi Nakamura</th> <td>601942</td> <td><time datetime="2012-07-23">23 juillet 2012</time></td> <td>n/a</td> <td>15</td> </tr> </tbody> -</table></pre> +</table> +</pre> <h4 id="CSS_3">CSS</h4> -<pre class="brush: css">table { +<pre class="brush: css"> +table { border: 1px solid black; font: 16px "Open Sans", Helvetica, Arial, sans-serif; } @@ -342,79 +320,214 @@ th, td { } </pre> -<p>On utilise ici la propriété {{CSSxRef("font")}} sur l'élément {{HTMLElement("table")}} afin d'avoir une police plus agréable. Ensuite, pour tous les éléments <code><tr></code> qui sont les fils de {{HTMLElement("thead")}} (c'est-à-dire pour les lignes de l'en-tête), on indique une couleur d'arrière-plan bleu clair. Cela se propagera à l'ensemble des cellules de l'en-tête.</p> +<p>On utilise ici la propriété <a href="/fr/docs/Web/CSS/font"><code>font</code></a> sur l'élément <a href="/fr/docs/Web/HTML/Element/table"><code><table></code></a> afin d'avoir une police plus agréable. Ensuite, pour tous les éléments <code><tr></code> qui sont les fils de <a href="/fr/docs/Web/HTML/Element/thead"><code><thead></code></a> (c'est-à-dire pour les lignes de l'en-tête), on indique une couleur d'arrière-plan bleu clair. Cela se propagera à l'ensemble des cellules de l'en-tête.</p> -<h4 id="Résultat_4">Résultat</h4> +<p>Cela ne modifie pas la mise en forme des éléments <a href="/fr/docs/Web/HTML/Element/th"><code><th></code></a> de la première colonne où les noms des membres sont considérés comme des en-têtes de ligne.</p> + +<h3 id="advanced_styling">Mise en forme avancée</h3> + +<p>Allons encore plus loin dans la mise en forme avec des styles pour l'en-tête ainsi que le corps du tableau en alternant les couleurs des lignes et en utilisant différentes couleurs pour les cellules selon leur position, etc.</p> + +<h4 id="result_5">Résultat</h4> + +<p>Voici le résultat qui sera obtenu :</p> + +<p>{{EmbedLiveSample("advanced_styling", 500, 200)}}</p> + +<h4 id="HTML_4">HTML</h4> + +<p>Le HTML n'est pas modifié.</p> + +<pre class="brush: html"> +<table> + <thead> + <tr> + <th rowspan="2">Nom</th> + <th rowspan="2">ID</th> + <th colspan="2">Dates</th> + <th rowspan="2">Solde</th> + </tr> + <tr> + <th>Inscription</th> + <th>Résiliation</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Margaret Nguyen</th> + <td>427311</td> + <td><time datetime="2010-06-03">3 juin 2010</time></td> + <td>n/a</td> + <td>0</td> + </tr> + <tr> + <th scope="row">Edvard Galinski</th> + <td>533175</td> + <td><time datetime="2011-01013">13 janvier 2011</time></td> + <td><time datetime="2017-04008">8 avril 2017</time></td> + <td>37</td> + </tr> + <tr> + <th scope="row">Hoshi Nakamura</th> + <td>601942</td> + <td><time datetime="2012-07-23">23 juillet 2012</time></td> + <td>n/a</td> + <td>15</td> + </tr> + </tbody> +</table> +</pre> + +<h4 id="CSS_4">CSS</h4> + +<p>Ici, CSS est utilisé de façon plus marquée. Sans que ce soit compliqué, il y a beaucoup de choses à voir : autant les décomposer.</p> -<p>{{EmbedLiveSample("Mise_en_forme_simple", 500, 200)}}</p> +<h5 id="the_table_and_base_styles">Règles pour le tableau et les styles de base</h5> + +<pre class="brush: css"> +table { + border: 1px solid black; + font: 16px "Open Sans", Helvetica, Arial, sans-serif; + border-spacing: 0; + border-collapse: collapse; +} +</pre> + +<p>Ici, on ajoute les propriétés <a href="/fr/docs/Web/CSS/border-spacing"><code>border-spacing</code></a> et <a href="/fr/docs/Web/CSS/border-collapse"><code>border-collapse</code></a> afin d'éliminer l'espace entre les cellules et afin de fusionner les bordures qui se touchent afin d'obtenir une seule bordure plutôt que des bordures doubles.</p> + +<pre class="brush: css"> +th, td { + border: 1px solid black; + padding:4px 6px; +} + +th { + vertical-align: bottom; +} +</pre> + +<p>Voici le style par défaut pour l'ensemble des cellules. Ajoutons quelques personnalisations.</p> + +<h5 id="the_top_header_overall">Ligne d'en-tête</h5> + +<p>Nous allons voir l'en-tête en deux parties. Pour commencer, mettons en forme l'en-tête de façon générale :</p> + +<pre class="brush: css"> +thead > tr { + background-color: rgb(228, 240, 245); +} + +thead > tr:nth-of-type(2) { + border-bottom: 2px solid black; +} +</pre> + +<p>On définit la couleur d'arrière-plan de tous les éléments <code><tr></code> dans la ligne d'en-tête du tableau (contenue dans <a href="/fr/docs/Web/HTML/Element/thead"><code><thead></code></a>). Ensuite, on définit la bordure basse pour que ce soit une ligne avec une épaisseur de deux pixels. On peut voir qu'on utilise le sélecteur <a href="/fr/docs/Web/CSS/:nth-of-type"><code>:nth-of-type</code></a> afin de cibler l'application de <a href="/fr/docs/Web/CSS/border-bottom"><code>border-bottom</code></a> sur la <em>deuxième</em> ligne de l'en-tête. Pourquoi ? Parce que l'en-tête se compose de deux lignes où on a des cellules fusionnées. Cela signifie qu'il y a effectivement deux lignes et appliquer ces règles à la première ligne ne fournirait pas le résultat attendu.</p> + +<h5 id="the_joined_and_canceled_headers">Les en-têtes d'inscription et de résiliation</h5> + +<p>Mettons en forme ces deux cellules d'en-têtes en utilisant des teintes rouge / vert pour représenter l'aspect positif d'une inscription et l'aspect négatif d'une résiliation.</p> + +<pre class="brush: css"> +thead > tr:last-of-type > th:nth-of-type(1) { + background-color: rgb(225, 255, 225); +} + +thead > tr:last-of-type > th:nth-of-type(2) { + background-color: rgb(255, 225, 225); +} +</pre> + +<p>Ici, on cible la dernière ligne de l'en-tête du tableau et on indique la couleur pour la première cellule d'en-tête (qui correspond à l'inscription) avec du vert et la seconde (qui correspond à la résiliation) avec du rouge.</p> + +<h5 id="color_every_body_other_row_differently">Ajouter des couleurs pour les autres lignes</h5> + +<p>Pour améliorer la lisibilité d'un tableau, il est courant d'appliquer une alternance de couleur entre chaque ligne. Faisons cela en ciblant les lignes paires :</p> + +<pre class="brush: css"> +tbody > tr:nth-of-type(even) { + background-color: rgb(237, 238, 242); +} +</pre> + +<h5 id="give_the_left-side_header_some_style">Mise en forme de la colonne d'en-tête gauche</h5> + +<p>On veut que la première colonne se démarque. Mettons la en forme également.</p> + +<pre class="brush: css"> +tbody > tr > th:first-of-type { + text-align: left; + background-color: rgb(225, 229, 244); +} +</pre> + +<p>Cela applique <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a> à chaque première cellule de chaque ligne afin de justifier à gauche les noms des membres avec une couleur d'arrière-plan légèrement différentes.</p> + +<h5 id="justify_the_balances">Justifier les soldes de compte</h5> + +<p>Enfin, lorsqu'on affiche des valeurs monétaires, on les représente alignées à droite pour faciliter une lecture comparative entre les valeurs. Appliquons ceci à l'exemple.</p> + +<pre class="brush: css"> +tbody > tr > td:last-of-type { + text-align:right; +} +</pre> + +<p>Cette règle applique la propriété CSS <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a> sur le dernier élément <a href="/fr/docs/Web/HTML/Element/td"><code><td></code></a> de chaque ligne du corps du tableau avec la valeur <code>"right"</code>.</p> <h2 id="Résumé_technique">Résumé technique</h2> <table class="properties"> <tbody> <tr> - <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th> + <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th> <td>Aucune.</td> </tr> <tr> <th scope="row">Contenu autorisé</th> - <td>Zéro ou plusieurs éléments {{HTMLElement("td")}} ou {{HTMLElement("th")}}, éventuellement mélangés. Les éléments de script ({{HTMLElement("script")}} et {{HTMLElement("template")}}) sont également utilisés.</td> + <td>Zéro ou plusieurs éléments <a href="/fr/docs/Web/HTML/Element/td"><code><td></code></a> ou <a href="/fr/docs/Web/HTML/Element/th"><code><th></code></a>, éventuellement mélangés. Les éléments de script (<a href="/fr/docs/Web/HTML/Element/script"><code><script></code></a> et <a href="/fr/docs/Web/HTML/Element/template"><code><template></code></a>) sont également utilisés.</td> </tr> <tr> <th scope="row">Omission de balises</th> - <td>La balise de début est obligatoire. La balise de fin peut être absente si l'élément {{HTMLElement("tr")}} est immédiatement suivi par un élément {{HTMLElement("tr")}} ou si l'élément du groupe parent (({{HTMLElement("thead")}}, {{HTMLElement("tbody")}} ou {{HTMLElement("tfoot")}}) n'a plus d'autre contenu.</td> + <td>La balise de début est obligatoire. La balise de fin peut être absente si l'élément <code><tr></code> est immédiatement suivi par un élément <code><tr></code> ou si l'élément du groupe parent (<a href="/fr/docs/Web/HTML/Element/thead"><code><thead></code></a>, <a href="/fr/docs/Web/HTML/Element/tbody"><code><tbody></code></a> ou <a href="/fr/docs/Web/HTML/Element/tfoot"><code><tfoot></code></a>) n'a plus d'autre contenu.</td> </tr> <tr> <th scope="row">Parents autorisés</th> - <td>Un élément {{HTMLElement("table")}} (uniquement si le tableau ne possède pas d'élément {{HTMLElement("body")}} et uniquement après un élément {{HTMLElement("caption")}}, {{HTMLElement("colgroup")}} ou {{HTMLElement("thead")}}) , {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} ou {{HTMLElement("tfoot")}}.</td> + <td>Un élément <a href="/fr/docs/Web/HTML/Element/table"><code><table></code></a> (uniquement si le tableau ne possède pas d'élément <a href="/fr/docs/Web/HTML/Element/body"><code><body></code></a> et uniquement après un élément <a href="/fr/docs/Web/HTML/Element/caption"><code><caption></code></a>, <a href="/fr/docs/Web/HTML/Element/colgroup"><code><colgroup></code></a> ou <a href="/fr/docs/Web/HTML/Element/thead"><code><thead></code></a>) , <a href="/fr/docs/Web/HTML/Element/thead"><code><thead></code></a>, <a href="/fr/docs/Web/HTML/Element/tbody"><code><tbody></code></a> ou <a href="/fr/docs/Web/HTML/Element/tfoot"><code><tfoot></code></a>.</td> </tr> <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><code><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a></code></td> + </tr> + <tr> <th scope="row">Rôles ARIA autorisés</th> <td>Tous les rôles sont autorisés.</td> </tr> <tr> <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLTableRowElement")}}</td> + <td><a href="/fr/docs/Web/API/HTMLTableRowElement"><code>HTMLTableRowElement</code></a></td> </tr> </tbody> </table> -<h2 id="Spécifications">Spécifications</h2> +<h2 id="specifications">Spécifications</h2> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </tbody> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG','tables.html#the-tr-element','tr element')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C','tabular-data.html#the-tr-element','tr element')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> +<p>{{Specifications}}</p> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<p>{{Compat("html.elements.tr")}}</p> +<p>{{Compat}}</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li>Les autres éléments HTML relatifs aux tableaux : {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}.</li> - <li>Les propriétés et pseudo-classes CSS qui sont particulièrement utiles pour mettre en forme l'élément <code><tr></code> : + <li><a href="/fr/docs/Learn/HTML/Tables">Apprendre : les tableaux HTML</a> : une introduction à l'utilisation des tableaux qui aborde <code><tr></code>.</li> + <li>Les autres éléments HTML relatifs aux tableaux : <a href="/fr/docs/Web/HTML/Element/caption"><code><caption></code></a>, <a href="/fr/docs/Web/HTML/Element/col"><code><col></code></a>, <a href="/fr/docs/Web/HTML/Element/colgroup"><code><colgroup></code></a>, <a href="/fr/docs/Web/HTML/Element/table"><code><table></code></a>, <a href="/fr/docs/Web/HTML/Element/tbody"><code><tbody></code></a>, <a href="/fr/docs/Web/HTML/Element/td"><code><td></code></a>, <a href="/fr/docs/Web/HTML/Element/tfoot"><code><tfoot></code></a>, <a href="/fr/docs/Web/HTML/Element/th"><code><th></code></a>, <a href="/fr/docs/Web/HTML/Element/thead"><code><thead></code></a>.</li> + <li><a href="/fr/docs/Web/API/HTMLTableRowElement"><code>HTMLTableRowElement</code></a> : l'interface DOM sur laquelle <code><tr></code> est basé.</li> + <li>Les propriétés et pseudo-classes CSS qui sont particulièrement utiles pour mettre en forme l'élément <code><tr></code> : <ul> - <li>La pseudo-classe {{cssxref(":nth-child")}} qui permet de définir l'alignement des cellules dans la colonne ou sur une ligne</li> - <li>La propriété {{cssxref("text-align")}} qui permet d'aligner l'ensemble des cellules par rapport au même caractère (comme le point ou la virgule).</li> + <li>La pseudo-classe <a href="/fr/docs/Web/CSS/:nth-child"><code>:nth-child</code></a> qui permet de définir l'alignement des cellules dans la colonne ou sur une ligne</li> + <li>La propriété <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a> qui permet d'aligner l'ensemble des cellules par rapport au même caractère (comme le point ou la virgule).</li> </ul> - </li> + </li> </ul> |