CSS > Les tables

Les feuilles de style CSS permettent de rendre beaucoup plus "sexy" les tableaux de données.

Exercice : Transformer le tableau brut suivant...

Nom du projet	Budget
Site Internet	10 000 €
Application IPhone	14 000 €
Application Androïd	12 000 €
Documentation	10 000 €

... pour obtenir :

Nom du projet	Budget
Site Internet	10 000 €
Application IPhone	14 000 €
Application Androïd	12 000 €
Documentation	10 000 €

Astuce : l'instruction css "border-collapse:collapse;" sur un élément de type "table" permet de fusionner des bordures voisines en une seule.

Place à la pratique :

Exemple : Tableau à styler


<style type="text/css">
#tab {

}
</style>

<table id="tab">
<tr>
  <th>Nom du projet</th>
  <th>Budget</th>
</tr>
<tr>
  <td>Site Internet</td>
  <td>10 000 €</td>
</tr>
<tr>
  <td>Application IPhone</td>
  <td>14 000 €</td>
</tr>
<tr>
  <td>Application Androïd</td>
  <td>12 000 €</td>
</tr>
<tr>
  <td>Documentation</td>
  <td>10 000 €</td>
</tr>
</table>

THIS CONTENT WILL BE REPLACED BY INTERPRETED HTML TAPED IN THE "code" TEXTAREA

Correction