Qu'est-ce qu'un Rowspan?
L'attribut rowspan est une fonctionnalité HTML (Hypertext Markup Language) permettant à une cellule de tableau d'une page Web de s'étendre sur plusieurs lignes. Le HTML est l’un des principaux moyens de créer des pages Web. En règle générale, un navigateur Web décode le code HTML envoyé par un site Web et affiche les résultats sur un écran d'ordinateur dans un format lisible. HTML intègre le concept de table pour organiser le contenu d'une page.
Un tableau a plusieurs lignes et colonnes qui organisent les informations verticalement et horizontalement. Lors de l'affichage d'un tableau HTML, on voudrait souvent qu'un seul élément de contenu soit appliqué ou réparti sur plusieurs lignes. Dans une table, rowspan = N - où N est un nombre tel que 2, 3, etc. - indique que la cellule s'étend sur autant de lignes.
Prenons un exemple où les données sur les ventes sont présentées sous forme de tableau avec trois en-têtes de colonne: la région de vente, la personne qui dirige cette région et le montant des ventes. La région Sud a eu un changement de tête au cours de la période d'enregistrement; les montants respectifs doivent être attribués aux deux personnes. Le code suivant y parvient.
<html>
<table border = "1">
<tr>
<th> Région </ th>
<th> Tête </ th>
<th> Ventes </ th>
</ tr>
<tr>
<td> Est </ td>
<td> Lewis </ td>
<td> 2 100 $ </ td>
</ tr>
<tr> <td rowspan = "2"> Sud </ td> <td> Lilian </ td> <td> 1 180 $ </ td> </ tr>
<tr> <td> Laverne </ td> <td> 1 300 $ </ td> </ tr>
<tr> <td> Ouest </ td> <td> Larnoe </ td> <td> 1 900 $ </ td> </ tr>
</ table>
</ html>
Dans cet exemple, une table est créée. Les en-têtes Région, Responsable et Ventes sont spécifiés, suivis de quatre lignes de données. Chaque cellule de la table est indiquée par l'attribut table data (td). Les données pour le sud s'étendent sur deux lignes. Ainsi, en spécifiant rowspan = 2, le mot sud s'étend sur deux lignes. La ligne suivante ne contient que deux attributs td et non trois comme dans toutes les autres lignes.
On peut copier ce code dans un fichier texte et l’afficher dans un navigateur pour visualiser l’effet. Des espaces vides ont été ajoutés dans ce code pour identifier facilement les chefs des ventes, mais ils ne sont pas nécessaires. Voici un exemple légèrement différent où une personne, Lilian, est dirigée par deux régions: le sud et l’ouest.
<html>
<table border = "1">
<tr> <th> Région </ th> <th> Chef </ th> <th> Ventes </ th> </ tr>
<tr> <td> Est </ td> <td> Lewis </ td> <td> 2 100 $ </ td> </ tr>
<tr> <td> Sud </ td> <td rowspan = "2"> Lilian </ td> <td> $ 2 480 </ td> </ tr>
<tr> <td> Ouest </ td> <td> 1 900 $ </ td> </ tr>
</ table>
</ html>
Une page Web peut ne pas avoir besoin d’afficher des données sous forme de tableau. Il peut comporter un en-tête, tel que le nom et le logo de la société, un ou plusieurs menus en haut ou à côté, les informations principales au milieu, etc. Lors de la création d'une telle page Web, une structure de tableau est souvent utilisée en dessous, sans que le lecteur n'en soit conscient. Pour donner un effet fluide, l’attribut rowspan est utilisé chaque fois que le contenu s’étale sur plusieurs lignes.
Par exemple, vous pouvez créer une page Web personnelle comprenant trois colonnes d’informations: Famille, Carrière et Communauté. Chaque colonne peut avoir une brève introduction, une photo et des détails. Afin d'améliorer l'apparence de la page, une bande de couleur peut être utilisée sur le côté droit. Dans ce cas, la fonction rowspan peut être utilisée pour indiquer que la bande de couleur couvre toutes les lignes.