1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
|
---
title: '<caption> : l''élément de légende d''un tableau'
slug: Web/HTML/Element/caption
tags:
- Element
- HTML
- Reference
- Tableau
- Web
translation_of: Web/HTML/Element/caption
---
<div>{{HTMLRef}}</div>
<p>L'élément <strong>HTML <code><caption></code> </strong>représente la légende (ou le titre) d'un tableau. Il doit être le première élément parmi les descendants de l'élément {{HTMLElement("table")}}. La mise en forme CSS peut placer cet élément à un autre endroit par rapport au tableau et on pourra notamment utiliser les propriétés {{cssxref("caption-side")}} et {{cssxref("text-align")}}.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/caption.html", "tabbed-standard")}}</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>
<h2 id="Attributs">Attributs</h2>
<p>On peut utiliser<a href="/fr/docs/Web/HTML/Attributs_universels"> les attributs universels</a> sur cet élément.</p>
<h3 id="Attributs_obsolètes">Attributs obsolètes</h3>
<dl>
<dt>{{htmlattrdef("align")}} {{deprecatedGeneric('inline','HTML4.01')}} {{obsoleteGeneric('inline','HTML5')}}</dt>
<dd>Cet attribut à valeur contrainte indique l'alignement de la légende du tableau par rapport au tableau lui-même. Il peut valoir :
<ul>
<li><code>left</code> pour un affichage à gauche du tableau</li>
<li><code>top</code> pour un affichage au dessus du tableau</li>
<li><code>right</code> pour un affichage à droite du tableau</li>
<li><code>bottom</code> pour un affichage en dessous du tableau</li>
</ul>
<div class="note"><strong>Note d'utilisation : </strong>Ne pas utiliser cet attribut. Il a été déprécié. L'élément {{HTMLElement("caption")}} devrait être mis en forme grâce au <a href="/fr/docs/Web/CSS">CSS</a>. Afin d'obtenir des effets similaires à cet attribut, on utilisera les propriétés CSS {{cssxref("caption-side")}} et {{cssxref("text-align")}}.</div>
</dd>
</dl>
<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
<p>Quand l'élément {{HTMLElement("table")}} (étant le parent de l'élément {{HTMLElement("caption")}}) n'est que l'unique descendant d'un élément {{HTMLElement("figure")}},c'est l'élément {{HTMLElement("figcaption")}} doit être utilisé.</p>
<h2 id="Exemples">Exemples</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><table>
<caption>Une légende pour un tableau</caption>
<tr>
<td>Bip bop bip bop</td>
<td>Bop bip bop bip</td>
</tr>
</table>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">caption {
caption-side: top;
align: right;
}
table {
border-collapse: collapse;
border-spacing: 0px;
}
table, th, td {
border: 1px solid black;
}
</pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample("Exemples","200","200")}}</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>
<td>Aucune.</td>
</tr>
<tr>
<th scope="row">Contenu autorisé</th>
<td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Catégorie de flux</a>.</td>
</tr>
<tr>
<th scope="row">Omission de balises</th>
<td>La balise de fin peut être absente si l'élément n'est pas immédiatement suivi d'un blanc ASCII ou d'un commentaire.</td>
</tr>
<tr>
<th scope="row">Éléments parents autorisés</th>
<td>Un élément {{HTMLElement("table")}} dont il doit être le premier descendant.</td>
</tr>
<tr>
<th scope="row">Rôles ARIA autorisés</th>
<td>Aucun.</td>
</tr>
<tr>
<th scope="row">Interface DOM</th>
<td>{{domxref("HTMLTableCaptionElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'tabular-data.html#the-caption-element', '<caption>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-caption-element', '<caption>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.2', '<caption>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
<p>{{Compat("html.elements.caption")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>Les autres éléments HTML relatifs aux tableaux :
<ul>
<li>{{HTMLElement("col")}}</li>
<li>{{HTMLElement("colgroup")}}</li>
<li>{{HTMLElement("table")}}</li>
<li>{{HTMLElement("tbody")}}</li>
<li>{{HTMLElement("td")}}</li>
<li>{{HTMLElement("tfoot")}}</li>
<li>{{HTMLElement("th")}}</li>
<li>{{HTMLElement("thead")}}</li>
<li>{{HTMLElement("tr")}}</li>
</ul>
</li>
<li>Les propriétés CSS pouvant être utilisées pour mettre en forme l'élément {{HTMLElement("caption")}} :
<ul>
<li>{{cssxref("text-align")}}</li>
<li>{{cssxref("caption-side")}}.</li>
</ul>
</li>
</ul>
|
