Tables
Tutoriaux, Sommaire
Html
Exemple :
| Icônes |
| Domaine |
Désignation |
Symbole |
| Destruction |
Poubelle auto mouvante |
 |
| Entretien |
Laveur de vitres à propulsion par rétro-fusée |
 |
Une table est constituée d'un certains nombre de cases
organisées en rangées et colonnes. Celle ci-dessus comporte 4 lignes et 3
colonnes. Elles permettent d'organiser de façon précise la présentation de
données et l'organisation de pages.
Une table est comprise entre les tags
<table> </table>.
Pour définir une ligne, (row), nous utilisons le tag
<tr> </tr>
Pour définir une cellule dans la ligne, (cell data), nous
utilisons le tag <td> </td>.
pour mieux visualiser la table, il faut afficher les
bordures, ceci se fait dans le tag <table> par l'instruction border=n ou n
est l'épaisseur en pixel de la bordure.
Une table comportant une case, une rangée, une colonne, (Ok
c'est idiot!), se présentera ainsi,
<table border=1> Début de la
table
<tr>
Début d'une ligne
<td>
Début d'une cellule
... Contenu de la
cellule....
</td>
Fin d'une cellule
</tr>
Fin d'une ligne
</table>
Fin de la table
Les décalages de lignes, (indentation), sont ici pour mieux
visualiser la structure, ils ne sont pas indispensables.
Exercice, visualiser dans la forme ci-dessous la table,
changer le contenu de la case.
Rajoutons une cellule dans la ligne, c'est à dire entre les
tags <tr> </tr>. La cellule étant définit par les tags <td>
</td>.
<tr>
Début de la ligne
<td>
Début de la première cellule
... Cellule 1 ....
</td>
Fin de la première cellule
<td>
Début de la deuxième cellule
... Cellule 2 ....
</td>
Fin de la deuxième cellule
</tr>
Fin de la ligne
Corrigé.
Rajoutons une ligne, vous devez avoir le même nombre de
cellule dans chaque ligne,
<tr>
Première ligne
<td> Cellule 1</td>
<td> Cellule 2</td>
</tr>
<tr>
Deuxième ligne
<td> Cellule 3</td>
<td> Cellule 4</td>
</tr>
Corrigé.
Exercice, rajoutez une cellule dans chaque ligne,
renumérotez les cellules,
Corrigé
Exercice, rajoutez une ligne, numérotez les cellules
Corrigé
La grandeur des cellules s'ajustent automatiquement
à celle du contenu. Reprenons l'exemple précédent de deux lignes de trois
cellulles, changeons le texte de la cellule 1, (cellule 1), en Ceci est la
Cellule 1. Nous voyons que la colonne s'ajustent automatiquement à la largeur
du texte. Corrigé . Il s'agit de la
colonne et non pas simplement de la cellule, ceci est vrai pour n'importe quelle
cellule dans la colonne, si vous rétablissez le contenu précédent de cellule
1 et que vous agrandissiez le texte de cellule 4 vous obtenez le même
résultat. Corrigé
| La largeur d'une
colonne est donnée par la cellule la plus large de cette colonne |
Si la dimension de l'écran ne permet pas aux cellules de la
table de s'étendre, le texte effectuera des retours à la ligne dans les
cellules où les mots le permettent. S'il y a des images dans la/les cellules,
les cellules s'ajustent à la dimension des images, si l'écran n'est pas assez
large, la table déborde à droite. Nous allons voir plus loin comment
spécifier des largeurs de table et de cellules.
On peut spécifier la largeur de
la table à l'intérieur du tag <table>
<table width = n> où n est en pixel ou en pourcentage
de la largeur d'écran, dans ce cas le chiffre est suivit du signe %. Par
défaut, la table occupe l'espace nécessaire à l'affichage du contenu des
cellules.
Testons notre table 2 lignes 3 colonnes avec une largeur de
50%. Corrigé
Si vous allongez le contenu des cellules, le navigateur tente
de conserver la largeur programmée, sinon il étend la largeur de colonne.
Essayez en gardant une largeur de 50% de taper anticonstitutionnellement comme
contenu d'une cellule. Corrigé
Ce serait la même chose pour une image dépassant la largeur
disponible.
| Moralité. Calculer ou ajuster les largeurs
de table et de cellules en tenant compte des contenus. |
Vous pouvez spécifier de la même façon la
hauteur de la table, par l'instruction height=n, où n
est en pixel ou en pourcentage de la hauteur d'écran, dans ce cas le chiffre
est suivit du signe %. Cette commande est peu usitée.
Nous avons vu que la largeur des cellules
était fixée par les dimensions de la table, sous réserve que le contenu
n'impose pas un dépassement. Par défaut les largeurs de cellules sont égales
entre elles.
Pour programmer la largeur des cellules, on utilise la même
syntaxe que pour les tables, mais cette fois à l'intérieur du tag <td>
concerné. Les pourcentages s'appliquent à la largeur de la table, si la
largeur de la table est de 50% et qu'une cellule est elle aussi à 50%, c'est
50% de 50% soit 25 % de la largeur de l'écran.
Exemple, <td width=50%>
Exercice,
table 2 lignes 3 colonnes déjà
affichée dans la forme ci-dessous,
largeur de la table 100%
1ere colonne 50%
2eme colonne 35%
3eme colonne 15%
Corrigé
Exercice,
Réduire la largeur de la table à
50%
Corrigé
On a souvent besoin dans
une table de fusionner plusieurs cellules entres-elles, exemple ce tableau de
ventes hypothétiques,
| Répartition de
ventes |
| Secteur |
Premier produit |
Deuxième produit |
| Quantité |
Prix |
Quantité |
Prix |
| 1 |
Nord |
|
|
|
|
| Sud |
|
|
|
|
| 2 |
Nord |
|
|
|
|
| Sud |
|
|
|
|
Cette table comporte 7 lignes et 6
colonnes, on peut voir que l'emplacement du titre de la table résulte de la
fusion de 6 cellules.
Il y a deux instructions de fusions de cellules, en colonne,
colspan, (fusion des colonnes) et en ligne, rowspan, (fusion de cellules en
lignes). Ces instructions prennent place dans le tag <td>.
Première ligne.
Le titre de la table ci-dessus nécessite la fusion des six
cellules de la première ligne. Nous écrirons,
<tr>
<td colspan="6">Répartition de
ventes</td>
</tr>
Cette instruction est encadrée par un tag <tr>,
(définissant une ligne), car la cellule <td> occupe toute la ligne.
Deuxième ligne.
La case "Secteur" occupe 4 cellules,
2 cellules en colonnes, nous écrirons donc colspan="2"
et
2 cellules en lignes, rowspan="2"
L'instruction complet,
<td colspan="2" rowspan="2
">Secteur</td>
ce tag prendra la place du tag de la première cellule des 4,
en haut et à gauche dans la table.
La deuxième ligne comprend aussi les en-tête des produits,
nous aurons donc deux tag <td>, remplaçant chacun deux cellules.
<td colspan="2">Premier produit</td>
<td colspan="2">Deuxième produit</td>
Troisième ligne.
Nous ne trouvons pas de tag <td> pour les deux
premières cellules car elles sont définies dans l'instruction
rowspan="2" de la deuxième ligne. Les 4 autres cellules sont
définies normalement dans 4 tags <td>.
Quatrième ligne.
La première case comprend deux cellules superposées, nous
écrirons donc,
<td rowspan="2">1</td>
Les 5 autres cellules sont des tags <td> normaux.
Cinquième ligne.
Cette ligne ne comprend que cinq tags <td>, le premier
étant définit dans la ligne précédente.
Les lignes 6 et 7 sont la répétition respectivement des
lignes 4 et 5.
Exercice, examinez dans la forme ci-dessous le code de la
table.
Conseils.
Il est important de connaître la
structure des tables, leurs possibilités et donc d'être capable de construire
des tables manuellement. d'autre part nous serons et probablement vous serez
amené à construire des pages Html et donc des tables à travers un langage de
programmation comme javascript, java ou php, cela n'est pas concevable sans une
bonne maîtrise du html en général et des tables en particulier. Nous verrons
dans une leçon proche les multiples applications des tables.
Cependant, pour la construction de
tables complexes ou plus de tables incluses dans d'autres tables, je recommande
l'utilisation d'un éditeur Html, certains sont gratuits, voir ma page Outils.
