Fusionner des lignes et des colonnes
Fait partie de la section Fundamentals du Journey HTML de Coddy — leçon 50 sur 60.
En HTML, vous pouvez faire en sorte que les cellules d'un tableau s'étendent sur plusieurs lignes ou colonnes en utilisant les attributs rowspan et colspan. Ces attributs vous permettent de créer des mises en page de tableaux plus complexes en fusionnant des cellules.
L'attribut colspan est utilisé pour spécifier le nombre de colonnes qu'une cellule doit occuper. Il est ajouté à la balise <td> ou <th> de la cellule que vous souhaitez étendre.
Voici un exemple d'utilisation de colspan :
<table border="1">
<tr>
<th colspan="2">Name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>Dans cet exemple, la cellule d'en-tête avec le texte "Name" s'étend sur deux colonnes. Ceci est utile pour créer un en-tête qui couvre plusieurs colonnes. Voici à quoi cela ressemble :
L'attribut rowspan est utilisé pour spécifier le nombre de lignes qu'une cellule doit couvrir. Il est également ajouté à la balise <td> ou <th> de la cellule que vous souhaitez étendre.
Voici un exemple d'utilisation de rowspan :
<table border="1">
<tr>
<th>Employee</th>
<th>Shift</th>
</tr>
<tr>
<td rowspan="2">Alex</td>
<td>Morning</td>
</tr>
<tr>
<td>Evening</td>
</tr>
</table>Ici, rowspan est utilisé pour montrer qu'Alex travaille à la fois pendant les quarts du matin et du soir sans répéter le nom.
Vous pouvez utiliser à la fois colspan et rowspan dans le même tableau pour créer des mises en page complexes. N'oubliez pas d'ajuster le nombre de cellules dans chaque ligne en conséquence pour tenir compte des cellules fusionnées.
Défi
FacileCréez un document HTML qui inclut un tableau avec des cellules s'étendant sur plusieurs lignes et colonnes. Le tableau doit avoir la structure suivante :
- Une balise
<table>pour définir le tableau, avec un attributborderdéfini sur "1" pour la visibilité. - Une ligne de tableau (
<tr>) avec une cellule d'en-tête (<th>) qui s'étend sur deux colonnes et contient le texte "Student Information". - Une autre ligne de tableau (
<tr>) avec une cellule d'en-tête (<th>) qui indique "Name" et une cellule de données (<td>) qui s'étend sur deux lignes et contient le texte "John Doe". - Une autre ligne de tableau (
<tr>) avec une cellule d'en-tête (<th>) qui indique "Age". - Une dernière ligne de tableau (
<tr>) avec une cellule de données (<td>) qui indique "Jane Smith" et une cellule de données (<td>) qui indique "25".
Aide-mémoire
Utilisez colspan pour qu'une cellule s'étende sur plusieurs colonnes :
<th colspan="2">Name</th>Utilisez rowspan pour qu'une cellule s'étende sur plusieurs lignes :
<td rowspan="2">John</td>Exemple de tableau avec les deux attributs d'étendue :
<table border="1">
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Exams</th>
</tr>
<tr>
<th>Math</th>
<th>Science</th>
</tr>
<tr>
<td>Kim</td>
<td>A</td>
<td>B+</td>
</tr>
</table>Essayez vous-même
<!DOCTYPE html>
<html>
<body>
<table border="1">
<!-- Écrivez le code ici -->
</table>
</body>
</html>
Testez-vousCette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.
Toutes les leçons de Fundamentals
1Les bases du HTML
Qu'est-ce que le HTML ?Structure de base du HTMLBalises et élémentsImbrication et fermeture des balisesCommentaires en HTML7Page de profil personnel
Présentation du projetSection d'en-tête
Photo de profilSection À propos de moiLiens sociaux10Tableaux
Bases des tableauxAjouter des légendesFusionner des lignes et des colonnesRécapitulatif - Tableaux2Texte et mise en forme
TitresParagraphesSauts de ligneTexte en gras et italiqueGras et italique (suite)Récapitulatif - Mise en forme8Formulaires et champs de saisie, partie 1
Bases des formulairesChamps de texteAttributs des champsChamp de mot de passeLibellés pour les champsRécapitulatif - Formulaire de base11Page d'inscription à un événement
Aperçu du projetSection d'en-têteSection des détails de l'événementFormulaire d'inscriptionSection de pied de page3Travailler avec les listes
Liste non ordonnéeListe ordonnéeListes imbriquéesRécapitulatif - Les listes6Mise en page
DivisionsSpans en ligneBalises sémantiquesSections et articlesRécapitulatif - Mise en page