Cette activité vous permettra d'apprendre à fusionner les cellules d'un tableau.
Le fusionnement de cellules permet de mieux gérer la présentation graphique des élèments d'une page web.
Affichez votre portfolio et ajoutez une page à votre portfolio (bouton 6) en affichant l'assistant HTML ainsi que la directive 1178
Complétez les champs suivants :
- Titre : Fusionnement de cellules
- Matière: Informatique
- No de la directive : 1178
Sélectionnez dans la boîte à liste déroulante "SECTION", "Module 01 : HTML".
Cliquez le bouton de votre barre de boutons.
Insérez dans votre page le texte suivant "Fusionnement de cellules" au niveau Titre de niveau 1
Votre tâche sera de reproduire en utilisant les balises de tableau les trois tableaux ci-dessous:
AIDE:
Pour ce drapeau, la première rangée est composée de trois cellules dont une rouge fusionnée vers le bas.
La deuxième rangée est composée d'une seule cellule fusionnée vers la droite.
La troisième rangée est composée de deux cellules non fusionnées.
Pour le tableau 3, vous devez OBLIGATOIREMENT utilisé des COULEURS DE VOTRE CHOIX.
Produisez le tableau # 1 en utilisant la balise de tableau suivante :
<table></table>
Insérez le paramètre de style de bordure à ce tableau afin d'utiliser une bordure gris de 1 pixel :
<table style="border:1px solid gray;" >
Produisez entre la balise de début de tableau et la balise de fin de tableau la première rangée :
<tr></tr>
Produisez pour cette rangée, entre la balise de début de rangée TR et la balise de fin de rangée /TR, chacune des cellules, une à la fois en indiquant pour chacune d'elles les paramètres de style suivants : hauteur, largeur,couleur de fond et les paramètres de fusionnement COLSPAN (fusionnement vers la droite) ou ROWSPAN (fusionnement vers le bas) au besoin.
Notez que vous devez utiliser ce code en exemple pour chacune de vos cellules:
Répétez les étapes précédentes pour chacune des rangées de votre tableau.
SI VOUS AVEZ UTILISÉ LA MÉTHODE 1, ALLEZ DIRECTEMENT AU POINT 6 CI-DESSOUS ET REPRODUISEZ EN UTILISANT LA MÊME MÉTHODE LE TABLEAU 2.
ou
MÉTHODE 2 - Suivre la procédure décrite ci-dessous.
Rappel :
La balise TABLE signifie : début d'un tableau
La balise TR signifie : début d'une rangée (de l'anglais : Table Row)
La balise TD signifie : début d'une cellule (case) (de l'anglais : Table DATA)
La balise /TD signifie : fin d'une cellule
La balise /TR signifie : fin d'une rangée
La balise /TABLE signifie : fin d'un tableau
Afin d'insérer un contenu texte ou image dans une cellule, il faut placer ce contenu entre les balises TD et /TD
IMPORTANT: Lisez bien les indices suivants qui vous guideront vers la réussite de cette activité.
CRÉATION DU TABLEAU 1
Insérez un tableau de 2 rangées et 4 colonnes en utilisant le bouton "TABLEAU".
Utilisez une bordure de taille 2, fond de couleur de votre choix, couleur de bordure de votre choix et une largeur de 200
AJOUTER DES PARAMÈTRES DE STYLE À CHACUNE DES CELLULES
Utilisez les paramètres de style de hauteur et largeur de cellules ayant comme valeur 50 et de fond de couleur dans chacune des balises TD
exemple pour une cellule non fusionnée : <td style="height:50px;width:50px;background-color:red;" ></td>
exemple pour une cellule fusionnée vers la droite: <td colspan=2 style="height:50px;width:50px;background-color:red;" ></td>
exemple pour une cellule fusionnée vers le bas : <td rowspan=2 style="height:50px;width:50px;background-color:red;" ></td>
FUSION DES CELLULES DE LA COLONNE 1
- Afin de fusionner les cellules 1 des deux rangées du tableau, supprimez la cellule 1 de la rangée 2.
- Ajoutez ensuite le paramètre ROWSPAN=2 dans la cellule 1 de la rangée 1.
Ce paramètre indique que la cellule devra occuper une étendue équivalente à deux cellules vers le bas.
Exemple : <td rowspan=2 ></td>
FUSION DES CELLULES 2 et 3 DE LA RANGÉE 1
Afin de fusionner les cellules 2 et 3 de la rangée 1,
vous devez :
1) utilisez le paramètre de cellule COLSPAN ( ayant comme valeur 2) dans la cellule 2 de la rangée 1
Exemple : <td colspan=2 ></td>
Ce paramètre indique que la cellule devra occuper une étendue équivalente à deux cellules vers la droite.
et
2) supprimez ensuite la cellule 3 de la rangée 1
En utilisant les connaissances acquises dans cette activité, reproduit maintenant en utilisant les balises de tableau (ainsi que les paramètres height width colspan et/ou rowspan) le drapeau suivant :
N'oubliez pas d'ajouter une bordure grise de 1 pixel à votre tableau, exemple:
<table style="border:1px solid gray;">
Pistes de solution:
- Identifier le nombre de rangées et de colonnes requises
- Identifier pour chacune des cellules les paramètres requis (background-color, height, width, colspan, rowspan)
- Essayez, validez et recommencez au besoin... Bonne chance!
Pistes de solution plus détaillées:
Tu dois :
- produire un tableau 3 rangées 3 colonnes
- régler en utilisant le paramètre de style HEIGHT la hauteur de chacune des rangées (balise TR)
- régler en utilisant le paramètre de style WIDTH la largeur de chacune des colonnes (balise TD)
- régler en utilisant le paramètre de style BACKGROUND-COLOR la couleur de chacune des cellules
- régler ensuite en utilisant les paramètres COLSPAN et ROWSPAN le fusionnement des cellules
- supprimer les cellules en trop!
Pistes de solution encore plus détaillées:
- tu dois produire un tableau 3 x 3
- ensuite placer les paramètres de style HEIGHT WIDTH et BACKGROUND-COLOR dans chacune des cellules
- ensuite dans la cellule 2 de la rangée 1 placer le paramètre ROWSPAN pour étirer cette cellule vers le bas
- ensuite dans la cellule 1 de la rangée 2 placer le paramètre COLSPAN pour étirer cette cellule vers la droite
- ensuite supprimer les cellules en trop, couvertes par les cellules qui possèdent les paramètres ROWSPAN et COLSPAN
Reproduis maintenant en utilisant les balises de tableau en utilisant les paramètres COLSPAN et/ou ROWSPAN et les paramètres de style hauteur, largeur, couleur de fond et bordure le tableau suivant : .
Pistes suggérées :
Pour le tableau 3, il faut faire une rangée à la fois
Première rangée =
1 seule cellule fusionnée à droite de 3 unités
Deuxième rangée =
deux cellules non fusionnées
et
une cellule fusionnée vers la bas de 2 unités
Troisième rangée
une cellule non fusionnée
et
une cellule fusionnée vers la bas de 2 unités
Quatrième rangée
deux cellules non fusionnées
de votre barre de boutons.
