HTML les tableaux : structurer des données pour une meilleure compréhension

Fatigué(e) des données chaotiques sur votre site web ? Découvrez comment les tableaux HTML peuvent transformer le chaos en clarté ! Les tableaux HTML, souvent perçus comme des éléments basiques, sont en réalité des outils puissants pour la structuration et la présentation des données. Une utilisation correcte des **tableaux HTML** peut considérablement améliorer l'expérience utilisateur, l'**accessibilité**, l'**optimisation SEO** et la sémantique de vos pages web. Ce guide complet vous guidera à travers les concepts essentiels, les **meilleures pratiques** et les techniques avancées pour maîtriser les **tableaux HTML** et exploiter pleinement leur potentiel dans la **structuration de données web**.

La capacité à présenter les données de manière claire et structurée est cruciale pour tout site web, qu'il s'agisse d'un simple blog ou d'une plateforme de commerce électronique complexe. Une structure bien pensée permet aux utilisateurs de trouver rapidement l'information qu'ils recherchent, ce qui améliore leur satisfaction et leur engagement. Les **tableaux HTML**, lorsqu'ils sont utilisés correctement, contribuent à atteindre cet objectif en organisant les données en lignes et en colonnes, créant ainsi une présentation visuellement intuitive et facile à comprendre. En maîtrisant les techniques décrites dans cet article, vous serez en mesure de transformer des données brutes et désorganisées en tableaux clairs, concis et accessibles à tous, optimisant ainsi la **structuration de données web**.

Introduction : au-delà du simple `<table>` (pourquoi les tableaux et quand les utiliser)

Les tableaux HTML sont bien plus que de simples balises `<table>`. Ils sont des outils essentiels pour la présentation de données tabulaires. Comprendre leur rôle et leurs limites est crucial pour créer des interfaces web efficaces et accessibles. Il est important de maîtriser les bases, mais également d'aller au-delà, en explorant les techniques qui permettent d'améliorer la sémantique, l'ergonomie et l'apparence des tableaux.

Qu'est-ce qu'un tableau HTML ?

Un tableau HTML est une structure de données organisée en lignes et en colonnes, utilisée pour présenter des informations de manière tabulaire. Il est défini par la balise `<table>` et comprend des balises `<tr>` pour les lignes, `<th>` pour les cellules d'en-tête et `<td>` pour les cellules de données. Les tableaux HTML permettent de créer des présentations visuellement claires et faciles à comprendre pour les utilisateurs. Ils sont particulièrement utiles pour comparer des données, afficher des horaires, des statistiques ou des informations similaires. Ils sont un élément clé dans la **structuration données web**.

L'importance de la structuration des données

Une bonne structuration des données avec les tableaux HTML apporte de nombreux avantages. Il ne s'agit pas seulement d'une question d'esthétique, mais d'un élément fondamental pour l'expérience utilisateur et la performance globale d'un site web. Les tableaux, lorsqu'ils sont correctement utilisés, améliorent la lisibilité et la compréhension des informations présentées. L'utilisation de balises sémantiques telles que `<th>`, `<thead>`, `<tbody>` et `<tfoot>` permet aux moteurs de recherche de mieux comprendre le contenu du tableau, ce qui peut avoir un impact positif sur le **référencement (SEO)**. Enfin, une structure de données soignée améliore l'**accessibilité**, rendant le contenu utilisable par tous, y compris ceux utilisant des lecteurs d'écran. Une structure bien définie facilite également la manipulation des données avec **JavaScript** et **CSS**, permettant de créer des interfaces utilisateur dynamiques et interactives. La **structuration données web** influence positivement tous ces aspects.

• Amélioration de la lisibilité et de la compréhension pour l'utilisateur.
• Optimisation pour les moteurs de recherche (SEO).
• Facilité d'accès pour les utilisateurs handicapés (lecteurs d'écran).
• Base solide pour la manipulation des données avec JavaScript et CSS.

Quand utiliser un tableau (et quand ne pas l'utiliser !)

Il est essentiel de savoir quand un tableau HTML est l'outil approprié et quand il est préférable d'utiliser une alternative. L'utilisation appropriée des tableaux HTML contribue à une meilleure expérience utilisateur et à un code plus sémantique. Choisir la bonne méthode de structuration des données est essentiel pour optimiser l'accessibilité, la lisibilité et la maintenabilité du site web. En comprenant les limites et les avantages des tableaux HTML, les développeurs peuvent prendre des décisions éclairées et créer des interfaces plus efficaces. Savoir quand utiliser les **tableaux HTML** est primordial pour une bonne **structuration données web**.

• Utilisation appropriée : Données tabulaires (listes de données avec relations claires entre les colonnes et les lignes, par exemple : horaires, statistiques, comparaisons).
• Utilisation inappropriée : Mise en page de la page (c'est un anti-pattern à éviter absolument, préférer CSS Flexbox ou Grid).

Un exemple d'utilisation appropriée est la présentation des horaires de vol d'une compagnie aérienne. Un tableau permet d'organiser clairement les informations relatives aux vols, telles que le numéro de vol, la destination, l'heure de départ et l'heure d'arrivée. En revanche, l'utilisation d'un tableau pour structurer la mise en page d'un article est une pratique à éviter, car elle n'est pas sémantiquement correcte et peut nuire à l'accessibilité du site web. Les technologies modernes comme CSS Flexbox et Grid offrent des alternatives plus flexibles et adaptées à la création de mises en page complexes. La **structuration données web** doit se faire en respectant la sémantique HTML.

Les bases du balisage des tableaux HTML

Comprendre le balisage de base des tableaux HTML est la première étape pour les utiliser efficacement. En maîtrisant les balises essentielles et les attributs importants, vous serez en mesure de créer des tableaux simples mais fonctionnels. Une bonne compréhension de la structure hiérarchique des tableaux HTML est également cruciale pour assurer leur **accessibilité** et leur compatibilité avec les différentes technologies d'assistance. Le **balisage HTML** est la base de la **structuration données web** avec les tableaux.

Le balisage essentiel

Le balisage de base d'un tableau HTML se compose de quatre balises principales : `<table>`, `<tr>`, `<td>` et `<th>`. La balise `<table>` est le conteneur principal du tableau, englobant toutes les autres balises. La balise `<tr>` représente une ligne du tableau, tandis que la balise `<td>` représente une cellule de données. Enfin, la balise `<th>` est utilisée pour les cellules d'en-tête, qui décrivent le contenu des colonnes ou des lignes. Il est important de noter que les balises `<th>` ont une signification sémantique particulière et sont généralement stylées différemment des balises `<td>` par défaut. Maîtriser ce **balisage HTML** est essentiel pour une bonne **structuration données web**.

• <table> : Le conteneur principal du tableau.
• <tr> : Représente une ligne du tableau.
• <td> : Représente une cellule de données.
• <th> : Représente une cellule d'en-tête. (Importance sémantique et styling par défaut)

Attributs importants

Plusieurs attributs permettent de personnaliser et d'améliorer la fonctionnalité des tableaux HTML. Les attributs `colspan` et `rowspan` permettent de fusionner des cellules, tandis que l'attribut `scope` (sur `<th>`) est essentiel pour l'**accessibilité**. Une utilisation judicieuse de ces attributs peut rendre les tableaux plus clairs, plus concis et plus accessibles aux utilisateurs handicapés. Il est important de comprendre comment ces attributs fonctionnent et comment ils peuvent être utilisés pour optimiser la présentation des données. L'attribut `scope` est particulièrement important pour l'**accessibilité tableaux HTML**.

• colspan : Fusionner des colonnes.
• rowspan : Fusionner des lignes.
• scope (sur <th> ) : Indique à quelle(s) cellule(s) d'en-tête la cellule de données correspond (important pour l'accessibilité). Expliquer les valeurs possibles : col , row , colgroup , rowgroup .

Structure hiérarchique

La structure hiérarchique des balises HTML est un aspect important à considérer lors de la création de tableaux. La balise `<table>` est le conteneur parent de toutes les autres balises du tableau. Chaque balise `<tr>` doit contenir au moins une balise `<td>` ou `<th>`. Comprendre cette hiérarchie permet de créer des tableaux valides et conformes aux normes HTML. Une structure hiérarchique claire facilite également la maintenance du code et améliore l'**accessibilité tableaux HTML**.

Exemples simples

Voici un exemple de tableau simple illustrant l'utilisation des balises et des attributs mentionnés précédemment. Cet exemple démontre comment créer un tableau basique avec des en-têtes, des données et l'utilisation de `colspan` et `rowspan`. En examinant attentivement cet exemple, vous pourrez mieux comprendre comment les différents éléments s'articulent pour créer une structure de tableau cohérente et fonctionnelle. N'hésitez pas à expérimenter avec le code pour voir comment les modifications affectent l'apparence du tableau. Ce tableau est un exemple simple de **balisage tableaux HTML**.

Exemple d'horaire de cours

Heure	Lundi	Mardi	Mercredi	Jeudi	Vendredi
9:00 - 10:00	Mathématiques	Anglais	Mathématiques	Histoire	Anglais
10:00 - 11:00	Physique	Chimie	Physique	Travaux pratiques
Fin des cours à 11h

Améliorer la sémantique et l'organisation des tableaux

Pour créer des tableaux HTML vraiment efficaces, il est essentiel d'aller au-delà des bases et d'utiliser des balises sémantiques pour organiser le contenu. Les balises `<thead>`, `<tbody>` et `<tfoot>` permettent de structurer le tableau de manière logique, tandis que la balise `<caption>` fournit un titre descriptif. L'utilisation de ces balises améliore l'**accessibilité** du tableau et permet aux moteurs de recherche de mieux comprendre son contenu, optimisant ainsi le **SEO**. L'**amélioration sémantique** est cruciale pour l'**accessibilité tableaux HTML**.

Ajouter de la structure

Les balises `<thead>`, `<tbody>` et `<tfoot>` permettent de diviser le tableau en trois sections logiques : l'en-tête, le corps et le pied de page. La balise `<thead>` contient les en-têtes du tableau, tandis que la balise `<tbody>` contient le corps principal des données. La balise `<tfoot>` est utilisée pour afficher des informations récapitulatives ou des totaux. En utilisant ces balises, vous améliorez la sémantique du tableau et facilitez sa maintenance. Cela contribue à une meilleure **structuration données web**.

• <thead> : Contient les en-têtes du tableau.
• <tbody> : Contient le corps principal du tableau.
• <tfoot> : Contient le pied de page du tableau (souvent utilisé pour les totaux).

Utilisation de `<caption>`

La balise `<caption>` permet de fournir un titre descriptif pour le tableau. Ce titre est important pour l'**accessibilité**, car il permet aux utilisateurs de lecteurs d'écran de comprendre le contenu du tableau. La balise `<caption>` doit être placée immédiatement après la balise `<table>`. Le positionnement de la légende peut être modifié avec CSS. La balise `caption` améliore l'**accessibilité tableaux HTML**.

• Fournir un titre descriptif pour le tableau.
• Importance pour l'accessibilité.
• Positionnement avec CSS.

Utilisation de `<colgroup>` et `<col>`

Les balises `<colgroup>` et `<col>` permettent de styler des groupes de colonnes. La balise `<colgroup>` est un conteneur pour les balises `<col>`, qui définissent les propriétés de style pour chaque colonne. L'utilisation de ces balises permet d'améliorer la lisibilité visuelle du tableau en alternant les couleurs de fond des colonnes ou en appliquant d'autres styles spécifiques. Le style des colonnes améliore la **structuration données web** et la lisibilité.

• Permettre le style de groupes de colonnes.
• Amélioration de la lisibilité visuelle.

Attribut `summary` (déprécié) vs. ARIA

L'attribut `summary` était utilisé pour fournir une description détaillée du tableau pour les lecteurs d'écran. Cependant, cet attribut est désormais déprécié en HTML5. Pour fournir une description accessible du tableau, il est recommandé d'utiliser les attributs ARIA (Accessible Rich Internet Applications), tels que `aria-describedby`. Ces attributs permettent de lier un élément HTML (par exemple, un paragraphe) à la description du tableau, ce qui améliore l'**accessibilité** pour les utilisateurs handicapés. Il est donc important de se familiariser avec les attributs ARIA et de les utiliser correctement pour créer des **tableaux HTML** accessibles. Utiliser ARIA améliore l'**accessibilité tableaux HTML**.

Accessibilité des tableaux (primordial!)

L'**accessibilité** des **tableaux HTML** est un aspect crucial à prendre en compte lors de la création de sites web inclusifs. Les utilisateurs de lecteurs d'écran et d'autres technologies d'assistance dépendent de la structure et de la sémantique du tableau pour comprendre son contenu. En suivant les **meilleures pratiques d'accessibilité**, vous pouvez garantir que vos tableaux sont utilisables par tous, quel que soit leur handicap. L'**accessibilité** est non seulement une obligation éthique, mais elle peut également améliorer l'expérience utilisateur pour tous les visiteurs de votre site web. L'**accessibilité tableaux HTML** est une priorité absolue.

Pourquoi l'accessibilité est cruciale pour les tableaux

L'**accessibilité** est cruciale car les tableaux mal structurés peuvent créer des obstacles pour les utilisateurs de lecteurs d'écran et d'autres technologies d'assistance. Si les en-têtes ne sont pas correctement associés aux cellules de données, les utilisateurs peuvent avoir du mal à comprendre le contenu du tableau. De même, les tableaux trop complexes peuvent être difficiles à naviguer pour les utilisateurs handicapés. En veillant à ce que vos tableaux soient accessibles, vous permettez à tous les utilisateurs d'accéder à l'information qu'ils recherchent. Une bonne **structuration données web** améliore l'**accessibilité tableaux HTML**.

Meilleures pratiques pour l'accessibilité

Plusieurs **meilleures pratiques** peuvent être suivies pour améliorer l'**accessibilité** des **tableaux HTML**. L'utilisation correcte des balises `<th>` et de l'attribut `scope` est essentielle pour associer les en-têtes aux cellules de données. Fournir une légende avec la balise `<caption>` permet aux utilisateurs de lecteurs d'écran de comprendre le contenu du tableau. Il est également important d'éviter les tableaux trop complexes et d'utiliser des attributs ARIA pour fournir des informations supplémentaires aux technologies d'assistance. Ces **meilleures pratiques** garantissent l'**accessibilité tableaux HTML**.

• Utilisation correcte de <th> et de l'attribut scope : Il est crucial d'associer correctement les cellules de données aux en-têtes correspondants. Par exemple, si un tableau présente des informations sur des produits, chaque cellule de données (prix, description, etc.) doit être clairement liée à l'en-tête correspondant (Nom du produit, Prix, Description).
• Fournir une légende avec <caption> : Rédigez une légende claire et concise qui décrit le contenu du tableau en quelques mots. Par exemple, "Comparaison des forfaits mobiles" ou "Horaires des trains au départ de Paris".
• Éviter les tableaux trop complexes : Si possible, simplifier les données ou envisager des alternatives comme des listes imbriquées ou des graphiques. Diviser les tableaux complexes en plusieurs tableaux plus simples peut améliorer la compréhension.
• Utilisation d'attributs ARIA : Utiliser aria-describedby pour lier une description détaillée au tableau, aria-label pour un titre court, et les rôles role="table" , role="row" , role="cell" si la structure du tableau est non standard.
• Ordre source logique : S'assurer que l'ordre des éléments dans le code HTML correspond à l'ordre de lecture logique pour les lecteurs d'écran.

Pour illustrer l'importance de l'utilisation de `scope` je vous recommande de lire cette documentation : MDN attribut scope .

Outils de vérification de l'accessibilité

Plusieurs outils peuvent être utilisés pour vérifier l'**accessibilité** des **tableaux HTML**. Les outils tels que WAVE et axe DevTools permettent de détecter les problèmes d'**accessibilité** et de fournir des recommandations pour les corriger. Il est important d'utiliser ces outils régulièrement pour s'assurer que vos tableaux sont accessibles à tous les utilisateurs. Pour vérifier l'**accessibilité tableaux HTML** vous pouvez utilisez ces outils :

• WAVE : WAVE Web Accessibility Evaluation Tool
• Axe DevTools : Axe DevTools

Exemple concret

Un tableau accessible utilise correctement les balises `<th>` et l'attribut `scope` pour associer les en-têtes aux cellules de données. Il fournit également une légende descriptive avec la balise `<caption>`. En revanche, un tableau non accessible peut ne pas utiliser ces balises sémantiques, ce qui rend difficile pour les utilisateurs de lecteurs d'écran de comprendre le contenu du tableau. En comparant ces deux exemples, il est facile de comprendre l'importance de l'**accessibilité** pour les **tableaux HTML**. L'utilisation de `scope` est primordiale pour l'**accessibilité tableaux HTML**.

Styling des tableaux avec CSS

Le **CSS** (Cascading Style Sheets) permet de personnaliser l'apparence des **tableaux HTML** et d'améliorer leur lisibilité. En utilisant **CSS**, vous pouvez modifier les bordures, les marges, le rembourrage, l'alignement du texte et les couleurs de fond et de texte. Un style **CSS** bien pensé peut transformer un tableau HTML simple en une présentation visuellement attrayante et facile à comprendre. Il est important de maîtriser les techniques de style **CSS** pour créer des tableaux qui s'intègrent harmonieusement à l'ensemble de votre site web. Le **CSS tableaux HTML** améliore l'expérience utilisateur.

Styles de base

Les styles de base pour les **tableaux HTML** incluent la modification des bordures, des marges, du rembourrage, de l'alignement du texte et des couleurs de fond et de texte. En ajustant ces propriétés **CSS**, vous pouvez améliorer la lisibilité et l'esthétique du tableau. Par exemple, vous pouvez ajouter des bordures fines et discrètes pour délimiter les cellules, augmenter le rembourrage pour améliorer l'espacement du texte et utiliser des couleurs de fond et de texte contrastées pour faciliter la lecture. Un bon **CSS tableaux HTML** améliore la lisibilité.

• Bordures, marges, rembourrage.
• Alignement du texte.
• Couleurs de fond et de texte.

Voici un exemple de code pour styler un tableau :

  table { border-collapse: collapse; width: 100%; margin-bottom: 1em; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; font-weight: bold; } tr:nth-child(even) { background-color: #f9f9f9; }  

Améliorer la lisibilité

Plusieurs techniques **CSS** peuvent être utilisées pour améliorer la lisibilité des **tableaux HTML**. Les tableaux rayés (zebra striping) alternent les couleurs de fond des lignes pour faciliter le suivi visuel. Les effets de surbrillance au survol (hover effect) mettent en évidence la ligne sur laquelle se trouve le curseur de la souris, ce qui améliore l'interactivité. L'utilisation de bordures légères et claires permet de délimiter les cellules sans distraire l'attention du lecteur. Ces améliorations **CSS tableaux HTML** optimisent la lisibilité.

• Tableaux rayés (zebra striping).
• Surbrillance au survol (hover effect).
• Bordures légères et claires.

Exemple de code CSS pour un tableau rayé :

  tr:nth-child(even) { background-color: #f2f2f2; }  

Responsive design

Le **responsive design** est essentiel pour garantir que les **tableaux HTML** s'affichent correctement sur tous les appareils, qu'il s'agisse d'ordinateurs de bureau, de tablettes ou de smartphones. Plusieurs techniques peuvent être utilisées pour rendre les tableaux responsives. Les tableaux horizontaux défilants permettent d'afficher les tableaux larges sur les petits écrans en permettant aux utilisateurs de faire défiler horizontalement. L'empilement des colonnes utilise des requêtes média pour modifier la mise en page en empilant les colonnes les unes sur les autres sur les petits écrans. Les tableaux "data-table" utilisent des attributs de données pour afficher les en-têtes à côté des valeurs des cellules sur les petits écrans. Un bon **responsive design** est primordial pour l'**accessibilité tableaux HTML**.

• Tableaux horizontaux défilants : Utilisation de overflow-x: auto; sur le conteneur du tableau.
• Empilement des colonnes : Utilisation de requêtes média pour modifier la mise en page en empilant les colonnes les unes sur les autres sur les petits écrans.
• Tableaux "data-table": Utiliser des attributs de données pour afficher les en-têtes à côté des valeurs des cellules sur les petits écrans. (Exemple : <td data-header="Nom">John Doe</td> ).

Voici un exemple de code pour un tableau responsive :

  .table-container { overflow-x: auto; }  

Exemples de styles avancés

Les possibilités de style **CSS** pour les **tableaux HTML** sont vastes. Vous pouvez ajouter des animations, des transitions, des icônes et d'autres éléments visuels pour créer des tableaux interactifs et engageants. Cependant, il est important de veiller à ce que ces styles avancés n'affectent pas l'**accessibilité** du tableau. Il est essentiel de tester vos tableaux avec des lecteurs d'écran et d'autres technologies d'assistance pour vous assurer qu'ils restent utilisables par tous les utilisateurs. L'utilisation de styles avancés doit être faite avec parcimonie et en tenant compte de l'**accessibilité**. Tester le **CSS tableaux HTML** avec des outils d'accessibilité est crucial.

Alternatives aux tableaux (quand les tableaux ne sont pas la solution)

Bien que les **tableaux HTML** soient un outil puissant pour la présentation de données tabulaires, ils ne sont pas toujours la solution appropriée. Dans certains cas, il est préférable d'utiliser une alternative, telle que les listes, Flexbox, Grid CSS ou les figures et descriptions. Il est important de connaître ces alternatives et de savoir quand les utiliser pour créer des interfaces web efficaces et sémantiquement correctes. Le choix de la bonne méthode de structuration des données dépend du type de données à présenter et de l'objectif de la présentation. Connaître les alternatives aux **tableaux HTML** est important pour la **structuration données web**.

• Listes ( <ul> , <ol> , <dl> ) : Pour afficher des données non tabulaires.
• Flexbox : Pour la mise en page complexe et la distribution d'éléments.
• Grid CSS : Pour une mise en page bidimensionnelle puissante et flexible.
• Figures et Descriptions ( <figure> , <figcaption> ): Pour afficher des images ou autres médias avec des légendes.

Voici un exemple d'utilisation de Grid CSS :

  .grid-container { display: grid; grid-template-columns: auto auto auto; padding: 10px; } .grid-item { background-color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.8); padding: 20px; font-size: 30px; text-align: center; }  

Choisir la bonne solution

Les critères pour décider si un tableau est approprié ou si une alternative est préférable dépendent du type de données à présenter et de l'objectif de la présentation. Si les données sont tabulaires et nécessitent une organisation en lignes et en colonnes, un tableau est généralement le meilleur choix. Cependant, si les données ne sont pas tabulaires ou si vous avez besoin d'une mise en page plus flexible, une alternative telle que Flexbox ou Grid CSS peut être plus appropriée. Il est important de prendre en compte l'**accessibilité** et la sémantique lors du choix de la méthode de **structuration données web**.

Tableaux dynamiques avec JavaScript (introduction)

**JavaScript** permet de créer des **tableaux HTML** dynamiques et interactifs. Avec **JavaScript**, vous pouvez lire et modifier les données d'un tableau existant, créer des tableaux à partir de données JSON et ajouter des fonctionnalités avancées telles que le tri des colonnes, la pagination et la recherche. L'utilisation de **JavaScript** peut transformer un tableau HTML statique en une interface utilisateur dynamique et engageante. Il est important de noter que l'utilisation de **JavaScript** doit être faite avec parcimonie et en tenant compte de l'**accessibilité**. La **manipulation tableaux HTML** avec JavaScript peut être très puissante.

• Lecture et modification des données d'un tableau existant : Accéder aux cellules, modifier le contenu, ajouter/supprimer des lignes.
• Création de tableaux à partir de données JSON : Comment récupérer des données depuis une API et les afficher dans un tableau.

Voici un exemple de code JavaScript pour modifier une cellule de tableau :

  const table = document.getElementById("monTableau"); const cell = table.rows[1].cells[0]; cell.innerHTML = "Nouveau Contenu";  

Fonctionnalités avancées

**JavaScript** permet d'ajouter des fonctionnalités avancées aux **tableaux HTML**, telles que le tri des colonnes, la pagination et la recherche. Le tri des colonnes permet aux utilisateurs de trier les données du tableau en cliquant sur les en-têtes de colonne. La pagination permet de diviser les tableaux longs en plusieurs pages pour faciliter la navigation. La recherche permet aux utilisateurs de trouver rapidement des données spécifiques dans le tableau. L'ajout de fonctionnalités avancées rend les **tableaux HTML** plus interactifs.

• Tri des colonnes.
• Pagination.
• Recherche.

Voici un exemple de code Javascript pour trier un tableau :

  function sortTable(n) { var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0; table = document.getElementById("monTableau"); switching = true; //Set the sorting direction to ascending: dir = "asc"; /*Make a loop that will continue until no switching has been done:*/ while (switching) { //start by saying: no switching is done: switching = false; rows = table.rows; /*Loop through all table rows (except the first, which contains table headers):*/ for (i = 1; i < (rows.length - 1); i++) { //start by saying there should be no switching: shouldSwitch = false; /*Get the two elements you want to compare, one from current row and one from the next:*/ x = rows[i].getElementsByTagName("TD")[n]; y = rows[i + 1].getElementsByTagName("TD")[n]; /*check if the two rows should switch place, based on the direction, asc or desc:*/ if (dir == "asc") { if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) { //if so, mark as a switch and break the loop: shouldSwitch= true; break; } } else if (dir == "desc") { if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) { //if so, mark as a switch and break the loop: shouldSwitch = true; break; } } } if (shouldSwitch) { /*If a switch has been marked, make the switch and mark that a switch has been done:*/ rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); switching = true; //Each time a switch is done, increase this count by 1: switchcount ++; } else { /*If no switching has been done AND the direction is "asc", set the direction to "desc" and run the while loop again.*/ if (switchcount == 0 && dir == "asc") { dir = "desc"; switching = true; } } } }  

Librairies et frameworks

Plusieurs librairies et frameworks **JavaScript** facilitent la création de **tableaux HTML** dynamiques et interactifs.