SELFHTML/Quickbar
HTML
Tableaux SELFHTML/Quickbar
HTML
Tableaux
 |
Composition d'un tableau |
|
|
 | |
Définir des tableauxVous pouvez définir des tableaux en HTML pour y présenter des données ou
bien pour rendre plus attractive la présentation du texte et des graphiques à
l'écran. Pour cela on distingue les tableaux avec quadrillage pour la
présentation de données et les 
tableaux sans quadrillage
visible pour mettre du texte sur plusieurs colonnes par exemple ou pour améliorer la
présentation lors de la présence contiguë de texte et de graphique.
<table border> <!--ici est placé le contenu du tableau avec quadrillage--> </table> |
<table> <!--ici est placé le contenu du tableau sans quadrillage--> </table> |
<table> introduit un tableau (table = tableau). Si le tableau doit être quadrillé, vous devez ajouter la mention border comme dans l'exemple 1 (border = bordure).
Pour pouvoir mettre vos données dans le tableau vous devez définir des rangées et des colonnes comme décrit ci-après.
|
Définir des rangées et des colonnesUn tableau est constitué d'au moins une, normalement de plusieurs rangées. Une rangée est constituée d'au moins une, normalement de plusieurs cellules. C'est ce qui donne les colonnes du tableau.
<table border>
<tr>
<th>cellule d'entête: 1ère rangée, 1ère colonne</th>
<th>cellule d'entête: 1ère rangée, 2ème colonne</th>
<th>cellule d'entête: 1ère rangée, 3ème colonne</th>
</tr>
<tr>
<td>cellule de donnée: 2ème rangée, 1ère colonne</td>
<td>cellule de donnée: 2ème rangée, 2ème colonne</td>
<td>cellule de donnée: 2ème rangée, 3ème colonne</td>
</tr>
<tr>
<td>cellule de donnée: 3ème rangée, 1ère colonne</td>
<td>cellule de donnée: 3ème rangée, 2ème colonne</td>
<td>cellule de donnée: 3ème rangée, 3ème colonne</td>
</tr>
</table>
|
<tr> introduit une nouvelle ligne dans le tableau (tr = tableau row = rangée du tableau). À la suite sont définies les cellules (colonnes) de la rangée correspondante. à la fin d'une rangée de tableau est inscrit le repère de fermeture </tr>.
Un tableau peut contenir des cellules d'entête et des cellules de données.
Du texte dans les cellules d'entête est mis en valeur (la plupart du temps en
gras et centré). <th> définit une cellule d'entête, <td>
une cellule normale de donnée (th = table header = entête de tableau, td = table data =
donnée de tableau). Le contenu d'une cellule est noté à chaque fois
derrière le repère. Dans une cellule de tableau peuvent être placés des éléments au choix, c'est à dire à part du
texte normal vous pouvez y
définir également des 
liens
ou des graphiques
en HTML. Vous pouvez même définir un autre tableau dans une cellule.
Les repères <th> et <td> peuvent être employés seuls (sans repère de fermeture). Pourtant il est vivement recommandé de noter toujours le repère de fermeture correspondant, à savoir à la fin de la cellule un repère de fermeture </th> ou. </td>.
Le nombre des cellules pour chaque rangée doit être identique de façon à ce que le tableau ait pour chaque rangée le même nombre de colonnes. Dans la première rangée que vous définissez le nombre de cellules que vous définissez établira pour cette raison le nombre de colonnes qu'aura votre tableau.
Pour le texte à l'intérieur d'une cellule, respectez les règles pour signes avec accent,
caractères spéciaux et caractères HTML spécifiques.
Des tableaux plus importants peuvent rapidement prêter à confusion dans le
code. Choisissez pour cela une forme de représentation plus claire avec des
retraits et des passages à la ligne (semblable à l'exemple ci-dessus). La
présentation dans le code source n'a aucune influence sur la
présentation par le navigateur étant donné que dans des cellules de tableau
s'appliquent les règles d'édition en HTML
habituelles.
Des cellules de tableau peuvent aussi être vides. Si dans une ligne vous ne voulez pas entrer de donnée pour une colonne notez simplement <td></td>. Pensez cependant que dans ce cas beaucoup de navigateurs représenteront la cellule comme "n'étant pas là". Pour cette raison essayez donc aussi la suite de commande <td> </td> pour des cellules vides de tableau.
|
|
Prédéfinir des colonnesLa représentation d'un tableau s'obtient bien automatiquement de la définition des rangées et des colonnes. Pourtant ce n'est pas très simple pour un navigateur WWW de trouver la représentation suffisamment tôt. Il doit lire d'abord le tableau entier avant qu'il puisse en afficher une partie. Cela peut conduire pour des grands tableaux à de vilains écrans vides pendant la construction de la page.
HTML 4.0 propose une nouvelle syntaxe pour faire savoir au navigateur dés le début d'un tableau combien le tableau a de colonnes. Pour cette raison le navigateur peut construire plus vite le tableau c'est à dire que le navigateur peut déjà afficher des parties du tableau avant qu'il l'ait lu en totalité. Des navigateurs plus anciens (Netscape 3.x, Explorer Internet MS 3.x) n'interprètent cependant pas encore ces données.
<table border>
<colgroup>
<col width=80>
<col width=100>
<col width=320>
</colgroup>
<tr>
<td>1ère rangée, 1ère colonne</td>
<td>1ère rangée, 2ème colonne</td>
<td>1ère rangée, 3ème colonne</td>
</tr>
<!-- etc.... autres rangées du tableau -->
</table>
|
<table border>
<colgroup width=200 span=3>
</colgroup>
<tr>
<td>1ère rangée, 1ère colonne</td>
<td>1ère rangée, 2ème colonne</td>
<td>1ère rangée, 3ème colonne</td>
</tr>
<!-- etc.... autres rangées du tableau -->
</table>
|
<table border>
<colgroup>
<col width="4*">
<col width="2*">
<col width="1*">
</colgroup>
<tr>
<td>1ère rangée, 1ère colonne</td>
<td>1ère rangée, 2ème colonne</td>
<td>1ère rangée, 3ème colonne</td>
</tr>
<!-- etc.... autres rangées du tableau -->
</table>
|
Avec <colgroup> qui suit le repère d'ouverture <table>-cous introduisez une pré-définition des colonnes du tableau (colgroup = column group = groupe de colonnes). Pour ce faire vous avez deux possibilités: ou bien vous désirez des colonnes de tableau qui ne soient pas de la même largeur. alors vous procédez comme dans l'exemple 1 ci-dessus. Ou bien vous avez un tableau dans lequel toutes les colonnes doivent avoir la même largeur uniforme. alors vous procédez comme dans l'exemple 2 ci-dessus.
Dans l'exemple 1 le repère <colgroup> ne comprend pas de mentions complémentaires. C'est pourquoi vous notez sous ce repère pour chaque colonne séparée du tableau une commande <col>. Le premier repère <col> définit la première colonne, le deuxième la deuxième colonne etc... Sans précision complémentaire la largeur des colonnes est établie automatiquement sur la base du contenu du tableau. Avec width= [Pixel/Pourcentage] vous pouvez cependant déterminer une largeur de colonne pour chacune d'entre elles (width = largeur). Avec width=100 vous fixez par exemple une largeur de colonne de 100 pixels et avec width=33% une largeur d'un tiers de la fenêtre d'affichage.
Dans l'exemple 2 aucune commande du type <col> n'a été notée. À la place vous notez dans le repère d'ouverture <colgroup> l'attribut span= (span = tendre). Donnez après le signe égal le nombre de colonnes que vous désirez. Avec l'attribut width= vous pouvez dans ce cas définir une largeur de colonne uniforme pour toutes les colonnes.
Avec la commande width= vous avez outre la possibilité de donner
des valeurs en pixels ou en pourcentage encore une troisième possibilité: vous
pouvez donner le rapport de largeur relatif des colonnes entre elles
indépendamment de la largeur du tableau dans la fenêtre d'affichage. L'exemple
3 présente une telle possibilité. Pour des données de largeur de ce genre
notez un nombre suivi d'une étoile derrière width=. L'étoile est
un signal pour le navigateur qu'il ne doit pas interpréter les chiffres devant
l'étoile. Les chiffres sont importants. Dans l'exemple 3 ci-dessus trois
colonnes sont définies pour lesquelles les nombres relatifs 4, 2 et 1 donnent
un total de 7. Ainsi vous définissez un tableau dont la première colonne
représente les 4/7 de la largeur du tableau la deuxième 2/7 et la troisième
colonne 1/7.
Ce rapport relatif des colonnes entre elle n'est vraiment valable que si vous
donnez d'abord en plus une largeur pour le tableau complet .
Les repères <col> n'ont pas de repère de fermeture. Le repère de fermeture </colgroup> est facultatif.
Le repère <col> peut aussi accepter l'attribut span=. Ceci n'a cependant pas pour effet de grouper plusieurs colonnes en une seule mais d'indiquer que les attributs de cette colonne sont aussi valables pour les x colonnes suivantes. Si par exemple vous indiquez <col span=3 width=100>, cette colonne et les deux suivantes auront une largeur de 100 pixels.
La repère <colgroup> peut avoir lui aussi les attributs span= et width= si des repères <col> sont définis juste après. Le nombre des repères <col> définis n'écrase cependant pas la mention qui a été faite avec <colgroup span=> et l'attribut width= placé dans un repère <col> a priorité sur la mention width= du repère <colgroup>.
Il est aussi permis de noter plusieurs repères <colgroup>. Ainsi vous pouvez par exemple grâce à deux commandes comme <colgroup width=100 span=3> et <colgroup width=50 span=5> notées à la suite l'une de l'autre définir un total de huit colonnes pour le tableau, dont les trois premières colonnes auront une largeur de 100 pixels et les cinq suivantes une largeur de 50 pixels.
Pour la largeur des colonnes d'un tableau valent les mêmes remarques que pour
fixer les largeurs de colonnes
de façon habituelle.
|
|
Définir l'entête, le corps et le pied d'un tableauVous pouvez diviser un tableau en trois parties logiques: un entête, une
partie pour les données et la partie du pied. Ceci est intéressant par exemple
dans le cadre de la possibilité de fixer des règles pour le quadrillage.
Les données qui différencient l'entête, le corps et le pied d'un tableau
sont interprétées par l' Explorer Internet MS à partir de la version 4.x. Netscape
ne connaît pas ces données tout au moins jusqu'à la version 4.x.
<table border rules=groups>
<thead>
<!--rangées du tableau-->
</thead>
<tbody>
<!--rangées du tableau-->
</tbody>
<tfoot>
<!--rangées du tableau-->
</tfoot>
</table>
|
Vous introduisez l'entête du tableau avec <thead> (thead = table head =
entête du tableau). À la suite vous pouvez noter une ou plusieurs lignes
faisant partie de l'entête. Avec </thead> vous clôturez l'entête du tableau.
Vous introduisez le corps du tableau avec <tbody> (tbody = table body =
corps du tableau). À la suite vous notez l'espace des données proprement
dites du tableau. Avec </tbody> vous clôturez le corps du
tableau.
Vous introduisez le pied du tableau avec <tfoot> (tfoot = table foot =
pied du tableau). À la suite vous pouvez noter une ou plusieurs lignes
faisant partie du pied. Avec </tfoot> vous clôturez le pied du
tableau.
|
|
Autres possibilitésLes repères <table>, <tr>, <th>
et <td> peuvent comporter des attributs universels .
Avec l'aide des feuilles de style CSS vous
pouvez mieux maîtriser les tableaux. Grâce à elles vous pouvez définir des formats globaux.
En utilisant des données de feuilles de style
globales sur les repères HTML décrits ici vous avez infiniment plus de
possibilités à votre disposition que celles offertes par les attributs
décrits ici. Vous pouvez aussi définir les feuilles de style dans un fichier séparé
et incorporer ensuite ce fichier dans autant de fichiers HTML de votre projet
que vous le désirez. Il est ainsi plus facile de travailler avec un layout qui
ne se limite pas au seul fichier si vous utilisez souvent des tableaux. En
rapport avec ce qui vient d'être traité, les données de feuilles de style
suivantes sont intéressantes:
Formatage
de l'écriture
Listes
et tableaux
|
| |
après: |
Épaisseur du cadre, quadrillage, marges intérieures
|
avant: |
Texte déroulant
(Marquee)
|
SELFHTML/Quickbar
HTML
Serge François, 13405@free.fr
