Inforordinateurmatique

Aide aux divers cours - Bruno GADRAT

Table en html

Écrire correctement les tables

Attention l'aspect peut changer en fonction de la feuille de style CSS utilisée.

Minimal

Pour structurer des données

tr pour encadrer une ligne et td pour encadrer une donnée. Attention à mettre le même nombre de données dans chaque ligne pour éviter les erreurs de place dans le tableau.

<table>
<tr><td>1.1</td>
<td>1.2</td><td>1.3</td></tr>
<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
</table>
1.11.21.3
2.12.22.3
3.13.23.3

Faire durable maintenant
pub
Acheter en ligne

Maximal

Pour structurer des données

Une structure plus complète avec une légende <caption>...</caption>, une possibilité d'identifier les colonnes <col> une à une ou en les groupant avec un <col span=...>, un groupe d'en-tête <thead>...</thead>, un ou plusieurs groupes de corps <tbody>...</tbody>, et un groupe de pied <tfoot></tfoot>

Si vous êtes à l'aise avec la structure, vous pouvez passer aux css pour la mise ne forme.

<table>

<caption></caption>

<col><col><col><col><col><col>

<thead>
<tr><th></th><th></th><th></th><th></th><th></th><th></th></tr>
</thead>

<tbody>
<tr><th></th><th></th><th></th><th></th><th></th><th></th></tr>
<tr><th></th><td></td><td></td><td></td><td></td><td></td></tr>
<tr><th></th><td></td><td></td><td></td><td></td><td></td></tr>
<tr><th></th><td></td><td></td><td></td><td></td><td></td></tr>
<tr><th></th><td></td><td></td><td></td><td></td><td></td></tr>
<tr><th></th><td></td><td></td><td></td><td></td><td></td></tr>
</tbody>

<tfoot>
<tr><th></th><th></th><th></th><th></th><th></th><th></th></tr>
</tfoot>

</table>
Titre
\ABCDE
L\CC1C2C3C4C5
L112345
L2678910
L31112131415
L41617181920
L52122232425
\ABCDE

Largeur

Automatique ou toute la largeur

La table s'adapte automatiquement à son contenu.

1.11.21.3
2.1cette case contient du texte2.3
3.13.23.3

Pour lui donner la pleine largeur, il faut lui appliquer un style

<style>
.toutelalargeur {width: 100%;}
</style>


</table>

<table class="toutelalargeur"
<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
</table>
1.11.21.3
2.12.22.3
3.13.23.3

Avec légende

Le titre général de description du tableau

<table>
<caption>Légende</caption>
<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
</table>
Légende
1.11.21.3
2.12.22.3
3.13.23.3

Rubriques et données

Pour identifier une case comme le titre (th) de ligne ou de colonne de la donnée (td)

<table>
<tr> <th></th><th></th> </tr>
<tr> <th></th><td></td> </tr>
<tr> <th></th><td></td> </tr>
<tr> <th></th><td></td> </tr>
</table>
L\Ccol1col2col3
lig11.11.21.3
lig22.12.22.3
lig33.13.23.3

Structurer le tableau en groupant des lignes

En-tête, pied et corps de tableau à définir dans cet ordre

Le tableau peut contenir plusieurs corps (tbody) mais ne doit contenir qu'un en-tête (thead) et un pied (tfoot). À l'intérieur de la balise table, il faut placer les groupes dans l'ordre, caption puis Thead puis tbody puis tfoot

Pour faire défiler le corps du tableau entre l'en-tête et le pied, il faut utiliser les CSS.

<table>
<thead>
<tr><th>col1</th><th>col2</th><th>col3</th></tr>
</thead>
<tbody>
<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
</tbody>
<tfoot>
<tr><th>-col1-</th><th>-col2-</th><th>-col3-</th></tr>
</tfoot>
</table>
Tableau
col1col2col3
1.11.21.3
2.12.22.3
3.13.23.3
-col1--col2--col3-

Identifier les colonnes

Utile pour simplifier la mise en forme pas CSS des colonnes

L'identification des colonnes est mal gérée dans les navigateurs. Colorier le fond et donner une largeur à la colonne est à peu près tout ce que vous pourrez faire par css.

<style>
col.description {background-color:silver; width:40px ;}
</style>

<table>
<col class="description" ><col><col>
<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
</table>
1.11.21.3
2.12.22.3
3.13.23.3

Plans et devis
pub
Acheter en ligne

Fusionner des cellules du tableau

Pour le fun

<table>
<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
<tr><td colspan="2">2.1 et 2.2</td><td rowspan="2">2.3<br>et<br>3.3</td></tr>
<tr><td>3.1</td><td>3.2</td></tr>
</table>

Attention de supprimer les cases correspondant aux cellules fusionnées.

1.11.21.3
2.1 et 2.22.3
et
3.3
3.13.2

Mettre en forme les tables par CSS

Pour toutes les utilisations

Un tableau de données, une estimation pour un projet sont deux exemples usuels de bonne utilisation des tables. La mise en forme des tables html par css fait alors toute la différence.
Faire défiler le texte de la table entre l'en-tête et le pied avec le style css

Faire de la mise en page avec la balise table

Fortement déconseillé

L'envie de faire de la mise en page avec des tables est très forte. Il vaut mieux résister à la tentation. La mise en page par CSS est beaucoup plus simple à réaliser. Le seul problème qui reste non résolu est que les navigateurs actuels gèrent mal les médias paginés et les répétitions sur les pages.

 

 

Quelques références

Structurer l'information pour faciliter la formation

Bruno Gadrat Design Végétal / Mieux Vivre ici: Jardins et paysages durables

pub

Bruno Gadrat

Orig: 2009/07 Rev: 2017/02/28

table.html

Design et gestion du site B.Gadrat

Contrôle qualité