Médiaforma

Un sélecteur d’attribut

Print Friendly

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é :

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply