HTML et CSS

Tableaux

Après les listes, éléments à deux niveaux, d'imbrication, voici les tableaux : au moins 3 niveaux d'imbrication !

Un tableau HTML est constitué d'un conteneur <table> </table> à l'intérieur duquel on met des rangées <tr></tr>,elles-mêmes contenant des cellules <td></td>

<table border="1">
<tr><td>faux </td><td>vrai</td></tr>
<tr><td>vrai</td><td>faux</td></tr>
</table>

donne

faux	vrai
vrai	faux

<table> prend l'attribut "border" qui peut valoir "" (pas de bordures) ou 1 (bordures). Par défaut, border="" .

On peut ajouter un élément <caption></caption> dans l'élément table, dont le contenu s'affichera au-dessus de celle-ci(voir le prochain exemple).

Les rangées <tr> peuvent aussi contenir des cellules d'en-tête <th></th> qui sont par défaut formatées un peu différemment des cellules normales(différence qu'on pourra préciser en CSS).

<table border="1">
<caption>Table de vérité de la fonction Ou-exclusif </caption>
<tr><td></td><th>vrai</th><th>faux</th>/tr>
<tr><th>vrai</th><td>faux</td><td>vrai</td></tr>
<tr><th>faux</th><td>vrai </td><td>faux</td></tr>
</table>

donne

Table de vérité de la fonction Ou-exclusif
	vrai	faux
vrai	faux	vrai
faux	vrai	faux

<td> et <th> peuvent prendre les attributs "colspan" et "rowspan" qui permettent de créer des cellules couvrant plusieurs colonnes, ou plusieurs lignes, respectivement.

<table border="1">
<caption>Table de vérité de la fonction Ou-exclusif </caption>
<tr><td colspan=2 rowspan=2></td><th colspan="2"> B </th></tr>
<tr><th>vrai</th><th>faux</th></tr>
<tr><th rowspan="2"> A </th><th>vrai</th><td>faux</td><td>vrai</td></tr>
<tr><th>faux</th><td>vrai </td><td>faux</td></tr>
</table>

donne

Table de vérité de la fonction Ou-exclusif
		vrai	faux
		B
A	vrai	faux	vrai
A	faux	vrai	faux

Modifier le code ci-dessus pour obtenir la table de vérité de la fonction ET (qui est vraie seulement si A et B sont vrais tous les deux)

L'exercice suivante va permettre de définir dans Notepad++ un raccourci clavier générant le code d'une petite table, en utilisant l'enregisteur de macro-commandes.

Dans le menu "Macro", choisissez "Démarrer l'enregistrement" (ou utiliser le bouton "Démarrer l'enregistrement" de la barre d'outils)
Ecrivez le code permettant d'obtenir une table de deux lignes et deux colonnes, la première ligne et la première colonne contenant des cellules th (cette table contient donc trois cellules th et une seule cellule td).
Arrêtez l'enregistrement. Exécutez la macro et visualisez le résultat pour vérifier le code.
Enregistrez la macro sous un nom de votre choix en lui attribuant un raccourci clavier, par exemple Ctrl-alt-t.

Vous pourrez maintenant utiliser ce raccourci clavier, associé à du copier-coller, pour construire plus rapidement des tables.

licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 3.0 non transposé

Auteur : Nathalie Bonnin

Professeur de Physique, Chimie, Informatique au lycée La Martinière Monplaisir (Lyon 8^ème)

Contact :

nathalie.bonnin (chez) scientillula.net