Chapitre 1 : Des tableaux simple
Première balise: <table> </table>. C'est cette balise qui permet d'indiquer le début et
la fin d'un tableau
Cette balise est de type block, il faut la mettre en dehors d'un paragraphe.
Exemple :
Code : HTML*
<p>C'est un paragraphe qui se trouve avant le tableau.</p>
<table>.
<!-- Ici, on mettra le contenu du tableau -->
</table>.
<p>C'est un paragraphe qui se trouve après le tableau.</p>
puis deux importantes nouvelles balises :
* <tr> </tr> : indique le début et la fin d'une ligne du tableau.
* <td> </td> : indique le début et la fin d'une cellule.
En XHTML, on construit le tableau ligne par ligne. Dans chaque ligne (<tr>),
on indique le contenu des différentes cellules (<td>).
Par exemple, si je veux faire un tableau à deux lignes, avec 4 cellules par lignes
(donc 4 colonnes), je devrai taper ceci :
Code : HTML
<table>
<tr>
<td> cahier</td>
<td> 50</td>
<td> 2,50 </td>
<td>125 </td>
</tr>
<tr>
<td> Stylo </td>
<td> 50 </td>
<td> 2 </td>
<td> 100 </td>
</tr>
</table>
Ajouter des bordures, vous connaissez déjà le code CSS qu'il faut écrire !
Code : CSS
td /* Toutes les cellules des tableaux... */
{
border: 1px solid black; /* ... une bordure de 1px */
}
Il existe une propriété CSS spécifique aux tableaux : border-collapse, qui signifie "coller les
bordures entre elles".
Elle peut prendre 2 valeurs :
* collapse : les bordures seront collées entre elles, c'est ce qu'on recherche.
* separate : les bordures seront dissociées (valeur par défaut)
Code : CSS
table
{
border-collapse: collapse; /* Les bordures du tableau seront collées */
}
td
{
border: 1px solid black;
}
La ligne d'en-tête
Maintenant que l'on a ce qu'on veut, on va ajouter la ligne d'en-tête du tableau.
Dans notre exemple, les en-têtes sont "Produit", "prix unitaire en €" , ""et "Total".
La ligne d'en-tête se crée aussi avec un <tr> , mais les cellules à l'intérieur
sont des <th> et non pas des <td> !!!
Code : HTML
<table>
<tr>
<th> Produit </th>
<th> Quantité </th>
<th> Prix unitaire en € </th>
<th>Total </th>
</tr>
<tr>
<td> cahier</td>
<td> 50</td>
<td> 2,50 </td>
<td>125 </td>
</tr>
<tr>
<td> Stylo </td>
<td> 50 </td>
<td> 2 </td>
<td> 100 </td>
</tr>
</table>
Et le code CSS:
td, th /* Mettre une bordure sur les td ET les th */
{
border: 1px solid black;
}
Titre du tableau
Le tableau peut avoir un titre qui renseigne le visiteur sur le contenu du tableau.
La balise <caption> . Cette balise se met au début du tableau. C'est elle qui indique le
titre du tableau :
Code : HTML
<table>
<caption>Liste de produits</caption>
<tr>
<th> Produit </th>
<th> Quantité </th>
<th> Prix unitaire en € </th>
<th>Total </th>
</tr>
<tr>
<td> cahier</td>
<td> 50</td>
<td> 2,50 </td>
<td>125 </td>
</tr>
<tr>
<td> Stylo </td>
<td> 50 </td>
<td> 2 </td>
<td> 100 </td>
</tr>
</table>
Retourner au haut de la page..
|
...Précèdent...