020 Tableau
Tableau sans fusion
| Cellule 1.1 | Cellule 1.2 | Cellule 1.3 | Cellule 1.4 |
| Cellule 2.1 | Cellule 2.2 | Cellule 2.3 | Cellule 2.4 |
| Cellule 3.1 | Cellule 3.2 | Cellule 3.3 | Cellule 3.4 |
| Cellule 4.1 | Cellule 4.2 | Cellule 4.3 | Cellule 4.4 |
Tableau 1
| Cellule 1.1 | Cellule 1.3 | Cellule 1.4 |
| Cellule 2.3 |
| Cellule 3.1 | Cellule 3.3 |
| Cellule 4.1 | Cellule 4.2 |
Tableau 2
| Cellule 1.1 | Cellule 1.3 | Cellule 1.4 |
| Cellule 2.1 | Cellule 2.2 | Cellule 2.4 |
| Cellule 3.4 |
| Cellule 4.2 | Cellule 4.3 |
Tableau 3
| Cellule 1.1 | Cellule 1.3 | Cellule 1.4 |
| Cellule 2.1 | Cellule 2.2 | Cellule 2.4 |
| Cellule 3.1 | Cellule 3.2 | Cellule 3.3 |
| Cellule 4.1 | Cellule 4.3 |
Tableau 4
| Cellule 1.1 | Cellule 1.4 |
| Cellule 2.4 |
| Cellule 3.4 |
| Cellule 4.1 | Cellule 4.2 | Cellule 4.3 | Cellule 4.4 |
Tableau 5
| Cellule 1.1 | Cellule 1.2 | Cellule 1.3 |
| Cellule 2.1 | Cellule 2.2 | Cellule 2.4 |
| Cellule 3.1 |
| Cellule 4.1 | Cellule 4.3 | Cellule 4.4 |
Tableau 6
| Cellule 1.1 | Cellule 1.3 |
| Cellule 2.1 | Cellule 2.2 | Cellule 2.4 |
| Cellule 3.1 | Cellule 3.3 |
| Cellule 4.1 | Cellule 4.2 | Cellule 4.4 |
Tableau 7
| Cellule 1.1 | Cellule 1.3 |
| Cellule 2.1 | Cellule 2.2 | Cellule 2.4 |
| Cellule 3.2 | Cellule 3.3 |
| Cellule 4.1 | Cellule 4.3 | Cellule 4.4 |
Ce qui donne en code :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<style>
table {
border: 1px solid #ccc;
border-collapse: collapse;
}
td {
border: 1px solid #ccc;
padding: .1em .5em;
}
</style>
<title>020 tableau</title>
</head>
<body>
<h1>020 Tableau</h1>
<h2>Tableau sans fusion</h2>
<table>
<tr>
<td>Cellule 1.1</td>
<td>Cellule 1.2</td>
<td>Cellule 1.3</td>
<td>Cellule 1.4</td>
</tr>
<tr>
<td>Cellule 2.1</td>
<td>Cellule 2.2</td>
<td>Cellule 2.3</td>
<td>Cellule 2.4</td>
</tr>
<tr>
<td>Cellule 3.1</td>
<td>Cellule 3.2</td>
<td>Cellule 3.3</td>
<td>Cellule 3.4</td>
</tr>
<tr>
<td>Cellule 4.1</td>
<td>Cellule 4.2</td>
<td>Cellule 4.3</td>
<td>Cellule 4.4</td>
</tr>
</table>
<h2>Tableau 1</h2>
<table>
<tr>
<td colspan="2" rowspan="2">Cellule 1.1</td>
<td>Cellule 1.3</td>
<td>Cellule 1.4</td>
</tr>
<tr>
<td colspan="2">Cellule 2.3</td>
</tr>
<tr>
<td colspan="2">Cellule 3.1</td>
<td colspan="2" rowspan="2">Cellule 3.3</td>
</tr>
<tr>
<td>Cellule 4.1</td>
<td>Cellule 4.2</td>
</tr>
</table>
<h2>Tableau 2</h2>
<table>
<tr>
<td colspan="2">Cellule 1.1</td>
<td>Cellule 1.3</td>
<td>Cellule 1.4</td>
</tr>
<tr>
<td rowspan="3">Cellule 2.1</td>
<td colspan="2" rowspan="2">Cellule 2.2</td>
<td>Cellule 2.4</td>
</tr>
<tr>
<td>Cellule 3.4</td>
</tr>
<tr>
<td>Cellule 4.2</td>
<td colspan="2">Cellule 4.3</td>
</tr>
</table>
<h2>Tableau 3</h2>
<table>
<tr>
<td colspan="2">Cellule 1.1</td>
<td>Cellule 1.3</td>
<td>Cellule 1.4</td>
</tr>
<tr>
<td>Cellule 2.1</td>
<td colspan="2">Cellule 2.2</td>
<td>Cellule 2.4</td>
</tr>
<tr>
<td>Cellule 3.1</td>
<td>Cellule 3.2</td>
<td colspan="2">Cellule 3.3</td>
</tr>
<tr>
<td colspan="2">Cellule 4.1</td>
<td colspan="2">Cellule 4.3</td>
</tr>
</table>
<h2>Tableau 4</h2>
<table>
<tr>
<td colspan="3" rowspan="3">Cellule 1.1</td>
<td>Cellule 1.4</td>
</tr>
<tr>
<td>Cellule 2.4</td>
</tr>
<tr>
<td>Cellule 3.4</td>
</tr>
<tr>
<td>Cellule 4.1</td>
<td>Cellule 4.2</td>
<td>Cellule 4.3</td>
<td>Cellule 4.4</td>
</tr>
</table>
<h1>Tableau 5</h1>
<table>
<tr>
<td>Cellule 1.1</td>
<td>Cellule 1.2</td>
<td colspan="2">Cellule 1.3</td>
</tr>
<tr>
<td>Cellule 2.1</td>
<td colspan="2" rowspan="2">Cellule 2.2</td>
<td rowspan="2">Cellule 2.4</td>
</tr>
<tr>
<td>Cellule 3.1</td>
</tr>
<tr>
<td colspan="2">Cellule 4.1</td>
<td>Cellule 4.3</td>
<td>Cellule 4.4</td>
</tr>
</table>
<h2>Tableau 6</h2>
<table>
<tr>
<td colspan="2">Cellule 1.1</td>
<td colspan="2">Cellule 1.3</td>
</tr>
<tr>
<td>Cellule 2.1</td>
<td colspan="2">Cellule 2.2</td>
<td>Cellule 2.4</td>
</tr>
<tr>
<td colspan="2">Cellule 3.1</td>
<td colspan="2">Cellule 3.3</td>
</tr>
<tr>
<td>Cellule 4.1</td>
<td colspan="2">Cellule 4.2</td>
<td>Cellule 4.4</td>
</tr>
</table>
<h2>Tableau 7</h2>
<table>
<tr>
<td colspan="2">Cellule 1.1</td>
<td colspan="2">Cellule 1.3</td>
</tr>
<tr>
<td rowspan="2">Cellule 2.1</td>
<td colspan="2">Cellule 2.2</td>
<td>Cellule 2.4</td>
</tr>
<tr>
<td rowspan="2">Cellule 3.2</td>
<td colspan="2">Cellule 3.3</td>
</tr>
<tr>
<td>Cellule 4.1</td>
<td>Cellule 4.3</td>
<td>Cellule 4.4</td>
</tr>
</table>
</body>
</html>
Et encore :
030 Tableaux
Tableau minimal
| cellule 1.1 | cellule 2.2 |
| cellule 1.1 | cellule 2.2 |
Tableau avec cellule d’entête
| cellule 1 | cellule 1.1 | cellule 1.2 |
|---|
| cellule 2 | cellule 2.1 | cellule 2.2 |
|---|
Tableau divisé en section
| Entete colonne 1 | Entete colonne 2 |
|---|
| Pied colonne 1 | Pied colonne 2 |
| cellule 1.1 | cellule 1.2 |
| cellule 2.1 | cellule 2.2 |
Tableau avec légende
Le titre de mon tableau| cellule 1.1 | cellule 2.2 |
| cellule 1.1 | cellule 2.2 |
Tableau avec une prédéfinition des colonnes
| cellule 1.1 | cellule 1.2 |
| cellule 2.1 | cellule 2.2 |
Tableau avec cellules fusionnées
Sans fusion
| cellule 1.1 | cellule 1.2 | cellule 1.3 |
| cellule 2.1 | cellule 2.2 | cellule 2.3 |
| cellule 3.1 | cellule 3.2 | cellule 3.3 |
Fusion de colonnes
| cellule 1.1 | cellule 1.3 |
| cellule 2.1 |
| cellule 3.1 | cellule 3.2 | cellule 3.3 |
Fusion de rangées
| cellule 1.1 | cellule 1.2 | cellule 1.3 |
| cellule 2.2 | cellule 2.3 |
| cellule 3.1 | cellule 3.2 | cellule 3.3 |
Fusion simultanée sur colonnes et les rangées
| cellule 1.1 | cellule 1.3 |
| cellule 2.3 |
| cellule 3.1 | cellule 3.2 | cellule 3.3 |
Le code :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>030 Tableaux</title>
<!-- <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,400,400i,900,900i&subset=latin-ext" rel="stylesheet">-->
<style>
table {
border: 1px solid #ccc;
border-collapse: collapse;
}
td {
border: 1px solid #ccc;
padding: .1em .5em;
}
th {
border: 1px solid #ccc;
padding: .1em .5em;
}
thead, tfoot {
font-weight: bold;
}
caption {
caption-side: bottom;
height:auto;
}
.col1{
background-color: #76f076;
width: 12em;
}
.col2{
background-color: rgb(170, 155, 247);
width: 20em;
}
</style>
</head>
<body>
<h1>030 Tableaux</h1>
<h2>Tableau minimal</h2>
<table>
<tr>
<td>cellule 1.1</td>
<td>cellule 2.2</td>
</tr>
<tr>
<td>cellule 1.1</td>
<td>cellule 2.2</td>
</tr>
</table>
<h2>Tableau avec cellule d'entête</h2>
<table>
<tr>
<th>cellule 1</th>
<td>cellule 1.1</td>
<td>cellule 1.2</td>
</tr>
<tr>
<th>cellule 2</th>
<td>cellule 2.1</td>
<td>cellule 2.2</td>
</tr>
</table>
<h2>Tableau divisé en section</h2>
<table>
<thead>
<tr>
<th>Entete colonne 1</th>
<th>Entete colonne 2</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Pied colonne 1</td>
<td>Pied colonne 2</td>
</tr>
</tfoot>
<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>
<h2>Tableau avec légende</h2>
<table>
<caption>Le titre de mon tableau</caption>
<!-- dans le head créer un style:
caption {
caption-side: bottom;
height:auto;
} -->
<tr>
<td>cellule 1.1</td>
<td>cellule 2.2</td>
</tr>
<tr>
<td>cellule 1.1</td>
<td>cellule 2.2</td>
</tr>
</table>
<h2>Tableau avec une prédéfinition des colonnes</h2>
<table>
<col class="col1">
<col class="col2">
<!-- dans le head créer un style:
.col1{
background-color: #76f076;
width: 12em;
}
.col2{
background-color: rgb(170, 155, 247);
width: 20em;
}
-->
<tr>
<td>cellule 1.1</td>
<td>cellule 1.2</td>
</tr>
<tr>
<td>cellule 2.1</td>
<td>cellule 2.2</td>
</tr>
</table>
<h1>Tableau avec cellules fusionnées</h1>
<h2>Sans fusion</h2>
<table>
<tr>
<td>cellule 1.1</td>
<td>cellule 1.2</td>
<td>cellule 1.3</td>
</tr>
<tr>
<td>cellule 2.1</td>
<td>cellule 2.2</td>
<td>cellule 2.3</td>
</tr>
<tr>
<td>cellule 3.1</td>
<td>cellule 3.2</td>
<td>cellule 3.3</td>
</tr>
</table>
<h2>Fusion de colonnes</h2>
<table>
<tr>
<td colspan="2">cellule 1.1</td>
<td>cellule 1.3</td>
</tr>
<tr>
<td colspan="3">cellule 2.1</td>
</tr>
<tr>
<td>cellule 3.1</td>
<td>cellule 3.2</td>
<td>cellule 3.3</td>
</tr>
</table>
<h2>Fusion de rangées</h2>
<table>
<tr>
<td rowspan="2">cellule 1.1</td>
<td>cellule 1.2</td>
<td>cellule 1.3</td>
</tr>
<tr>
<td>cellule 2.2</td>
<td>cellule 2.3</td>
</tr>
<tr>
<td>cellule 3.1</td>
<td>cellule 3.2</td>
<td>cellule 3.3</td>
</tr>
</table>
<h2>Fusion simultanée sur colonnes et les rangées</h2>
<table>
<tr>
<td colspan="2" rowspan="2">cellule 1.1</td>
<td>cellule 1.3</td>
</tr>
<tr>
<td>cellule 2.3</td>
</tr>
<tr>
<td>cellule 3.1</td>
<td>cellule 3.2</td>
<td>cellule 3.3</td>
</tr>
</table>
</body>
</html>
Nous continuons d’avancer et compliquons la tache.
Tableau avancée
Architecture de Windows NT| services système |
|---|
| Matériel |
| Gestionnaire d’E/S | Gestionnaire d’objets | Moniteur de références de sécurité | Gestionnaire de processus | Gestionnaire de mémoire virtuelle | Appel de procédures locales | Gestionnaire de fenêtres |
|
| Micronoyau | GDI |
| Couche d’abstraction matérielle | |
Le code :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<style>
table{
width: 100%;
text-align: center;
font-family: sans-serif;
font-size: 0.8em;
border-collapse: collapse;
height: 120px;
}
thead{
background-color: red;
color: yellow;
}
tfoot{
background-color: gainsboro;
}
tbody{
}
.es{
background-color: #d3cd81;
}
.objet{
background-color: darkorange;
}
.proc{
background-color: #efa852;
}
.noyau{
background-color: cornflowerblue;
}
.gdi{
background-color: #705fcb;
}
.couche{
background-color:#ffc9a8;
}
td{
width: 14%;
}
th{
width: 14%;
}
</style>
<title>060_tableau</title>
</head>
<body>
<h1>Tableau avancée</h1>
<table>
<caption>Architecture de Windows NT</caption>
<thead>
<tr>
<th colspan="7">services système</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="7">Matériel</td>
</tr>
</tfoot>
<tbody>
<tr>
<td class="es" rowspan="4">Gestionnaire d'E/S</td>
<td class="objet" rowspan="2">Gestionnaire d'objets</td>
<td rowspan="2">Moniteur de références de sécurité</td>
<td class="proc" rowspan="2">Gestionnaire de processus</td>
<td rowspan="2">Gestionnaire de mémoire virtuelle</td>
<td class="proc" rowspan="2">Appel de procédures locales</td>
<td rowspan="2">Gestionnaire de fenêtres</td>
</tr>
<tr>
</tr>
<tr>
<td class="noyau" colspan="5">Micronoyau</td>
<td class="gdi" rowspan="2">GDI</td>
</tr>
<tr>
<td class="couche" colspan="4">Couche d'abstraction matérielle</td>
<td class="noyau"></td>
</tr>
</tbody>
</table>
</body>
</html>
Plus dur:
Ici nous ne le voyons pas, mais l’œil clignote et est relié à un lien.
Le code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
table {
border-collapse: collapse;
}
a img {
border:none;
}
td {
padding: 0;
}
#ta img {
display: block;
}
#ta a:focus{
outline:none;
}
</style>
<title>joconde</title>
</head>
<body>
<h1>Joconde</h1>
<table id="ta">
<tr>
<td colspan="3"><img src="sources_hd/joconde_01.jpg" alt=""></td>
</tr>
<tr id="r2">
<td><img src="sources_hd/joconde_02.jpg" alt=""></td>
<td><a href="https://fr.wikipedia.org/wiki/La_Joconde" title="la joconde" target="_blank"><img src="sources_hd/joconde_03.gif" alt=""></a></td>
<td><img src="sources_hd/joconde_04.jpg" alt=""></td>
</tr>
<tr>
<td colspan="3"><img src="sources_hd/joconde_05.jpg" alt=""></td>
</tr>
</table>
</body>
</html>
On continu :
Tableau propriétés css spécifiques et selecteur séquentiels
| La 1er colonne | 50000 | 12 | 4566 |
| La 1er colonne | 50000 | 12 | 4566 |
| La 1er colonne | 5000000000000000000000 | 12 | 4566 |
| La 1er colonne | 50000 | 12 | 4566 |
| La 1er colonne | 50000 | 12 | 4566 |
| La 1er colonne | 50000 | 12 | 4566 |
| La 1er colonne | 50000 | 12 | 4566 |
| La 1er colonne | 50000 | 12 | 4566 |
Tableau avec styles par selecteur séquentiels
Tableau avec style altèrné CSS| L1 | cel. | cel. | cel. | cel. | cel. | cel. | cel. | cel. | cel. |
|---|
| L2 | cel. | cel. | cel. | cel. | cel. | cel. | cel. | cel. | cel. |
|---|
| L3 | cel. | cel. | cel. | cel. | cel. | cel. | cel. | cel. | cel. |
|---|
| L4 | cel. | cel. | cel. | cel. | cel. | cel. | cel. | cel. | cel. |
|---|
| L5 | cel. | cel. | cel. | cel. | cel. | cel. | cel. | cel. | cel. |
|---|
| L6 | cel. | cel. | cel. | cel. | cel. | cel. | cel. | cel. | cel. |
|---|
| L7 | cel. | cel. | cel. | cel. | cel. | cel. | cel. | cel. | cel. |
|---|
| L8 | cel. | cel. | cel. | cel. | cel. | cel. | cel. | cel. | cel. |
|---|
| L9 | cel. | cel. | cel. | cel. | cel. | cel. | cel. | cel. | cel. |
|---|
| L10 | cel. | cel. | cel. | cel. | cel. | cel. | cel. | cel. | cel. |
|---|
| L11 | cel. | cel. | cel. | cel. | cel. | cel. | cel. | cel. | cel. |
|---|
| L12 | cel. | cel. | cel. | cel. | cel. | cel. | cel. | cel. | cel. |
|---|
Tableau avec styles alternés-a
| cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. |
| cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. |
| cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. |
| cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. |
| cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. |
| cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. |
| cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. |
| cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. |
| cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. |
| cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. |
Tableau avec styles alternés-a
| cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. |
| cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. |
| cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. |
| cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. |
| cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. |
| cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. |
| cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. |
| cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. |
| cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. |
| cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. | cCel. |
Le code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>selecteur css d'ordre</title>
<style>
table {
border-collapse: collapse;
width: 100%;
text-align: center
}
.tab1 td {
border: 1px solid blue;
width: 25%;
}
.tab2 td,
.tab2 th {
border: 1px solid blue;
width: 10%;
}
.tab2 tbody tr:first-child td:nth-child(3),
.tab2 tbody tr:nth-child(2) td:nth-of-type(3),
.tab2 tbody tr:nth-child(3) td:nth-last-child(3),
.tab2 tbody tr:nth-child(4) td:nth-last-of-type(3),
.tab2 tbody tr:nth-child(5) td:nth-of-type(n+4),
.tab2 tbody tr:nth-child(6) td:nth-of-type(3n),
.tab2 tbody tr:nth-child(7) td:nth-of-type(3n+1),
.tab2 tbody tr:nth-child(8) :nth-last-of-type(1),
.tab2 tbody tr:nth-child(9) :first-of-type,
.tab2 tbody tr:nth-child(10) th:first-of-type,
.tab2 tbody tr:nth-child(11) td:nth-of-type(n+2):nth-of-type(-n+4),
.tab2 tbody tr:nth-child(12) td:nth-child(2n) {
background-color: cornflowerblue;
font-weight: bold;
}
.tab3 {
border-collapse: collapse;
width: 100%;
text-align: center
}
.tab3 tr,
.tab3 td {
border: 1px solid blue;
width: 10%;
}
.tab3 tr:nth-of-type(3n+1){
background-color: #5db1fa;
}
.tab3 tr:nth-of-type(3n){
background-color:#6464b2;
}
.tab4 {
border-collapse: collapse;
width: 100%;
text-align: center;
}
.tab4 td {
border: 1px solid white;
}
.tab4 tr:nth-of-type(2n){
background-color: #d5f49c;
}
.tab4 tr:nth-of-type(2n+1){
background-color: #73b146;
}
</style>
</head>
<body>
<!-- table>tr*10>td*10>{cellule} appuyer sur tabulation-->
<!--
on peut placer une class
table.tab1>tr*10>td*10>{cellule}
-->
<h1>Tableau propriétés css spécifiques et selecteur séquentiels</h1>
<table class="tab1">
<tr class="tr1">
<td>La 1er colonne</td>
<td>50000</td>
<td>12</td>
<td>4566</td>
</tr>
<tr class="tr2">
<td>La 1er colonne</td>
<td>50000</td>
<td>12</td>
<td>4566</td>
</tr>
<tr class="tr3">
<td>La 1er colonne</td>
<td>5000000000000000000000</td>
<td>12</td>
<td>4566</td>
</tr>
<tr class="tr4">
<td>La 1er colonne</td>
<td>50000</td>
<td>12</td>
<td>4566</td>
</tr>
<tr class="tr5">
<td>La 1er colonne</td>
<td>50000</td>
<td>12</td>
<td>4566</td>
</tr>
<tr class="tr6">
<td>La 1er colonne</td>
<td>50000</td>
<td>12</td>
<td>4566</td>
</tr>
<tr class="tr7">
<td>La 1er colonne</td>
<td>50000</td>
<td>12</td>
<td>4566</td>
</tr>
<tr class="tr8">
<td>La 1er colonne</td>
<td>50000</td>
<td>12</td>
<td>4566</td>
</tr>
</table>
<h2>Tableau avec styles par selecteur séquentiels</h2>
<table class="tab2">
<caption class="cap2">Tableau avec style altèrné CSS</caption>
<tr>
<th>L1</th>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
</tr>
<tr>
<th>L2</th>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
</tr>
<tr>
<th>L3</th>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
</tr>
<tr>
<th>L4</th>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
</tr>
<tr>
<th>L5</th>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
</tr>
<tr>
<th>L6</th>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
</tr>
<tr>
<th>L7</th>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
</tr>
<tr>
<th>L8</th>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
</tr>
<tr>
<th>L9</th>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
</tr>
<tr>
<th>L10</th>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
</tr>
<tr>
<th>L11</th>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
</tr>
<tr>
<th>L12</th>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
<td>cel.</td>
</tr>
</table>
<h1>Tableau avec styles alternés-a</h1>
<table class="tab3">
<tr class="tr1">
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
</tr>
<tr class="tr2">
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
</tr>
<tr class="tr3">
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
</tr>
<tr class="tr4">
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
</tr>
<tr class="tr5">
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
</tr>
<tr class="tr6">
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
</tr>
<tr class="tr7">
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
</tr>
<tr class="tr8">
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
</tr>
<tr class="tr9">
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
</tr>
<tr class="tr10">
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
</tr>
</table>
<h1>Tableau avec styles alternés-a</h1>
<table class="tab4">
<tr class="tr1">
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
</tr>
<tr class="tr2">
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
</tr>
<tr class="tr3">
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
</tr>
<tr class="tr4">
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
</tr>
<tr class="tr5">
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
</tr>
<tr class="tr6">
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
</tr>
<tr class="tr7">
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
</tr>
<tr class="tr8">
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
</tr>
<tr class="tr9">
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
</tr>
<tr class="tr10">
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
<td>cCel.</td>
</tr>
</table>
</body>
</html>
