Formater des tableaux en CSS : Exercice n°1

Comment placer un tableau entier dans du HTML

Appliquer la formule suivante :

table>tr*4>td*4>{cellule $}

puis touche TAB

Résultat

Exercice n°1 pour intégrer du CSS dans des tableaux

La feuille de style CSS intégrée dans le HTML pour formater les tableaux
Tableau formaté en CSS avec l’ajout de « class » dans les colonnes
Dernier tableau formaté en CSS  : ajout d’une couleur (background-color) et formatage des largeurs (width)

Tableau avec une prédéfinition des colonnes :

<table>
<col class= « col1 »>
<col class= « col2 »>
<tbody>
<tr>
<td>Cellule 1.1</td>
<td>Cellule 1.2</td>
</tr>
<tr>
<td>Cellule 2.1</td>
<td>Cellule 2.2</td>
</tr>
</tbody>
</table>

Style CSS :

.col1 {
       background-color: #99ff99;
       width: 10em;
}

.col2 {
       background-color: #9999ff;
       width: 20em;
}