Médiaforma

All posts tagged tableau

Pour insérer un tableau dans un e-mail, sélectionnez l’onglet Insertion dans le ruban, puis cliquez sur l’icône Tableau dans le groupe Tableaux. Utilisez la souris pour choisir le nombre de lignes et de colonnes du tableau, puis cliquez pour l’insérer dans le message.

Deux nouveaux onglets nommés Outils de tableau/Création et Outils de tableau/Disposition sont ajoutés au ruban. Pour mettre en forme le tableau, le plus simple consiste à sélectionner l’onglet Outils de tableau/Création et à faire votre choix dans la galerie Styles de tableau. Vous pouvez ensuite affiner la mise en forme en utilisant les commandes disponibles dans le groupe Options de style de tableau.

Maintenant, il ne vous reste plus qu’à insérer des données dans le tableau.


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

Que diriez-vous d’utiliser une image en arrière-plan des cellules d’un tableau ?

Il n’y a rien de compliqué là-dedans : utilisez simplement l’attribut background à la place de l’attribut bgcolor et indiquez le nom de l’image GIF, JPG ou PNG à utiliser. Ici par exemple, nous utilisons l’image miniature.jpg, qui se trouve dans le même dossier que le code HTML.

Afin de mettre en évidence la répétition de l’arrière-plan, la première cellule a été redimensionnée à 300×200 pixels. La cellule suivante aura la même hauteur. Sur la deuxième ligne du tableau, la hauteur de la première cellule a été fixée à 200 pixels. Cette hauteur sera également celle de la deuxième cellule.

L’image utilisée en arrière-plan est de petites dimensions : 100 x 75 pixels. Comme vous le voyez, elle se duplique autant de fois que nécessaire pour couvrir toute la surface du tableau.


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

L’attribut bgcolor de la balise table permet de définir une couleur d’arrière-plan pour toutes les cellules d’un tableau. La couleur peut être spécifiée par son nom ou par un code hexadécimal.

Les seize couleurs de base sont les suivantes : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white et yellow. Vous pouvez également utiliser les noms de couleurs étendues. Consultez la page https://www.mediaforma.com/couleurs-html-etendues/ pour en savoir plus.

Ici par exemple, les cellules ont une couleur d’arrière-plan CornflowerBlue :

La couleur d’arrière-plan peut également être spécifiée par son code hexadécimal. Pour trouver facilement la couleur de vos rêves, le plus simple consiste à utiliser un nuancier. Par exemple, celui proposé sur la page http://www.code-couleur.com/. Déplacez le curseur vertical pour choisir une couleur dominante puis le sélecteur pour ajuster les quantités de blanc et de noir. Vous obtenez immédiatement la couleur hexadécimale correspondante.

Copiez-collez le code hexadécimal de la couleur dans le code et affichez le résultat dans votre navigateur.


Pour définir l’espacement entre les cellules, vous allez utiliser la propriété CSS border-spacing de l’attribut <table>. Dans cet exemple, le code CSS est directement inséré dans la balise <table> via l’attribut style. L’espacement entre les cellules est fixé à 10 pixels :

Nous fixons maintenant l’espacement  à 30 pixels. Comme vous pouvez le voir, les cellules sont biens plus espacées les unes des autres.


La balise <th> </th> permet d’ajouter un titre dans un tableau. Il suffit de l’insérer juste après la balise <table>. Le titre est automatiquement affiché en caractères gras. Dans cet exemple, le tableau comporte trois colonnes. Si on se contente d’insérer la balise <th>, elle occupe une colonne. Dans cet exemple, le texte est le plus long de la colonne. La taille de la première colonne est donc ajustée en conséquence :

L’effet obtenu n’est pas très heureux. Nous allons étendre la cellule de titre sur trois colonnes pour qu’elle s’étale sur toute la longueur du tableau et centrer le contenu à l’aide de l’attribut align. Le résultat est bien meilleur.


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.


L’attribut HTML align permet d’aligner horizontalement les données dans les cellules. Il peut être initialisé avec les valeurs suivantes :

  • left : alignement à gauche ;
  • center : alignement centré ;
  • right : alignement à droite.

L’attribut HTML valign permet d’aligner verticalement les données dans les cellules. Il peut être initialisé avec les valeurs suivantes :

  • top : alignement dans la partie supérieure de la cellule ;
  • middle : alignement dans la partie centrale de la cellule ;
  • bottom : alignement dans la partie inférieure de la cellule.

Nous allons utiliser ces six valeurs sur les six cellules d’un tableau dont les cellules ont une largeur fixée à 200 pixels.

La première cellule est alignée à gauche, la deuxième est centrée et la troisième alignée à droite.

En insérant une balise <p> dans la quatrième cellule, elle contient deux lignes. L’attribut valign aligne la quatrième cellule dans la partie supérieure, la cinquième dans la partie centrale et la sixième dans la partie inférieure.