L’Art de la Table

Comme promis, en cette période de fêtes, je vais vous donner quelques trucs pour mettre des tableaux dans vos publications.

Voici un premier tableau, tout simple (ou presque):

X O X
X O O
O X O
  Les instructions pour créer un tableau sont simples:
<table> pour le tableau, puis
<tr> pour une rangée, puis
<td> pour une colonne.
Et on met nos valeurs entre chaque couple <td></td>
Quelques instructions pour aligner les données et c’est parti…

Voici le code pour cette première table:
<table cellspacing="0" cellpadding="2" width="180" border="1">
<tbody>
<tr><td width="60">X</td><td width="60">O</td><td width="60">X</td></tr>
<tr><td>X</td><td>O</td><td>O</td></tr>
<tr><td>O</td><td>X</td><td>O</td></tr>
</tbody></table>

Vous remarquez que chaque données est incluse dans un couple <td></td>, que chaque rangée de données est incluse dans un couple <tr></tr> et que les lignes sont incluses entre les définitions de table, <table></table>. On oublie le <tbody> !
L’instruction <td> peut recevoir des précisions d’alignement et/ou de dimensions grâce aux valeurs suivantes:

  • width="100" pour une largeur de 100 pixels
  • height=20 pour une hauteur de 20 pixels
  • valign="top/center/bottom" pour aligner en haut, au milieu ou en bas de la case
  • ( align="right/center/left" pour aligner à droite, au milieu ou à gauche de la case pour Internet Explorer)
  • Pour aligner horizontalement sur IE ET Firefox, on ajoute une instruction <div align="right/center/left">
  • bgcolor="couleur" pour mettre une couleur en fond
  • bordercolor="couleur" change la couleur du bord dans <table>, <tr> et <td>.

Je les voudrais alignés… où je veux

X
O
X

Allez… encore un effort!

O
X
X
X
O
O
O
X
O

Bon, c’est joli, non ?

Comment ça, à quoi ça sert ? Un tableau sert à présenter des données… comme ça !

Boire avant:
Nbre
Appellation
Année
2057
24
Château Lafitte Rotschild
1957
2010
24
Puisseguin Grande Cuvée
1979
2020
24
Mercurey "Les Côtés"
2004

Quoi, frimeur ? C’est un exemple !
OK, un autre…

Code
Couleur
Code
Couleur
Code
Couleur
Code
Couleur
FFFFFF   FF0000   00FF00   0000FF  
000000   FFFF00   FF00FF   00FFFF  
FF10FF   FF40FF   FF70FF   FFA0FF  

Allez, une petite dernière avec… fusion de cellules. On peut ainsi fusionner des cellules sur une rangée, une colonne, ou mixer les deux…

Floraison de mes orchidées
P1030490_1 P1030491_1 P1030492_1 P1030493_1 P1030494_1 P1030496_1 P1030650_1 P1030651_1
Stade 1 et 2 fleurs
3 fleurs
4 fleurs

Voilà pour les tables, tout ça devrait vous aider à les gérer à un niveau basique. L’avantage de la table est qu’on peut parfaitement maîtriser ses dimensions, mixer les couleurs de fond et de bordures, les alignements. Que du bonheur !
Je souhaite de bonnes fêtes à mes étudiants de chinois 😉

Publicités
Cet article a été publié dans Informatique. Ajoutez ce permalien à vos favoris.

3 commentaires pour L’Art de la Table

  1. Anne-Marie dit :

    bon, déjà que je suis nulle en maths! alors je n’y comprends rien ! frédéric tu es un as!!!

  2. Jean dit :

    Merciiii pour cette expliquation, c’est exactement ce que je cherchais 🙂

  3. mmmmmmmmmmm dit :

    Bonjour Frédéric, Merci pour tes bons conseils et en passant encore Félicitations,tes écrits sont supers. Joyeux Noël et Bonne Année 2009que le bonheur règne dans ton foyer. MickaëlleAnge

Répondre

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l'aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s