Exemple de Tableau
Un exemple de tableau
Tout d'abord le tableau sans aucun style:| Surface | Profondeur moyenne | |
|---|---|---|
| millions de km2 | m | |
| Arctique | 13 000 | 1 200 |
| Atlantique | 87 000 | 3 900 |
| Pacifique | 180 000 | 4 000 |
| Indien | 75 000 | 3 900 |
| Antarctique | 20 000 | 4 500 |
| Total | 361 000 | |
| Moyenne | 72 000 | 3 800 |
et maintenant le même tableau auquel on applique le style suivant:
<style>#demo-table {font: 100% sans-serif;
background-color: #efe;
border-collapse: collapse;
empty-cells: show;
border: 1px solid #7a7;
}
#demo-table > caption {
text-align: left;
font-weight: bold;
font-size: 200%;
border-bottom: .2em solid #4ca;
margin-bottom: .5em;
}
/* règles de base partagées */
#demo-table th,
#demo-table td {
text-align: right;
padding-right: .5em;
}
#demo-table th {
font-weight: bold;
padding-left: .5em;
}
/* en-tête */
#demo-table > thead > tr:first-child > th {
text-align: center;
color: blue;
}
#demo-table > thead > tr + tr > th {
font-style: italic;
color: gray;
}
/* taille des valeurs en exposant */
#demo-table sup {
font-size: 75%;
}
/* corps du tableau */
#demo-table td {
background-color: #cef;
padding:.5em .5em .5em 3em;
}
#demo-table tbody th:after {
content: " :";
}
/* pied du tableau */
#demo-table tfoot {
font-weight: bold;
}
#demo-table tfoot th {
color: blue;
}
#demo-table tfoot th:after {
content: " :";
}
#demo-table > tfoot td {
background-color: #cee;
}
#demo-table > tfoot > tr:first-child td {
border-top: .2em solid #7a7;
}
</style>
| Surface | Profondeur moyenne | |
|---|---|---|
| millions de km2 | m | |
| Arctique | 13 000 | 1 200 |
| Atlantique | 87 000 | 3 900 |
| Pacifique | 180 000 | 4 000 |
| Indien | 75 000 | 3 900 |
| Antarctique | 20 000 | 4 500 |
| Total | 361 000 | |
| Moyenne | 72 000 | 3 800 |
Retour