Les données mal présentées sur le web peuvent entraîner une confusion et réduire l’efficacité de la communication.
Cela peut frustrer les utilisateurs, rendant difficile la comparaison et la compréhension des informations essentielles.
Cet article explore comment utiliser efficacement les tableaux HTML pour structurer et présenter les données de manière claire et organisée.
Lancez votre carrière de développeur web avec une formation pratique.
Créer un tableau HTML efficace
Les tableaux en HTML sont des éléments essentiels pour organiser et présenter les données de manière organisée sous forme de lignes et de colonnes pour les structurer et les rendre compréhensibles pour les navigateurs, leur importance réside dans leur capacité à structurer les informations de manière visuellement claire et à permettre aux utilisateurs de comparer facilement des données.
- Pour construire un tableau on utilise la balise en paire <table> </table> qui indique le début et la fin d’un tableau.
- La balise <tr> </tr> indique le début et la fin d’une ligne du tableau.
- La balise <td> </td> est utilisée pour définir les cellules de données.
- La balise <th> est utilisée pour définir les cellules d’en-tête. Ces cellules sont généralement affichées en gras et au centre.
Pour créer ce tableau en HTML à une ligne , et trois colonnes comme dans cet exemple :
On doit écrire le code suivant :
<!DOCTYPE html>
<html>
<head>
<title>Exemple de tableau en HTML</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.jet-image-accordion__item-loader span{--wpr-bg-b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba: url('https://blog.alphorm.com/wp-content/plugins/jet-tabs/assets/images/spinner-32.svg');}.rll-youtube-player .play{--wpr-bg-a26930c2-4f9d-4900-8f38-97596040b416: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".jet-image-accordion__item-loader span","style":".jet-image-accordion__item-loader span{--wpr-bg-b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg');}","hash":"b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-a26930c2-4f9d-4900-8f38-97596040b416: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"a26930c2-4f9d-4900-8f38-97596040b416","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<h1>Tableau</h1>
<table >
<tr>
<th>Nom</th>
<th>Âge</th>
<th>Ville</th>
</tr>
<tr>
<td>Jack</td>
<td>20</td>
<td>Lyon</td>
</tr>
</table>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
Pour ajouter des bordures a ce tableau on utilise l’attribut ‘border’ dans la balise <table> , en spécifiant l’épaisseur de la bordure en pixels .
Dans cette exemple on ajouter une bordure d’une largeur de 1 pixel autour de chaque cellule.
<table border="1" >
Vous pouvez modifier la valeur pour obtenir une bordure plus épaisse ;
Fusionner cellules avec rowspan
Pour fusionner des lignes de tableau en HTML en utilise l’attribut ‘rowspan ‘ qui permet de fusionner plusieurs lignes en une seule cellule : La fusion s’effectue verticalement ce qui peut être utile pour des en-têtes de sections ou pour des tableaux présentant des données hiérarchiques.
Dans cet exemple on a fusionner la cellule Lyon sur les deux lignes de la colonnes ‘Ville’.
Le code pour obtenir le résultat précédant :
<!DOCTYPE html>
<html>
<head>
<title>Exemple de tableau en HTML</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.jet-image-accordion__item-loader span{--wpr-bg-b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba: url('https://blog.alphorm.com/wp-content/plugins/jet-tabs/assets/images/spinner-32.svg');}.rll-youtube-player .play{--wpr-bg-a26930c2-4f9d-4900-8f38-97596040b416: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".jet-image-accordion__item-loader span","style":".jet-image-accordion__item-loader span{--wpr-bg-b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg');}","hash":"b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-a26930c2-4f9d-4900-8f38-97596040b416: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"a26930c2-4f9d-4900-8f38-97596040b416","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<h1>Tableau</h1>
<table border="1" >
<tr>
<th>Nom</th>
<th>Âge</th>
<th>Ville</th>
</tr>
<tr>
<td>Jack</td>
<td>20</td>
<td rowspan="2">Lyon</td>
</tr>
<tr>
<td>Liam</td>
<td>30</td>
</tr>
</table>
</body>
</html>
Vous pouvez fusionner autant de lignes que vous voulez en ajustant la valeur de l’attribut rowspan. Assurez-vous d’utiliser cet attribut pour améliorer la lisibilité du tableau, trop de fusion peut le rendre confus.
Fusion de colonnes : colspan
De même la fusion des colonnes est aussi importante dans la présentation des données dans les tableaux, l’attribut ‘colspan’ permet de fusionner des colonnes en une seule cellule : la fusion s’effectue horizontalement.
Dans cet exemple on souhaite catégoriser les filles et les garcons du tableau, en utilisant l’attribut colspan .
Le code pour obtenir le résultat précédant :
<!DOCTYPE html>
<html>
<head>
<title>Exemple de tableau en HTML</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.jet-image-accordion__item-loader span{--wpr-bg-b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba: url('https://blog.alphorm.com/wp-content/plugins/jet-tabs/assets/images/spinner-32.svg');}.rll-youtube-player .play{--wpr-bg-a26930c2-4f9d-4900-8f38-97596040b416: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".jet-image-accordion__item-loader span","style":".jet-image-accordion__item-loader span{--wpr-bg-b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg');}","hash":"b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-a26930c2-4f9d-4900-8f38-97596040b416: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"a26930c2-4f9d-4900-8f38-97596040b416","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<h1>Tableau</h1>
<table border="1" >
<tr>
<th>Nom</th>
<th>Âge</th>
<th>Ville</th>
</tr>
<tr>
<td colspan="3">Garcons</td>
</tr>
<tr>
<td>Jack</td>
<td>20</td>
<td rowspan="2">Lyon</td>
</tr>
<tr>
<td>Liam</td>
<td>30</td>
</tr>
<tr>
<td colspan="3">Filles</td>
</tr>
<tr>
<td>Camille</td>
<td>25</td>
<td>Paris</td>
</tr>
</table>
</body>
</html>
Ajouter légende et entête HTML
La balise <caption> en HTML permet de fournir une légende descriptif a un tableau. Elle se place directement après la balise <table> cela permet aux utilisateurs à comprendre rapidement le contenu que présente un tableau.
Pour ajouter une légende au tableau qu’on a créé précédemment, il suffit d’ajouter cette ligne au-dessous de la balise <table> :
<caption>Les utilisateurs </caption>
Pour afficher cette légende au-dessous du tableau on doit utiliser du CSS , qu’on va voir après.
Structurer tableau avec thead
Si votre tableau est grand, il est préférable de le découper en 3 parties.
Pour faire, il existe les balises <thead>, <tbody> et <tfoot> pour structurer définir les trois “zones” du tableau :
- L’en-tête du tableau :se définit avec les balises <thead></thead>, ces lignes contiennent généralement les titres des colonnes ou toute autre information qui décrit le contenu des colonnes du tableau, spécifiquement les balises <th>. <thead> est placé juste après la balise <table>.
- Le corps du tableau :se définit avec les balises <tbody></tbody> contient les données principales du tableau contient les balises <tr>.
- Le pied du tableau :se définit avec les balises <tfoot></tfoot> . Cette partie peut être utile pour mettre un résumé, ou un total. Le pied de tableau se mettra, comme l’en-tête, par défaut, en gras
NB: Il est conseillé d’écrire les balises dans l’ordre suivant :
- <thead>
- <tfoot>
- <tbody>
Pour résumer ce chapitre , les tableaux en HTML ont un rôle important dans la structuration et l’organisation des données sur les pages web. Leur importance consiste dans leur capacité à présenter des informations de manière simple et systématique, qui rends facile la comprehension chez les utilisateurs . Avec l’évolution duweb, les tableaux sont devenu facile a manipuler et personnaliser grâce à l’intégration de CSS et aux bonnes pratiques de conception responsive. Aujourd’hui, ils restent un outil primordial pour diverses applications web, de la présentation des données statistiques aux listings de produits, offrant une flexibilité essentielle pour structurer les contenus de manière efficace et esthétique.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment créer un tableau de base en HTML ?
Comment ajouter des bordures à un tableau HTML ?
Comment fusionner des lignes ou des colonnes dans un tableau HTML ?
Comment ajouter une légende à un tableau HTML ?
Comment structurer les grandes tables en HTML ?
Conclusion
Les tableaux HTML offrent une flexibilité exceptionnelle pour structurer les données sur le web. Comment envisagez-vous d’intégrer ces techniques dans vos projets futurs ?
