lment HTML <table> : l'lment de tableau
Cette fonctionnalit est bien tablie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
* Certaines parties de cette fonctionnalit peuvent bnficier de prise en charge variables.
L'lment HTML <table> reprsente des donnes tabulaires, c'est--dire des informations prsentes dans un tableau deux dimensions compos de lignes et de colonnes de cellules contenant des donnes.
Dans cet article
- Exemple interactif
- Attributs
- Prsentation visuelle du contenu d'un tableau
- Accessibilit
- Exemples
- Rsum technique
- Spcifications
- Compatibilit des navigateurs
- Voir aussi
Exemple interactif
<table>
<caption>
Formation dveloppeureuse front-end 2021
</caption>
<thead>
<tr>
<th scope="col">Nom</th>
<th scope="col">Principal intrt</th>
<th scope="col">ge</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Chris</th>
<td>Tables HTML</td>
<td>22</td>
</tr>
<tr>
<th scope="row">Dennis</th>
<td>Accessibilit web</td>
<td>45</td>
</tr>
<tr>
<th scope="row">Sarah</th>
<td>Frameworks JavaScript</td>
<td>29</td>
</tr>
<tr>
<th scope="row">Karen</th>
<td>Performance web</td>
<td>36</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row" colspan="2">ge moyen</th>
<td>33</td>
</tr>
</tfoot>
</table>
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
caption {
caption-side: bottom;
padding: 10px;
font-weight: bold;
}
thead,
tfoot {
background-color: rgb(228 240 245);
}
th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
}
td:last-of-type {
text-align: center;
}
tbody > tr:nth-of-type(even) {
background-color: rgb(237 238 242);
}
tfoot th {
text-align: right;
}
tfoot td {
font-weight: bold;
}
Attributs
Cet lment inclut les attributs universels.
Attributs obsoltes
Les attributs suivants sont obsoltes et ne doivent pas tre utiliss. Ils sont documents ci-dessous titre de rfrence pour la mise jour de code existant et pour l'intrt historique uniquement.
align-
Dfinit l'alignement horizontal du tableau l'intrieur de son lment parent. Les valeurs numres possibles sont
left,centeretright. Utilisez plutt les proprits CSSmargin-inline-startetmargin-inline-end, car cet attribut est obsolte. bgcolor-
Dfinit la couleur d'arrire-plan du tableau. La valeur est une couleur HTML ; soit un code hexadcimal RGB 6 chiffres, prcd d'un
#, ou un mot-cl de couleur. Les autres valeurs CSS<color>ne sont pas prises en charge. Utilisez la proprit CSSbackground-colorla place, car cet attribut est obsolte. border-
Dfinit, en tant que valeur entire non ngative (en pixels), la taille de la bordure entourant le tableau. Si la valeur est
0, l'attributframeest dfini survoid. Utilisez plutt la proprit CSSborder, car cet attribut est obsolte. cellpadding-
Dfinit l'espace entre le contenu d'une cellule et sa bordure. Cet attribut est obsolte : au lieu de l'utiliser, appliquez la proprit CSS
paddingaux lments<th>et<td>. cellspacing-
Dfinit la taille de l'espace entre deux cellules. Cet attribut est obsolte : au lieu de l'utiliser, dfinissez la proprit CSS
border-spacingsur l'lment<table>. Notez que cela n'a aucun effet si la proprit CSSborder-collapsede l'lment<table>est dfinie surcollapse. frame-
Dfinit quels cts de la bordure entourant le tableau doivent tre affichs. Les valeurs numres possibles sont
void,above,below,hsides,vsides,lhs,rhs,boxetborder. Utilisez plutt les proprits CSSborder-styleetborder-width, car cet attribut est obsolte. rules-
Dfinit o les traits (bordures) sont affichs dans le tableau. Les valeurs numres possibles sont
none(valeur par dfaut),groups(lments<thead>,<tbody>et<tfoot>),rows(lignes horizontales),cols(lignes verticales) etall(bordure autour de chaque cellule). Utilisez plutt la proprit CSSbordersur les lments lis au tableau appropris ainsi que sur l'lment<table>, car cet attribut est obsolte. summary-
Dfinit un texte alternatif qui rsume le contenu du tableau. Utilisez plutt l'lment
<caption>, car cet attribut est obsolte. width-
Cet attribut dfinit la largeur du tableau. Elle peut tre exprime en pixels ou en pourcent (reprsentant alors la fraction du conteneur que le tableau peut occuper).
Note : Cet attribut ayant t dprci, il ne doit pas tre utilis. La proprit CSS
widthdoit tre utilise la place.
Prsentation visuelle du contenu d'un tableau
Les lments suivants font partie de la structure d'un tableau :
Le bloc <table> tablit un contexte de mise en forme de tableau. Les lments l'intrieur de <table> gnrent des botes rectangulaires. Chaque bote occupe un certain nombre de cellules selon les rgles suivantes :
- Les botes de ligne remplissent le tableau dans l'ordre du code source, de haut en bas. Chaque bote de ligne occupe une ligne de cellules.
- Une bote de groupe de lignes occupe une ou plusieurs botes de ligne.
- Les botes de colonne sont places cte cte dans l'ordre du code source. Selon la valeur de l'attribut
dir, les colonnes sont disposes de gauche droite ou de droite gauche. Une bote de colonne occupe une ou plusieurs colonnes de cellules. - Une bote de groupe de colonnes occupe une ou plusieurs botes de colonne.
- Une bote de cellule peut s'tendre sur plusieurs lignes et colonnes. Les agents utilisateur ajustent les cellules pour qu'elles tiennent dans le nombre de lignes et de colonnes disponibles.
Les cellules de tableau ont un remplissage. Les botes qui composent un tableau n'ont pas de marges.
Couches du tableau et transparence
Pour la mise en forme, on peut considrer que les lments du tableau sont placs sur six couches superposes :
![[Couches d'lments de tableau]](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/table/table_element_layers.png){kind=link}
L'arrire-plan dfini sur un lment d'une couche n'est visible que si les couches au-dessus ont un arrire-plan transparent. Une cellule manquante est rendue comme si une bote de cellule de tableau anonyme occupait cet emplacement.
Accessibilit
Lgendes
Fournir un lment <caption> pour lgender le tableau avec une description claire et concise permet aux utilisateurices de dcider s'ils doivent lire le contenu du tableau ou le passer.
Une telle lgende fournit une aide pour les personnes qui naviguent avec des outils d'assistance comme des lecteurs d'cran.
- Ajouter une lgende un tableau grce
<caption> - Lgendes et rsums Tableaux Tutoriels d'accessibilit du W3C WAI (angl.)
Portes des lignes et des colonnes
L'attribut scope sur les cellules d'en-tte (lments <th>) est redondant dans les contextes simples, car la porte est dduite. Cependant, certaines technologies d'assistance peuvent ne pas en dduire correctement la porte, donc dfinir explicitement la porte de l'en-tte peut amliorer l'exprience utilisateur. Dans les tableaux complexes, scope peut tre dfini pour fournir les informations ncessaires sur les cellules associes un en-tte.
- Utiliser les tableaux HTML pour les personnes souffrant de troubles de la vision
- Les tableaux avec deux en-ttes Tutoriels d'accessibilit web W3C WAI (angl.)
- Les tableaux avec des en-ttes htrognes Tutoriels d'accessibilit web W3C WAI (angl.)
- H63 : Utiliser l'attribut
scopeafin d'associer les cellules de l'en-tte et celles des donnes dans les tableaux de donnes | Techniques W3C pour WCAG 2.0 (angl.)
Tableaux complexes
Les technologies d'assistance telles que les lecteurs d'cran peuvent avoir des difficults analyser les tableaux si complexes que les cellules d'en-tte ne peuvent pas tre associes de manire strictement horizontale ou verticale. Cela est gnralement indiqu par la prsence des attributs colspan et rowspan.
Idalement, envisagez d'autres faons de prsenter le contenu du tableau, notamment en le divisant en une collection de tableaux plus petits et lis qui n'ont pas besoin d'utiliser les attributs colspan et rowspan. En plus d'aider les personnes utilisant des technologies d'assistance comprendre le contenu du tableau, cela peut aussi bnficier aux personnes ayant des troubles cognitifs qui peuvent avoir du mal comprendre les associations dcrites par la prsentation du tableau.
Si le tableau ne peut pas tre divis, utilisez une combinaison des attributs id et headers pour associer informatiquement chaque cellule du tableau aux cellules d'en-tte (lments <th>) auxquelles elle est associe.
- Utiliser les tableaux HTML pour les personnes souffrant de troubles de la vision
- Les tableaux avec des en-ttes sur plusieurs niveaux Tutoriels d'accessibilit web W3C WAI (angl.)
- H43 : Utiliser les attributs
idetheadersafin d'associer les cellules de donnes et les cellules d'en-tte dans les tableaux | Techniques W3C pour WCAG 2.0 (angl.)
Exemples
Les exemples ci-dessous incluent des tableaux d'une complexit croissante. Consultez aussi notre guide pour dbutantes sur la mise en forme des tableaux pour des informations sur la mise en forme des tableaux, incluant des techniques courantes et utiles.
La structure d'un tableau (<table>) implique l'utilisation de plusieurs lments HTML lis aux tableaux ainsi que divers attributs associs. Les exemples suivants visent fournir une explication simplifie qui couvre les bases et les standards courants. Des informations supplmentaires et plus dtailles sont disponibles sur les pages lies correspondantes.
Ces exemples de tableaux montrent comment crer un tableau accessible structur avec HTML et mis en forme avec CSS.
En raison de la structure des tableaux HTML, le marquage peut rapidement devenir volumineux. Pour cette raison, il est important de dfinir clairement l'objectif et l'apparence finale du tableau afin de crer la structure approprie. Une structure logique dveloppe avec un marquage smantique est non seulement plus facile mettre en forme, mais permet de crer des tableaux utiles et accessibles qui peuvent tre compris et parcourus par tout le monde, y compris les moteurs de recherche et les utilisateurices de technologies d'assistance.
Le premier exemple est basique, les exemples suivants gagnent en complexit. Nous allons d'abord dvelopper une structure de tableau HTML trs simple. Les deux premiers exemples ne contiennent aucun groupe de sections de tableau comme une tte, un corps ou un pied dfini, et n'impliquent aucun talement de cellule ni relation de cellule explicitement dfinie. Mme une lgende n'est pas fournie. Au fil des exemples, ils sont progressivement enrichis pour inclure toutes les fonctionnalits qu'un tableau de donnes complexe doit possder.
Tableau simple
Cet exemple prsente un tableau trs basique avec trois lignes et deux colonnes. Pour montrer les styles de tableau par dfaut du navigateur, aucun CSS n'est inclus dans cet exemple.
HTML
Les lignes du tableau sont dfinies avec des lments <tr>, et les colonnes sont dfinies avec des cellules d'en-tte et de donnes l'intrieur. La premire ligne contient les cellules d'en-tte (lments <th>) qui servent d'en-ttes de colonne pour les cellules de donnes (lments <td>). Chaque lment (<th> ou <td>) par ligne est dans sa colonne respective c'est--dire que le premier lment d'une ligne est dans la premire colonne, et le second lment de cette ligne est dans la seconde colonne.
<table>
<tr>
<th>Nom</th>
<th>ge</th>
</tr>
<tr>
<td>Sandra Smith</td>
<td>28</td>
</tr>
<tr>
<td>Jean Biche</td>
<td>34</td>
</tr>
</table>
Rsultat
Il n'y a aucune mise en forme CSS personnalise ni aucune feuille de style utilisateurice applique ce tableau. La mise en forme provient uniquement de la feuille de style de l'agent utilisateur.
Tableau tendu avec cellules d'en-tte
Cet exemple tend le tableau simple, en ajoutant du contenu et des styles CSS de base.
HTML
Le tableau comporte dsormais quatre lignes (lments <tr>), chacune avec quatre colonnes. La premire ligne est une ligne de cellules d'en-tte (elle ne contient que des lments <th>). Les lignes suivantes incluent une colonne d'en-tte (lments <th> comme premier enfant de chaque ligne) et trois colonnes de donnes (lments <td>). Comme les lments de section de tableau ne sont pas utiliss, le navigateur dfinit automatiquement la structure du groupe de contenu, c'est--dire que toutes les lignes sont englobes dans le corps du tableau d'un lment <tbody> implicite.
<table>
<tr>
<th>Nom</th>
<th>ID</th>
<th>Membre depuis</th>
<th>Solde</th>
</tr>
<tr>
<th>Margaret Nguyen</th>
<td>427311</td>
<td><time datetime="2010-06-03">3 juin 2010</time></td>
<td>0.00</td>
</tr>
<tr>
<th>Edvard Galinski</th>
<td>533175</td>
<td><time datetime="2011-01-13">13 janvier 2011</time></td>
<td>37.00</td>
</tr>
<tr>
<th>Hoshi Nakamura</th>
<td>601942</td>
<td><time datetime="2012-07-23">23 juillet 2012</time></td>
<td>15.00</td>
</tr>
</table>
CSS
Avec CSS, nous appliquons une mise en forme de base pour crer des lignes autour des composants du tableau afin de rendre la structure des donnes plus claire. Le CSS ajoute une bordure pleine autour du <table> et autour de chaque cellule du tableau, y compris celles dfinies avec les lments <th> et <td>, dlimitant chaque cellule d'en-tte et de donnes.
table {
border: 2px solid rgb(140 140 140);
}
th,
td {
border: 1px solid rgb(160 160 160);
}
Rsultat
Dfinir les relations entre les cellules du tableau
Avant d'tendre le tableau de manire plus avance, il est conseill d'amliorer l'accessibilit en dfinissant les relations entre les cellules d'en-tte et de donnes (lments <th> et <td>).
HTML
Ceci s'accomplit en ajoutant l'attribut scope sur les lments <th> et en dfinissant les valeurs correspondantes col (colonne) ou row (ligne).
<table>
<tr>
<th scope="col">Nom</th>
<th scope="col">ID</th>
<th scope="col">Membre depuis</th>
<th scope="col">Solde</th>
</tr>
<tr>
<th scope="row">Margaret Nguyen</th>
<td>427311</td>
<td><time datetime="2010-06-03">3 juin 2010</time></td>
<td>0.00</td>
</tr>
<tr>
<th scope="row">Edvard Galinski</th>
<td>533175</td>
<td><time datetime="2011-01-13">13 janvier 2011</time></td>
<td>37.00</td>
</tr>
<tr>
<th scope="row">Hoshi Nakamura</th>
<td>601942</td>
<td><time datetime="2012-07-23">23 juillet 2012</time></td>
<td>15.00</td>
</tr>
</table>
Le CSS et le rendu visuel restent inchangs cette adaptation fournit des informations contextuelles prcieuses pour les technologies d'assistance comme les lecteurs d'cran afin d'aider identifier quelles cellules les en-ttes sont lis.
Note :
Si la structure du tableau est encore plus complexe, l'utilisation (supplmentaire) de l'attribut headers sur les lments <th> et <td> peut amliorer l'accessibilit et aider les technologies d'assistance identifier les relations entre les cellules ; voir Tableaux complexes.
Dfinir explicitement les groupes de sections du tableau
En plus d'amliorer l'accessibilit en dfinissant les relations entre les cellules, la smantique du tableau peut tre amliore en introduisant des groupes de sections de tableau.
HTML
Comme la premire ligne (lment <tr>) ne contient que des cellules d'en-tte de colonne et fournit l'en-tte pour le reste du contenu du tableau, elle peut tre place dans l'lment <thead> pour indiquer explicitement que cette ligne constitue la section d'en-tte du tableau. De plus, ce que le navigateur accomplit automatiquement peut aussi tre dfini explicitement la section corps du tableau, qui contient les donnes principales du tableau, est dfinie en englobant les lignes correspondantes dans l'lment <tbody>. L'utilisation explicite de l'lment <tbody> aide le navigateur crer la structure de tableau souhaite, vitant ainsi des rsultats inattendus.
<table>
<thead>
<tr>
<th scope="col">Nom</th>
<th scope="col">ID</th>
<th scope="col">Membre depuis</th>
<th scope="col">Solde</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>0.00</td>
</tr>
<tr>
<th scope="row">Edvard Galinski</th>
<td>533175</td>
<td><time datetime="2011-01-13">13 janvier 2011</time></td>
<td>37.00</td>
</tr>
<tr>
<th scope="row">Hoshi Nakamura</th>
<td>601942</td>
<td><time datetime="2012-07-23">23 juillet 2012</time></td>
<td>15.00</td>
</tr>
</tbody>
</table>
Encore une fois, le CSS et le rendu visuel restent inchangs le fait de dfinir de tels groupes de sections de tableau fournit des informations contextuelles prcieuses pour les technologies d'assistance, y compris les lecteurs d'cran et les moteurs de recherche, ainsi que pour la mise en forme en CSS, qui est illustre dans un exemple ultrieur.
Fusion de colonnes et de lignes
Dans cet exemple, nous tendons encore le tableau en ajoutant une colonne et en introduisant une section d'en-tte sur plusieurs lignes.
HTML
En partant du tableau cr jusqu'ici, une nouvelle colonne pour une date de fin d'adhsion est ajoute dans chaque ligne du corps avec l'lment <td>. Une ligne supplmentaire (lment <tr>) est galement ajoute dans la section d'en-tte (lment <thead>) pour introduire un en-tte Priodes d'adhsion servant de titre pour les colonnes Adhsion et Annulation .
La cration de la seconde ligne d'en-tte implique l'ajout des attributs colspan et rowspan sur les lments <th> afin d'attribuer les cellules d'en-tte aux bonnes colonnes et lignes.
<table>
<thead>
<tr>
<th scope="col" rowspan="2">Nom</th>
<th scope="col" rowspan="2">ID</th>
<th scope="col" colspan="2">Priodes d'adhsion</th>
<th scope="col" rowspan="2">Solde</th>
</tr>
<tr>
<th scope="col">Adhsion</th>
<th scope="col">Annulation</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.00</td>
</tr>
<tr>
<th scope="row">Edvard Galinski</th>
<td>533175</td>
<td><time datetime="2011-01-13">13 janvier 2011</time></td>
<td><time datetime="2017-04-08">8 avril 2017</time></td>
<td>37.00</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.00</td>
</tr>
</tbody>
</table>
Rsultat
La section d'en-tte comporte dsormais deux lignes, l'une avec les en-ttes (lments <th>) Nom , ID , Priodes d'adhsion et Solde , et un en-tte Priodes d'adhsion avec deux sous-en-ttes dans une seconde ligne : Adhsion et Annulation . Cela est ralis par :
- Les cellules d'en-tte Nom , ID et Solde de la premire ligne s'tendent sur les deux lignes d'en-tte du tableau grce l'attribut
rowspan, ce qui les rend chacune hautes de deux lignes. - La cellule d'en-tte Priodes d'adhsion de la premire ligne s'tend sur deux colonnes grce l'attribut
colspan, ce qui la rend large de deux colonnes. - La seconde ligne ne contient que les deux cellules d'en-tte Adhsion et Annulation , car les trois autres colonnes sont fusionnes avec les cellules de la premire ligne qui s'tendent sur deux lignes. Les deux cellules d'en-tte sont correctement positionnes sous l'en-tte Priodes d'adhsion .
Lgende de tableau et rsum de colonne
Il est courant et recommand de fournir un rsum du contenu du tableau, permettant aux utilisateurices de dterminer rapidement la pertinence du tableau. De plus, la colonne Solde est rsume en affichant la somme des soldes des membres individuels.
HTML
Un rsum de tableau est ajout en utilisant une lgende (lment <caption>) comme premier enfant de l'lment <table>. La lgende fournit le nom accessible ou la description accessible du tableau.
Enfin, une section de pied de tableau (lment <tfoot>) est ajoute sous le corps, avec une ligne qui rsume la colonne Solde en affichant une somme. Les lments et attributs introduits prcdemment sont appliqus.
<table>
<caption>
tat des membres du club 2021
</caption>
<thead>
<tr>
<th scope="col" rowspan="2">Nom</th>
<th scope="col" rowspan="2">ID</th>
<th scope="col" colspan="2">Priodes d'adhsion</th>
<th scope="col" rowspan="2">Solde</th>
</tr>
<tr>
<th scope="col">Adhsion</th>
<th scope="col">Annulation</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.00</td>
</tr>
<tr>
<th scope="row">Edvard Galinski</th>
<td>533175</td>
<td><time datetime="2011-01-13">13 janvier 2011</time></td>
<td><time datetime="2017-04-08">8 avril 2017</time></td>
<td>37.00</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.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row" colspan="4">Solde total</th>
<td>52.00</td>
</tr>
</tfoot>
</table>
Rsultat
Mise en forme de base du tableau
Appliquons une mise en forme de base au tableau pour ajuster la police et ajouter un background-color aux lignes d'en-tte et de pied. Le HTML reste inchang cette fois, passons donc directement au CSS.
CSS
Ici, une proprit CSS font est ajoute l'lment <table> pour dfinir une police plus agrable visuellement (ou une abominable police sans empattement, selon votre opinion). L'aspect intressant est la seconde rgle, o les lments <tr> situs dans <thead> et <tfoot> sont mis en forme avec un background-color bleu clair. Cela permet d'appliquer rapidement une couleur de fond toutes les cellules de sections spcifiques simultanment.
table {
border: 2px solid rgb(140 140 140);
font:
16px "Open Sans",
"Helvetica",
"Arial",
sans-serif;
}
thead > tr,
tfoot > tr {
background-color: rgb(228 240 245);
}
th,
td {
border: 1px solid rgb(160 160 160);
}
Rsultat
Mise en forme avance du tableau
Nous allons maintenant aller plus loin, avec des styles appliqus aux lignes de l'en-tte et du corps, incluant des couleurs de lignes alternes, des cellules avec des couleurs diffrentes selon leur position dans la ligne, etc. Regardons d'abord le rsultat.
Rsultat
Voici a quoi ressemble le tableau final :
Il n'y a encore aucun changement dans le HTML. Voyez ce qu'une bonne prparation de la structure HTML permet d'obtenir !
CSS
Le CSS est cette fois beaucoup plus fourni. Il n'est pas compliqu, mais il y a beaucoup d'lments prendre en compte. Dtaillons-les.
Ici, les proprits CSS border-collapse et border-spacing sont ajoutes pour liminer l'espacement entre les cellules et fusionner les bordures qui se touchent afin qu'elles ne forment qu'une seule bordure au lieu de se retrouver avec des bordures doubles. De plus, l'lment <caption> est plac en bas du tableau grce la proprit caption-side :
table {
border-collapse: collapse;
border-spacing: 0;
border: 2px solid rgb(140 140 140);
font:
16px "Open Sans",
"Helvetica",
"Arial",
sans-serif;
}
caption {
caption-side: bottom;
padding: 10px;
font-weight: bold;
}
Ensuite, la proprit CSS padding est utilise pour donner toutes les cellules du tableau de l'espace autour de leur contenu. La proprit CSS vertical-align aligne le contenu des cellules d'en-tte en bas de la cellule, ce qui est visible sur les cellules de l'en-tte qui s'tendent sur deux lignes :
th,
td {
border: 1px solid rgb(160 160 160);
padding: 4px 6px;
}
th {
vertical-align: bottom;
}
La rgle CSS suivante dfinit le background-color de tous les lments <tr> dans l'en-tte du tableau (dfini avec <thead>). Ensuite, la bordure infrieure de l'en-tte est dfinie comme une ligne de deux pixels de large. Remarquez cependant que nous utilisons le slecteur CSS :nth-of-type pour appliquer la proprit CSS border-bottom la deuxime ligne de l'en-tte. Pourquoi ? Parce que l'en-tte est compos de deux lignes dont certaines cellules sont fusionnes. Il y a donc rellement deux lignes ; appliquer le style la premire ligne ne donne pas le rsultat attendu :
thead > tr {
background-color: rgb(228 240 245);
}
thead > tr:nth-of-type(2) {
border-bottom: 2px solid rgb(140 140 140);
}
Stylisons les deux cellules d'en-tte Adhr et Annul avec des teintes vertes et rouges pour reprsenter le positif d'un nouveau membre et le ngatif d'une adhsion annule. Ici, nous ciblons la dernire ligne de la section d'en-tte du tableau l'aide du slecteur CSS :last-of-type et appliquons une couleur verdtre la premire cellule d'en-tte ( Adhr ) et une teinte rougetre la seconde ( Annul ) :
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);
}
Comme la premire colonne doit galement ressortir, une mise en forme personnalise est ajoute ici aussi. Cette rgle CSS applique la proprit CSS text-align la premire cellule d'en-tte de chaque ligne du corps du tableau pour aligner gauche les noms des membres, ainsi qu'une background-color diffrente :
tbody > tr > th:first-of-type {
text-align: left;
background-color: rgb(225 229 244);
}
Il est courant d'amliorer la lisibilit des donnes d'un tableau en alternant les couleurs des lignes on parle parfois de zbrage . Ajoutons un peu de background-color chaque ligne paire :
tbody > tr:nth-of-type(even) {
background-color: rgb(237 238 242);
}
Comme il est d'usage d'aligner droite les valeurs montaires dans les tableaux, faisons-le ici. Cela dfinit simplement la proprit CSS text-align pour la dernire cellule <td> de chaque ligne du corps sur right :
tbody > tr > td:last-of-type {
text-align: right;
}
Enfin, une mise en forme similaire celle de l'en-tte est applique la section de pied du tableau pour la faire ressortir galement :
tfoot > tr {
border-top: 2px dashed rgb(140 140 140);
background-color: rgb(228 240 245);
}
tfoot th,
tfoot td {
text-align: right;
font-weight: bold;
}
Affichage de grands tableaux dans de petits espaces
Un problme courant avec les tableaux sur le web est qu'ils ne fonctionnent pas naturellement trs bien sur les petits crans lorsque la quantit de contenu est importante, et la manire de les rendre dfilants n'est pas vidente, surtout lorsque le balisage provient d'un CMS et ne peut pas tre modifi pour ajouter un conteneur.
Cet exemple propose une faon d'afficher des tableaux dans de petits espaces. Le contenu HTML a t masqu, car il est trs volumineux et il n'y a rien de particulier signaler. Le CSS est plus intressant examiner dans cet exemple.
CSS
En regardant ces styles, vous remarquez que la proprit CSS display du tableau a t dfinie sur block. Cela permet le dfilement, mais le tableau perd une partie de son intgrit et les cellules tentent de devenir aussi petites que possible. Pour attnuer ce problme, nous avons appliqu white-space nowrap sur le <tbody>. Cependant, nous ne le faisons pas pour le <thead> afin d'viter que des titres longs n'obligent les colonnes tre plus larges que ncessaire pour afficher les donnes.
Pour garder les en-ttes du tableau visibles lors du dfilement, nous avons appliqu position sticky sur les lments <th>. Notez que nous n'avons pas dfini border-collapse collapse, car sinon l'en-tte ne peut pas tre spar correctement du reste du tableau.
tant donn que le <table> a une taille fixe, le paramtre overflow auto est la partie importante ici, car il rend le tableau dfilant.
table,
th,
td {
border: 1px solid black;
}
table {
overflow: auto;
width: 100%;
max-width: 400px;
height: 240px;
display: block;
margin: 0 auto;
border-spacing: 0;
}
tbody {
white-space: nowrap;
}
th,
td {
padding: 5px 10px;
border-top-width: 0;
border-left-width: 0;
}
th {
position: sticky;
top: 0;
background: white;
vertical-align: bottom;
}
th:last-child,
td:last-child {
border-right-width: 0;
}
tr:last-child td {
border-bottom-width: 0;
}
Rsultat
Rsum technique
| Catgories de contenu | Contenu de flux |
|---|---|
| Contenu autoris |
Dans cet ordre : |
| Omission de balises | Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires. |
| Parents autoriss | Tout lment qui accepte du contenu de flux. |
| Rle ARIA implicite |
table
|
| Rles ARIA autoriss | Tous les rles sont autoriss. |
| Interface DOM | HTMLTableElement |
Spcifications
| Spcification |
|---|
| HTML # the-table-element |
Compatibilit des navigateurs
Voir aussi
- Apprendre : bases des tableaux HTML
- Les autres lments associs :
<caption>,<col>,<colgroup>,<tbody>,<td>,<tfoot>,<th>,<thead>,<tr> background-color: Proprit CSS pour dfinir la couleur de fond du tableauborder,border-collapse,border-spacing: Proprits CSS pour contrler l'aspect des bordures des cellules, des rgles et du cadremargin,padding: Proprits CSS pour aligner le tableau et dfinir l'espacement du contenu des cellulestext-align: Proprit CSS pour aligner horizontalement le contenu des cellules du tableauvertical-align: Proprit CSS pour aligner verticalement le contenu des cellules du tableauwidth: Proprit CSS pour contrler la largeur du tableau