Médiaforma

All posts tagged colspan

L’attribut colspan de la balise <td> permet d’étendre une cellule sur plusieurs colonnes. Affectez à cet attribut le nombre de colonnes désiré et le tour est joué. Supposons par exemple que la quatrième cellule doive s’étaler sur deux colonnes. L’attribut colspan est donc initialisé à 2. Nous en profitons pour centrer le contenu de la cellule sur les deux colonnes en ajoutant un attribut align initialisé à center.

De la même manière, l’attribut rowspan de la balise <td> permet d’étendre une cellule sur plusieurs lignes. Tout comme pour colspan, il suffit d’affecter à cet attribut le nombre de lignes désiré et le tour est joué. Supposons par exemple que la première cellule doive s’étaler sur deux lignes. L’attribut rowspan est donc initialisé à 2. Nous en profitons pour centrer le contenu de la cellule sur les deux lignes en ajoutant un attribut valign initialisé à middle.


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Pour en terminer avec les sélecteurs CSS, nous allons nous intéresser aux sélecteurs d’attributs. Rappelez-vous, les attributs sont placés à l’intérieur des balises HTML. Ils précisent les caractéristiques des balises dans lesquelles ils se trouvent.

Dans cet exemple, nous allons modifier la mise en forme des éléments d’un tableau.

Le tableau contient quatre lignes et trois colonnes. Sur la première ligne, les trois cellules sont fusionnées à l’aide de l’attribut colspan. Sur la deuxième ligne, les cellules ne sont pas fusionnées. Sur la troisième ligne, les deux premières lignes sont fusionnées et la troisième cellule est indépendante. Enfin, sur la quatrième ligne, les trois cellules sont fusionnées. Pour bien voir la mise en forme des cellules, l’attribut border est ajouté à la balise <table>.

Exécutons ce code dans Internet Explorer. Le tableau se présente bien comme prévu. Deux de ses lignes ont trois cellules fusionnées et une de ses lignes a deux cellules fusionnées :

Nous allons maintenant ajouter un sélecteur d’attribut pour centrer le texte dans les cellules fusionnées. Pour cela, il suffit de préciser l’attribut entre crochets et de définir la nouvelle mise en forme. Ici, l’attribut à utiliser est colspan et la mise en forme définit le centrage du texte :

Examinons le résultat dans un navigateur. Comme vous pouvez le voir, toutes les cellules fusionnées ont leur contenu centré.

Supposons maintenant que vous ne vouliez centrer que les cellules fusionnées dont l’attribut colspan a pour valeur 3. Ce réglage devrait centrer les lignes 1 et 4 du tableau, mais pas la ligne 3. Pour cela, vous devez préciser la valeur de l’attribut entre les crochets, comme ceci :

Exécutons ce code dans un navigateur. Effectivement, le texte contenu dans la cellule fusionnée de la ligne 3 n’est pas centré. Par contre, celui des lignes 1 et 4 est centré :


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans cette rubrique, je vais vous montrer comment remplacer les zones de saisie des deux exemples précédents par des curseurs. Pour l’instant, ce code ne fonctionne que dans Google Chrome. Voici le résultat que nous cherchons à obtenir :

Dans Firefox et Internet Explorer, les curseurs seront représentés par des zones de texte.

Les portions CSS et JavaScript du document sont identiques à celles de la rubrique précédente. Nous n’y reviendrons pas. Par contre, n’hésitez pas à vous reporter aux rubriques “Alignement avec un tableau” et “Codes couleur en JavaScript” pour avoir des informations complémentaires à leur sujet.

Examinons le code HTML.

<table>

 <tr><td colspan=2><div id="div1"></div></td></tr>

 <tr><td>Rouge</td><td><input id="rouge" min="0" max="255" value="0" onchange="changeCouleur(event)"></td></tr>

 <tr><td>Vert</td><td><input id="vert" min="0" max="255" value="0" onchange="changeCouleur(event)"></td></tr>

 <tr><td>Bleu</td><td><input id="bleu" min="0" max="255" value="0" onchange="changeCouleur(event)"></td></tr>

 <tr><td colspan=2><div id="hexa"></div></td></tr>

</table>

Comme vous pouvez le remarquer, les balises <input> (c’est-à-dire les zones de saisie) ont été remplacées par des balises <input>. Cette simple substitution provoque l’affichage de curseurs dans Google Chrome. Les attributs min et max définissent les valeurs minimale et maximale de chaque curseur : 0 et 255. L’attribut value indique la position du curseur à l’ouverture du document. Cet attribut étant initialisé à 0 pour les trois curseurs, ils seront tous trois positionnés au minimum à l’ouverture de la page. Enfin, pour relier la position de chaque curseur avec la couleur d’arrière-plan de la balise div1, il faut définir une fonction événementielle qui sera exécutée à chaque modification d’un des curseurs. Pour cela, il suffit de capturer l’événement onchange. La fonction exécutée a pour nom changeCouleur(). Son code est quasiment identique à celui utilisé dans les deux rubriques précédentes. Reportez-vous à la rubrique “Codes couleur en JavaScript” pour en savoir plus à son sujet.


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans la vidéo précédente, les zones de saisie n’étaient pas alignées verticalement. Nous allons voir comment améliorer leur mise en page en utilisant un tableau. Tant que nous y sommes, nous allons centrer horizontalement les deux <div> et le bouton dans le tableau pour obtenir quelque chose comme ceci :

Examinons le code HTML.

Comme vous pouvez le voir, les différents éléments affichés dans le document ont été placés dans un tableau comportant deux colonnes. Les deux balises <div> et le bouton de commande occupent deux colonnes dans le tableau. Pour cela, il suffit d’affecter la valeur 2 à l’attribut colspan de ces trois éléments. Par contre, les éléments concernant les composantes Rouge, Vert et Bleu sont répartis sur deux colonnes : à gauche les libellés des couleurs, à droite, les zones de saisie. Remarquez l’utilisation de la propriété CSS text-align pour aligner à gauche les trois zones de saisie.

<table>

<tr><td colspan=2><div id=”div1″></div></td></tr>

<tr><td>Rouge</td><td style=”text-align:left;”><input id=”rouge”> (0 à 255)</td></tr>

<tr><td>Vert</td><td style=”text-align:left;”><input id=”vert”> (0 à 255)</td></tr>

<tr><td>Bleu</td><td style=”text-align:left;”><input id=”bleu”> (0 à 255)</td></tr>

<tr><td colspan=2><div id=”hexa”>Définissez les composantes RVB et cliquez sur le bouton</div></td></tr>

<tr><td colspan=2><input type=”button” value=”Afficher la couleur correspondante”></td></tr>

</table>

Examinons le code CSS.

  • La première balise <div> a pour identifiant div1. Ses caractéristiques sont définies entre les lignes 5 et 12. Les trois premières instructions définissent la couleur et les dimensions de la balise <div>. Quant aux deux dernières instructions, elles provoquent le centrage de la balise dans le tableau.
  • Les lignes 13 à 17 définissent la mise en forme des cellules du tableau. Le texte sera centré dans les cellules et les cellules auront une largeur de 300 pixels.

Le code JavaScript est identique à celui de la rubrique précédente. N’hésitez pas à vous y reporter pour avoir de plus amples renseignements à son sujet.