WikiBtsSio
LeCodeHtmlLesTableauxMe
PagePrincipale ::
DerniersChangements :: DerniersCommentaires :: ParametresUtilisateur ::
Vous êtes ec2-18-119-142-113.us-east-2.compute.amazonaws.com
Les tableaux en HTML
On peut ici se poser la question de mettre une image en fond d'un tableau (d'une case) ainsi que de mettre une image en fond d'une page HTML.
On cherchera un tag à mettre dans le tag body
On peut insérer une image ou une couleur !
Dans l'exemple qui suit l'image est dans la case mais pas en fond ... comment faire pour qu'elle soit en fond de la case ?
Comment obtenir ce premier tableau ?
| Ligne 1 colonne 1 | Ligne 1 colonne 2 | Ligne 1 colonne 3 |
| Ligne 2 colonne 1 | Ligne 2 colonne 2 | Ligne 2 colonne 3 |
| Ligne 3 colonne 1 | Ligne 3 colonne 2 |  - Ligne 3 colonne 3 |
Il vous faut utiliser ce code html :
<table border=1 BGCOLOR="#ccffaa"> <tr> <td>Ligne 1 colonne 1</td> <td>Ligne 1 colonne 2</td> <td>Ligne 1 colonne 3</td> </tr> <tr> <td BGCOLOR="#cca0aa">Ligne 2 colonne 1</td> <td>Ligne 2 colonne 2</td> <td>Ligne 2 colonne 3</td> </tr> <tr> <td>Ligne 3 colonne 1</td> <td>Ligne 3 colonne 2</td> <td><IMG SRC="../fichiers/logo/rosace.JPG" width="10%"> - Ligne 3 colonne 3</td> </tr> </table>
Supprimer border=1 et vous ne verrez plus les bords du tableau.
Alignement Horizontal et Alignement Vertical
• <td align=left> aligne tous les éléments sur le coté gauche de la cellule (c'est l'option par défaut)
• <td align=right> aligne tous les éléments sur le coté droit de la cellule
• <td align=center> centre tous les éléments dans la cellule
• <td valign=top> aligne tous les éléments en haut de la cellule
• <td valign=bottom> aligne tous les éléments en bas de la cellule
• <td valign=middle> aligne tous les éléments au milieu de la cellule (c'est l'option par défaut)
Testez ...
Vous pouvez combiner ces attributs :
- <td align=left valign=bottom>
Recherchez comment obtenir ce tableau ...
| Ligne 1 colonne 1 | Ligne 1 colonnes 2-3 | |
| Ligne 2 colonne 1 | Ligne 2 colonne 2 | Ligne 2 colonne 3 |
| Ligne 3 colonne 1 | Ligne 3 colonne 2 | Ligne 3 colonne 3 |
Puis enfin celui-ci
| Ligne 1 colonne 1 | Ligne 1 colonnes 2-3 | |
| Ligne 2 colonne 1 | Ligne 2 colonne 2 | Ligne 2 colonne 3 |
| Ligne 3 colonne 1 | Ligne 3 colonne 3 | |
Vous pouvez réaliser ce tableau ?
| Eruption | Date | Volume en km3 |
|---|---|---|
| Paricutin, Mexique | 1943 | 1.3 |
| Mt. Vésuve, Italie | 79 av. J.C. | 3 |
| Mont St.Helens, Washington | 1980 | 4 |
| Krakatoa, Indonésie | 1883 | 18 |
| Long Valley, Californie | préhistorique | > 450 & < 700 |
| Yellowstone, Wyoming | préhistorique | 400 |
NOTE : Les tags <th> ... </th> fonctionnent exactement comme les tags <td> ... </td>, excepté le fait que le texte est automatiquement gras et tous les éléments centrés.
Il n'y a pas de commentaire sur cette page.
[Afficher commentaires/formulaire]