dimanche 13 avril 2008
Comment habiller un tableau avec un css
Par Benoit, dimanche 13 avril 2008 à 22:40 :: Création de site
Comment habiller un tableau avec un css
Les Différentes balises pour créer un tableau
Les balises de base
<table> : pour créer un tableau
<caption> : légende du tableau ( cette balise est optionnel )
<tr> : pour définir une ligne du tableau
<th> : pour définir une cellules d'en-tête du tableau
<td> : pour definir une 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
En pratique cela donne en html :
<table>
<caption>Tableau de données</caption>
<tr>
<th>Titre colonne 1</th>
<th>Titre colonne 2</th>
</tr>
<tr>
<td>cellule A1</td>
<td>cellule B1</td>
</tr>
<tr>
<td>cellule A2</td>
<td>cellule B2</td>
</tr>
</table>
Et cela donne :
| Titre colonne 1 | Titre colonne 2 |
|---|---|
| cellule A1 | cellule B1 |
| cellule A2 | cellule B2 |
Pour mettre ce tableau en forme, il faut definir une mise en page soit dans un css ou dans le head de la page
dans le css il faut redefinir les attributs du tableau. Exemple :
table {
border-collapse: collapse;
border: 1px solid #a4c7db;
font: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #fff;
background: #151a25;
}
td, th {
color: #fff;
border: 1px solid #a4c7db;
padding: .3em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
Vous trouverez sur ce site des exemples d'habillage de tableaux : http://icant.co.uk/csstablegallery/