Médiaforma

Alignement avec un tableau

Print Friendly

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.

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

No comments yet.

Leave a Reply