L'intégration de données tabulaires sur le web est une compétence fondamentale pour tout développeur. Au cœur de cette tâche réside l'utilisation des tableaux HTML, des structures puissantes mais dont la mise en forme peut parfois sembler énigmatique, particulièrement lorsqu'il s'agit de gérer les bordures sans l'aide des feuilles de style en cascade (CSS). Cette exploration détaillée vous guidera à travers les principes de construction des tableaux HTML, leurs attributs intrinsèques, et les limites rencontrées lorsque l'on tente de sculpter leur apparence sans CSS, soulignant par la même occasion l'importance cruciale de ce dernier pour des résultats esthétiques et modernes.
Les Fondamentaux de la Création de Tableaux HTML
Un tableau HTML sert principalement à présenter les données tabulaires de manière organisée. Pour construire ces structures, la première balise à connaître est <table>. Cette balise est de type bloc, il faut donc la placer en dehors d'un paragraphe. La balise <TABLE> définit le début et la fin de l'ensemble du tableau, encapsulant tout son contenu. En HTML, un tableau se construit ligne par ligne, ce qui est une caractéristique essentielle de son architecture.
Chaque ligne d'un tableau est définie par la balise <tr> (pour "table row"). La balise <TR> définit le début d'une ligne et la fin de cette ligne. Il est impératif qu'elle contienne des cellules et ne doit jamais contenir une autre balise <tr>. Le nombre de balises <tr> dépend naturellement du nombre de lignes désirées ; pour une ligne, on aura un <tr>, pour deux lignes, on aura deux <tr> à la suite, et ainsi de suite.
À l'intérieur de chaque ligne, les données sont organisées en cellules. La balise <td> (pour "table data") définit une cellule de données standard dans une ligne. De même, la balise <td> ne doit jamais contenir une autre balise <td>. Le nombre de balises <td> dépend du nombre de colonnes désirées. Pour une colonne, on aura un <td>, pour deux colonnes, on aura deux <td> à la suite, et pour trois colonnes, trois <td>. Pour les tableaux simples, c'est-à-dire sans fusion de cellules, vous devez vous assurer d'avoir le même nombre de balises <td> dans chaque balise <tr> afin de maintenir une structure cohérente et bien formée. Par exemple, si vous avez un tableau de trois colonnes et de six lignes, alors vos six balises <tr> doivent toutes contenir exactement trois balises <td>.
Pour des raisons d'accessibilité et de sémantique, il est crucial d'utiliser les balises <th> (pour "table header") pour les cellules d'en-têtes. Ces balises indiquent que le contenu de la cellule est un titre pour une colonne ou une ligne. Comme vous pouvez le constater, votre navigateur mettra en gras le texte des cellules d'en-tête par défaut, les distinguant ainsi des cellules de données ordinaires. L'utilisation des balises <th> améliore significativement l'accessibilité du tableau, notamment pour les utilisateurs de lecteurs d'écran, car elles leur permettent de mieux comprendre la structure et la signification des données présentées.
Ajouter des Titres et Structurer des Tableaux Complexes
Normalement, tout tableau devrait avoir un titre. Le titre permet de renseigner rapidement le visiteur sur le contenu du tableau, offrant un contexte immédiat. Sans titre de tableau, on peut être un peu perdu. Par exemple, si notre exemple est constitué d'une liste de personnes, sans un titre clair, il serait difficile de comprendre ce que cela représente.
Heureusement, il existe la balise <caption> pour ajouter un titre à notre tableau. Cette balise se place tout au début du tableau, juste avant l'en-tête (<thead>) ou la première ligne (<tr>) si <thead> n'est pas utilisée. C'est quand même plus clair, n'est-ce pas ? Un titre pertinent facilite grandement la compréhension du tableau et son rôle dans la page.
HTML : Les tableaux
Après avoir appris à construire un petit tableau simple, ce qui peut suffire dans la plupart des cas, vous aurez parfois besoin de réaliser des tableaux plus complexes. Si votre tableau est assez gros, vous aurez tout intérêt à le découper en plusieurs parties pour une meilleure organisation sémantique et une gestion plus aisée. Pour cela, il existe des balises HTML qui permettent de définir les trois "zones" principales du tableau. L'en-tête du tableau (en haut) se définit avec les balises <thead></thead>, le corps du tableau (au centre) se définit avec les balises <tbody></tbody>, et le pied du tableau (en bas) se définit avec les balises <tfoot></tfoot>. L'utilisation de ces balises n'est pas obligatoire, mais elle est fortement recommandée pour la structuration de grands tableaux.
Vous vous demandez peut-être ce qu'il faut mettre dans le pied de tableau (<tfoot>). Vous pouvez, par exemple, y inclure un résumé ou un total des données présentées dans le corps du tableau. Le pied de tableau, tout comme l'en-tête, se mettra par défaut en gras, offrant une distinction visuelle. Dans un exemple de tableau donné, ce n'est pas forcément très parlant de mettre le même contenu dans l'en-tête et le pied du tableau. Cependant, cela peut être extrêmement utile lorsqu'un tableau est très long, car le pied de tableau peut répéter des informations clés (comme les totaux) à la fin du tableau, les rendant facilement accessibles sans avoir à faire défiler jusqu'au début.
Fusion de Cellules et Attributs de Dimensionnement
Pour structurer un tableau encore plus finement, vous pouvez fusionner des cellules. Pour fusionner des cellules entre elles, il suffit d'ajouter un attribut dans la balise HTML <td> ou <th>. Cela permet d'indiquer le nombre de cellules à fusionner entre elles. Il existe deux attributs pour deux types de fusions différentes :
- L'attribut
colspanpermet de fusionner des colonnes : la fusion s'effectue horizontalement, aussi bien sur les lignes d'en-tête que sur le contenu lui-même. Vous spécifiez la valeur decolspanpour indiquer le nombre de colonnes que la cellule doit couvrir. - L'attribut
rowspanpermet de fusionner des lignes : là, plusieurs lignes seront groupées entre elles. La fusion s'effectuera verticalement, couvrant plusieurs lignes dans une colonne donnée.
Voyons tout de suite à quoi cela peut ressembler. Un tableau avec des lignes et des colonnes fusionnées peut grandement améliorer la présentation de données complexes, permettant par exemple d'avoir des en-têtes qui s'étendent sur plusieurs sous-catégories. Il faut indiquer combien de cellules doivent être fusionnées avec ces attributs.
En ce qui concerne le dimensionnement des tableaux et de leurs éléments, vous pouvez noter des mentions appropriées de largeur et de hauteur pour l'ensemble du tableau, ainsi que pour les colonnes et les rangées. Les mentions de largeur sont notées grâce à l'attribut width=, et les mentions de hauteur par l'attribut height= (où width signifie largeur et height signifie hauteur). La seule de toutes ces mentions qui est permise dans la variante HTML "Strict" est la largeur totale du tableau. Les autres mentions, comme la largeur ou la hauteur d'une cellule ou d'une rangée, sont classées en cours d'abandon et doivent disparaître à l'avenir du standard HTML. De telles mentions sont également possibles à l'aide des CSS, qui sont la méthode préférée et moderne pour le style.
L'attribut width= peut déterminer la largeur du tableau complet par rapport à l'espace disponible dans l'élément parent, ou déterminer la largeur du tableau complet par rapport à la fenêtre d'affichage si le tableau est l'élément de niveau supérieur. Appliqué à une cellule, il détermine la largeur d'une cellule d'un tableau et par la même occasion la largeur de toutes les cellules de la même colonne. Cet usage est classé en cours d'abandon et peut être remplacé par des mentions CSS comme <th style="width:100px">. De même, height= détermine la hauteur d'une cellule d'un tableau et par la même occasion la hauteur de toutes les cellules de la même rangée du tableau. Cet attribut est également classé en cours d'abandon et peut être remplacée par des mentions CSS comme <td style="height:100px">. Quelques navigateurs interprètent en outre d'autres mentions comme <tr height=>, bien que cela ne soit pas standardisé.
Dans un exemple où le même tableau a été noté deux fois, dans le premier cas, les attributs HTML width= et height= ont été mis en œuvre aux endroits prévus pour eux - d'après la variante HTML "Transitional". Le deuxième tableau, par contre, utilise les propriétés CSS correspondantes pour mentionner la largeur et la hauteur et satisfait ainsi aux exigences de la variante HTML "Strict", qui privilégie la séparation du contenu (HTML) et de la présentation (CSS). Il est important de noter que si le contenu du tableau est plus petit que les dimensions spécifiées par width ou height, cela laisse un espace vide. Si les attributs sont caduques, le tableau ou la cellule (et avec elle la colonne et la rangée) sera dans ce cas dimensionné par le navigateur WWW de telle façon que tout son contenu soit affiché de manière optimale.
Étant donné que la mention relative à width= dans une cellule de tableau s'applique à toute la colonne, vous n'avez besoin de la noter qu'une seule fois par colonne. Le mieux est de noter cette mention dans la première rangée du tableau. Il en va de même avec la mention relative à height= dans une cellule de tableau. Étant donné que cette mention s'applique à toute la rangée de tableau concernée, le mieux est de la noter dans la première cellule de la rangée concernée. Il est conseillé d'utiliser les mentions en pixels et en pourcentage toujours de façon à ne créer aucun conflit. Par exemple, si toutes les largeurs sont déterminées en pourcentage et seule la hauteur est fixée en pixels, le navigateur peut rechercher pour l'ensemble du tableau une largeur de 60% de l'élément parent et 50% de cette largeur pour la première colonne, permettant une adaptabilité. Une solution plus claire pour définir la largeur de colonnes de tableau est offerte par la possibilité de prédéfinir des colonnes avec la balise <col> et <colgroup>, bien que cela ne soit pas directement mentionné dans l'extrait fourni.
Vous pouvez également déterminer que pour le contenu d'une cellule, aucun passage à la ligne automatique ne puisse se faire. La colonne du tableau est à l'affichage, dimensionnée en conséquence pour la largeur. Cela est réalisable avec l'attribut HTML nowrap dans une cellule. L'exemple montre dans la première rangée comment l'attribut HTML nowrap est mis en œuvre, et dans la deuxième rangée la notation correspondante en CSS (white-space: nowrap;).
Alignement et Couleurs de Fond (Attributs HTML Dépréciés)
Les contenus de cellules de tableaux peuvent, en raison de leur diversité ou bien des mentions de largeur et de hauteur, prendre plus de place qu'il ne leur en faut. Pour ce cas, il vous est possible d'aligner les contenus de cellules sur la bordure de celle-ci, que ce soit horizontalement (à gauche, centré, à droite) ou verticalement (en haut, au milieu, en bas). Les mentions correspondantes sont applicables aussi bien sur des cellules individuelles (donc sur les repères <th> et <td>), que sur des parties du tableau telles que des rangées de tableau (<tr>), l'en-tête du tableau (<thead>), le corps du tableau (<tbody>) et le pied du tableau (<tfoot>).
Avec align="left" placé dans le repère d'ouverture <th>, vous pouvez aligner à gauche une cellule d'en-tête, et avec la mention align="right", l'aligner à droite. Vous pouvez centrer des cellules de données <td> en plaçant align="center" dans leur repère d'ouverture et les aligner à droite avec align="right". Les mentions align="center" pour les cellules d'en-tête et align="left" pour les cellules de données sont naturellement aussi permises, mais font l'effet du réglage par défaut et de ce fait ne sont pas nécessaires (où align signifie alignement, left signifie gauche, center signifie centré, et right signifie à droite).
Vous pouvez également noter ces mentions dans le repère d'ouverture <tr>, dans le repère d'ouverture <thead>, dans le repère d'ouverture <tbody> et dans le repère d'ouverture <tfoot>. Alors c'est toutes les cellules de la partie correspondante du tableau qui seront alignées comme mentionné. Les mentions contradictoires dans les cellules individuelles ont, il est vrai, priorité sur les mentions s'appliquant à ces passages. À partir de HTML 4.0, la mention align="justify" est également permise, permettant d'aligner le texte des deux côtés.
Concernant l'alignement vertical, avec valign="top" dans son repère d'ouverture, vous pouvez aligner une cellule en haut, et avec la mention valign="bottom", l'aligner en bas. Même la mention valign="middle" est possible. Cependant, l'alignement vertical au milieu est souvent le réglage par défaut et est donc superflu (où valign signifie alignement vertical, top signifie haut, bottom signifie bas, et middle signifie au milieu). Vous pouvez même noter l'attribut valign dans le repère d'ouverture <tr>, dans le repère d'ouverture <thead>, dans le repère d'ouverture <tbody> et dans le repère d'ouverture <tfoot>.
De plus, la mention align="char" est permise depuis HTML 4.0, en relation avec les attributs char= et charoff=. Avec align="char", vous pouvez faire en sorte que les contenus d'une colonne soient alignés sur un signe décimal. Pour cela, vous avez besoin de l'attribut char= (où char signifie caractère). Derrière, vous placez entre guillemets un signe que vous utilisez comme signe décimal. Toutes les cellules qui contiennent ce signe seront alignées de telle façon que le signe décimal sera toujours au même endroit. Pour affiner cet alignement, vous pouvez mentionner encore en plus l'attribut charoff= (où charoff signifie position du signe). Vous mentionnez ainsi à quelle position le signe est placé au plus tôt. Dans un exemple donné, si une virgule a été définie comme signe décimal, les valeurs de la colonne prédéfinie concernée seront alignées de telle façon que le signe décimal soit toujours au même endroit. La spécification HTML précise pourtant que le soutien de l'alignement comptable par les navigateurs est laissé à leur discrétion.
Vous pouvez également définir une couleur d'arrière-plan qui s'applique soit au tableau complet, soit à certaines lignes ou cellules. Les navigateurs Web répandus soutiennent même la mention d'images d'arrière-plan avec effet de papier peint, pourtant ces mentions n'ont jamais fait partie du standard HTML. Même les mentions de couleurs d'arrière-plan ont été classées en cours d'abandon et doivent à l'avenir disparaître du standard HTML. Grâce à l'attribut bgcolor= dans le repère d'ouverture du tableau, vous pouvez déterminer une couleur d'arrière-plan pour le tableau complet (où bgcolor signifie couleur d'arrière-plan). Pour mentionner la couleur, il convient de se reporter aux règles pour définir les couleurs en HTML (noms de couleurs, codes hexadécimaux, etc.).
Si vous placez bgcolor= dans le repère d'ouverture (<tr>) d'une ligne de tableau, cela fixe une couleur d'arrière-plan pour toutes les cellules de cette ligne. Si bgcolor= est utilisé dans le repère d'ouverture (<td>) d'une cellule de données ou dans le repère d'ouverture d'une cellule d'en-tête (<th>), la couleur d'arrière-plan s'applique pour cette seule cellule. En cas de conflit, la mention de couleur dans une cellule distincte a priorité sur la mention de couleur pour la ligne complète, ou pour tout le tableau. L'attribut background= permet aussi d'incorporer une image d'arrière-plan pour le tableau ou pour des cellules distinctes. Cet attribut appliqué aux tableaux n'est pourtant pas conforme à HTML et n'a pas été mis en avant dans les exemples récents, car les feuilles de style sont désormais la méthode privilégiée pour cela. Dans un exemple, il est supposé que le fichier graphique arrplan.jpg se trouve dans le même répertoire que le fichier HTML pour son affichage.
L'Énigme des Bordures : HTML Pur vs. Nécessité du CSS
Le sujet principal de cet article est de comprendre comment faire des bordures de tableau HTML sans CSS. Cependant, il est essentiel d'aborder une réalité technique fondamentale : comment faire un tableau à bordures fines ? Sans les feuilles de style, c'est impossible. Et je rappelle, à toutes fins utiles, que les tableaux sont destinés à une mise en forme de données, et non à des fins de design structurel de page.
Un tableau HTML sans CSS paraît bien vide. Si l'on se contente de la structure HTML de base, le résultat est un peu déprimant. Cela ne ressemble pas vraiment à un tableau ; le texte s'écrit à la suite et il n'y a même pas de bordures visibles. "C'est un tableau, ça ?" se demande-t-on. C'est pourquoi, pour ajouter des bordures au tableau HTML, la propriété CSS border est devenue incontournable.
Historiquement, HTML offrait l'attribut border directement sur la balise <table> pour ajouter une bordure. La bordure d'un tableau peut être définie grâce à l'attribut BORDER de la balise <TABLE>. Pour supprimer la bordure, il fallait mettre 0 pour valeur (border="0"). Comme vous avez pu le remarquer, l'attribut BORDER ne supprime que le relief de la bordure. Pour supprimer "définitivement" la bordure, il fallait ajouter l'attribut CELLSPACING avec la valeur 0. Retester avec ces deux attributs avec la valeur 0 permet de voir un tableau sans bordures externes ni espace entre les cellules. Puis, avec CELLSPACING="0" et BORDER="1", on observe une bordure fine et unie. En conclusion de cette approche HTML pure : l'attribut BORDER définit l'épaisseur du relief, tandis que l'attribut CELLSPACING définit l'épaisseur de la bordure, c'est-à-dire l'espace entre les cellules.
Quand vous créez une bordure avec border= et un quadrillage visible dans le tableau, l'effet de cellpadding= et de cellspacing= peut être mieux retracé. cellpadding= fixe l'espace entre le contenu de la cellule et le bord de la cellule en pixels (cellpadding = espace intérieur de la cellule). Avec cellspacing=, vous fixez l'espace des cellules entre elles en pixels (cellspacing = espace entre cellules). Quand vous créez une bordure de tableau visible avec border=, tous les côtés se voient affecter un cadre. La condition préalable à toutes ces mentions est la présence de l'attribut border= dans le repère d'ouverture <table>.
Cependant, les capacités de border= sont très limitées. Par exemple, avec frame="void" (où void signifie rien), absolument aucune bordure de tableau n'est affichée. Si vous mentionnez border=, le quadrillage du tableau est cependant affiché de façon visible, mais sans beaucoup de contrôle sur son apparence. La seule façon d'obtenir des bordures fines et entièrement personnalisables, c'est-à-dire qui donnent vraiment l'apparence d'un tableau moderne et élégant, est d'utiliser les feuilles de style.
De telles mentions directes dans le HTML pour la présentation sont de plus classées en cours d'abandon et doivent disparaître à l'avenir du standard HTML au profit des CSS.
L'Incontournable Rôle des CSS pour des Bordures Esthétiques
Pour ajouter des bordures qui répondent aux attentes visuelles modernes, on utilise le sélecteur CSS correspondant. Pour cela existent des propriétés CSS pour la bordure de tableaux. Pour employer des feuilles de style CSS, il vous faut d'abord savoir comment définir des formats CSS. Ensuite, vous serez en mesure d'appliquer les propriétés CSS.
On utilise td pour sélectionner toutes les cellules des tableaux de la page. Donc, pour créer des bordures à nos cellules, on fait par exemple :
td { /* Toutes les cellules des tableaux... */ border: 1px solid black; /* ... */}Et voici le résultat juste en dessous : cela ressemble un peu plus à un tableau. Hum, ce n'est pas encore aussi parfait que ce qu'on voudrait. Le problème avec cette approche simple est que les bordures de chaque cellule s'ajoutent les unes aux autres, créant des lignes doubles et épaisses entre les cellules.
Pour coller les bordures entre elles et obtenir un aspect plus propre et unifié, on utilise la propriété CSS border-collapse. Cette propriété est appliquée sur la balise <table> elle-même.
table { border-collapse: collapse;}Ce qui donne un rendu bien plus satisfaisant : cela ressemble vraiment à un tableau ! Maintenant que l'on a ce qu'on voulait, on va rajouter la ligne d'en-tête du tableau en utilisant <th> et en stylisant également ces cellules.
HTML : Les tableaux
Précisément pour les tableaux, les feuilles de style CSS sont d'une grande utilité pour la mise en forme. Car vous pouvez formater tous les éléments d'un tableau à votre gré avec les CSS - que ce soit séparément ou par groupe. Vous noterez que, grâce aux attributs de style en CSS, les tailles du tableau et des cellules peuvent être définies de manière très précise et flexible. J'en vois d'ici qui disent : "oui, mais je n'en veux pas du trait noir du tour !!". Vous remarquez donc que les styles comme .grise et .blue peuvent être appelés dans les cellules du tableau par la syntaxe class="grise" et class="blue", offrant des possibilités infinies de personnalisation.
Ces mentions de couleurs d'arrière-plan en HTML pur sont désormais classées en cours d'abandon et doivent à l'avenir disparaître du standard HTML. Pour des effets d'ombrage ou des bordures plus complexes que la simple couleur de cadre, où vous définissez deux couleurs différentes - une plus foncée et une plus claire -, les CSS sont la solution. De même, les alignements vertical et horizontal pour les nombres ("oui mais les nombres, ça doit s'aligner sur la droite ?") sont gérés bien mieux via CSS. On va utiliser les "combinateurs d'enfants adjacents" (E + F) pour arranger cela, permettant de ne styler que le second span de chaque élément, par exemple. Petit écueil néanmoins au niveau de l'alignement des images de puces : elles vont se trouver décalées par rapport au texte si l'on ne gère pas cela avec CSS.
Avec les CSS, on peut centrer un tableau sur la page. Voici ce que ça donne :
table { margin: 0 auto; /* Pour centrer le tableau */}Le tableau est centré sur la page ! Super ! Vous pouvez également donner au tableau plus d'espace autour de lui. Par exemple, ajouter une marge de 15 pixels :
table { margin: 15px auto;}Et voilà le résultat avec une marge de 15 pixels : le tableau est plus aéré, c'est mieux !
Certaines mentions ne sont toutefois pour l'instant interprétées que par l'Explorer Internet MS et ne font pas partie du standard HTML. C'est une raison de plus pour s'appuyer sur les CSS pour la mise en forme, garantissant une meilleure compatibilité et des résultats uniformes sur différents navigateurs.
La composition des tableaux est un chapitre qui va vous demander beaucoup d'attention. Maîtriser les tableaux, c'est maîtriser la mise en page de votre document. Cependant, l'apparition du XHTML a fait évoluer cette technique de mise en page avec les tableaux, qui n'est plus conseillée pour la mise en page générale, mais reste abordable pour les débutants pour la structuration des données. Il est clair qu'un tableau sans CSS paraît bien vide, et que pour des bordures fines et un design soigné, les feuilles de style sont non seulement recommandées, mais indispensables.