Ce cours vous montrera comment créer un tableau en HTML et comment le mettre en forme avec l'aide du CSS.1/ Création (HTML)Pour commencer, voici les balises pour créer votre tableau :
- Balises élémentaires
<table> : créer le tableau
<caption> : légende du tableau (facultatif)
<tr> : créer une ligne du tableau
<th> : créer les cellules d'en-tête du tableau
<td> : créer les cellules du tableau
- Balises complémentaires
<thead> : groupe de cellules d'en-tête
<tbody> : groupe de cellules de corps de tableau
<tfoot> : groupe de cellules de pied de tableau
Ensuite, le code du tableau. Voici un exemple de code HTML d'un tableau (uniquement avec les balises élémentaires).
- Code:
-
<table> <!-- Ouvre le code du tableau. Cette balise englobe toutes les autres (cellules...) -->
<caption>Exemple de tableau</caption> <!-- La légende (Facultatif) -->
<tr> <!-- On créer une ligne au tableau -->
<th>Titre colonne 1</th> <!-- Puis deux cellules d'entêtes (vous pouvez en ajouter d'autres) -->
<th>Titre colonne 2</th>
</tr> <!-- On oublie pas de refermer la balise pour terminer la ligne -->
<tr> <!-- On créer une autre ligne au tableau -->
<td>cellule GAUCHE 1</td> <!-- On créer une cellule dans laquelle on peut placer du texte-->
<td>cellule DROITE 1</td> <!-- On créer une une autre cellule sur la même ligne -->
</tr>
<tr> <!-- On refait d'autres lignes (autant qu'on le souhaite) -->
<td>cellule GAUCHE 2</td>
<td>cellule DROITE 2</td>
</tr>
</table> <!-- Et on oublie pas de terminer le tableau en refermant la balise -->
2/ Mise en forme (CSS)Ouvres ta feuille de style CSS.
Ajoute ces balises CSS :
- Code:
-
/* STYLE DU TABLEAU */
table {
border: medium solid #000000; /* Les bordures */
border-collapse: collapse; /* Pour que les bordures de tour de tableau et de cellules soient confondues */
width: 50%; /* Taille du tableau */
}
/* CELLULES D'ENTÊTES DU TABLEAU */
th {
font-family: Verdana; /* Police du texte */
border: thin solid #6495ed; /* Les bordures */
width: 50%; /* Taille du tableau */
padding: 5px; /* Espacement avec le reste du tableau */
background-color: #888888; /* Couleur du fond des cellules d'entêtes du tableau */
background-image: url(TON IMAGE.jpg); /* Image de fond (facultatif) */
}
/* CELLULES */
td {
font-family: verdana; /* Police du texte */
border: thin solid #6495ed; /* Les bordures */
width: 50%; /* Taille du tableau */
padding: 5px; /* Espacement avec le reste du tableau */
text-align: center; /* Alignement du texte dans le tableau */
background-color: #ffffff; /* Couleur du fond */
}
3/ Centrer le tableau dans la pagePour tous les navigateurs (mises à part les versions antérieures à IE 6), ouvre ta feuille de style CSS et place ceci entre les crochets de la balise
table :
- Code:
-
margin: auto
Voilà =)
Dernières images Rechercher 
