Comment faire un tableau HTML ?

Le tableau HTML organise les informations pour en faciliter la lisibilité. À l'instar des images, les tableaux sont des formats très visuels : en un clin d'œil, l'internaute comprend et retient l'information. L'expérience utilisateur est améliorée, et l'impact du contenu est renforcé. Insérer un tableau sur une page web est notamment utile pour classer des données par catégories, pour comparer des produits et des services ou encore pour résumer ou aérer un texte long.

L'usage d'un CMS permet d'accéder à un module dédié à la création de tableaux : nul besoin de maîtriser le code. À défaut, il faut utiliser les langages HTML et CSS. Le code HTML suffit à insérer un tableau et à remplir le contenu de ses cellules. Ajouter des propriétés CSS permet de mettre en forme le tableau, pour personnaliser et enjoliver son apparence.

Comment faire un tableau HTML ?

Pour faire un tableau HTML, il faut utiliser les balises suivantes :

• La balise < table > : elle indique au navigateur qu'il faut afficher un tableau. Tout ce qui se trouve entre les balises < table > < /table > est organisé en lignes et en colonnes.
• La balise < tr >, pour « table row » : elle désigne une ligne du tableau. Les éléments renseignés à l'intérieur des balises < tr > < /tr > s'affichent sur une ligne.
• La balise < td >, pour « table data » : elle permet de remplir le contenu d'une cellule.

Le tableau HTML se construit ligne par ligne. Après avoir inséré la balise < table >, il faut coder chaque ligne du tableau l'une après l'autre. Le nombre de colonnes est déterminé par le nombre de balises < td > de chaque ligne. Pour créer un tableau HTML à 2 lignes et 2 colonnes, par exemple, le code ressemble à cela :

< table >

< tr > < td >Colonne 1< /td > < td >Colonne 2< /td > < /tr >

< tr > < td >Contenu colonne 1< /td > < td >Contenu colonne 2< /td > < /tr >

< /table >

Le tableau HTML peut être enrichi d'un titre et d'une ligne en-tête, à l'aide des balises suivantes :

• La balise < caption >, renseignée juste après la balise < table >, permet de donner un titre au tableau. Le titre apparaît centré au-dessus du tableau.
• La balise < th >, renseignée sur la première ligne du tableau, remplace la balise < td > pour indiquer au navigateur qu'il s'agit de la ligne en-tête. Alors que le contenu des cellules < td > est aligné à gauche par défaut, le contenu des cellules < th > est affiché en gras et centré.

Dans l'exemple précédent, le tableau HTML enrichi d'un titre et d'une ligne en-tête est codé ainsi :

< table >

< caption >titre< /caption >

< tr > < th >Colonne 1< /th > < th >Colonne 2< /th > < /tr >

< tr > < td >Contenu colonne 1< /td > < td >Contenu colonne 2< /td > < /tr >

< /table >

Résultat :

See the Pen tbaleau-html_code-basique by HubSpot France (@HubSpot-France) on CodePen.

Force est de constater que ce tableau HTML affiche une mise en forme très basique, le rendu est brut et rend la lisibilité médiocre. Pour mieux organiser les données, dans un tableau esthétique et facilement compréhensible, il faut ajouter des propriétés CSS.

Comment modifier un tableau HTML ?

De nombreuses propriétés CSS permettent de modifier le tableau HTML, pour le personnaliser de manière avancée. Parmi les propriétés fondamentales à maîtriser : border, padding et background-color, pour ajouter des bordures, redimensionner le tableau et y mettre de la couleur. La balise HTML colgroup permet en outre d'isoler une colonne pour en agrandir la largeur des cellules.

Modifier les bordures du tableau HTML

Le tableau HTML, par défaut, est dénué de bordures. Illustration avec ce tableau comparatif à afficher sur la page d'inscription en ligne sur le site web d'une salle de sport :

See the Pen tableau-html_formules-abonnement by HubSpot France (@HubSpot-France) on CodePen.

La propriété CSS border permet d'ajouter des bordures, pour encadrer le tableau et chacune de ses cellules. Le code est le suivant : table, th, td { border: 1px solid black; }, ou table, caption, th, td { border: 1px solid black; } pour inclure le titre dans un cadre. À noter que les valeurs de la propriété border peuvent être modifiées en fonction des exigences de mise en page. Dans l'exemple, la charte graphique du site web utilise du bleu ciel :

See the Pen tableau-html_bordures by HubSpot France (@HubSpot-France) on CodePen.

Par défaut, les bordures des cellules sont dissociées. Pour les fusionner, il faut ajouter la propriété CSS border-collapse et renseigner la valeur « collapse ». Résultat :

See the Pen tableau-html_bordures-collapse by HubSpot France (@HubSpot-France) on CodePen.

Modifier la taille des cellules du tableau HTML

La taille des cellules du tableau HTML est ajustée au contenu. La propriété CSS padding permet d'augmenter l'espace entre le texte et la bordure de la cellule, pour aérer le contenu afin de gagner en lisibilité. Pour augmenter les dimensions des cellules, il faut leur attribuer la propriété padding et renseigner la valeur souhaitée pour l'espacement. Exemple :

See the Pen tableau-html_padding by HubSpot France (@HubSpot-France) on CodePen.

L'aspect du tableau est ainsi mieux soigné.

Modifier la ligne en-tête du tableau HTML

La balise HTML < th > affiche le texte de la ligne en-tête centré en gras. Il est possible de mettre d'autant plus en valeur la ligne en-tête du tableau HTML, pour faire encore mieux ressortir les titres de chaque colonne et pour améliorer le rendu visuel. Ajouter une couleur d'arrière-plan est utile à cet effet. C'est la propriété CSS background-color, attribuée à la ligne en-tête, qui indique au navigateur d'afficher la couleur d'arrière-plan avec la valeur renseignée. Exemple :

See the Pen tableau-html_background-color by HubSpot France (@HubSpot-France) on CodePen.

Modifier la largeur d'une colonne du tableau HTML

La largeur d'une colonne peut être modifiée dans le code HTML. Au lieu de renseigner la largeur pour chaque cellule de la colonne, il est possible d'insérer la balise < colgroup >, d'ajouter autant de balises < col > qu'il y a de colonnes et d'ajouter l'attribut style sur la colonne à élargir. Pour augmenter la largeur de la première colonne « Abonnement », par exemple :

See the Pen tableau-html_colgroup by HubSpot France (@HubSpot-France) on CodePen.

Modifier la couleur d'arrière-plan du tableau HTML

Comme la ligne en-tête, le tableau HTML tout entier peut être affiché en couleur. Il s'agit ici de changer la couleur de l'arrière-plan, pas celle du texte. À cet effet, il faut attribuer la propriété CSS background-color aux cellules à colorer, en distinguant chaque catégorie de cellule. Par exemple, pour colorer l'arrière-plan des cellules de la ligne en-tête « th » en bleu, appliquer une couleur d'arrière-plan plus claire aux autres cellules « td » et mettre l'arrière-plan du titre « caption » en gris :

See the Pen tableau-html_couleurs by HubSpot France (@HubSpot-France) on CodePen.

Fusionner des cellules, insérer une image dans une cellule ou encore personnaliser la police de texte : maîtriser les langages HTML et CSS permet de paramétrer de manière avancée le tableau et de soigner l'esthétique de son apparence.

Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez l’outil CMS de HubSpot.