Les propriétés HTML d'un tableau |
Règles pour la bordure extérieure
La condition préalable à toutes ces mentions est la présence de l'attribut
border=
dans le repère d'ouverture
<table>
. Grâce à lui, une bordure
extérieure est affichée.
Avec l'attribut frame=
vous pouvez
alors fixer pour quels côtés du tableau une bordure doit être tracée (frame =
cadre).
Avec frame="box"
(box =
rectangle) vous faites en sorte que la bordure du tableau soit visible en
haut, à gauche, à droite et en bas (la mention produit le même effet que celui
produit par la mention border=
- même
frame="border"
est permise et a le même
effet).
Les autres mentions suivantes sont possibles:
Avec frame="void"
(void = rien) absolument aucune
bordure de tableau n'est affichée. Si vous mentionnez border=
, le quadrillage du tableau est cependant
affiché de façon visible. Le tableau ressemble alors à une grille ouverte sur
tous ses côtés (l'exemple ci-dessus utilise cette variante).
Avec frame="above"
(above
= au dessus) une ligne
de bordure n'est affichée que sur le bord supérieur du tableau.
Avec
frame="below"
(below = en
dessous) une ligne de bordure n'est affichée que sur le bord inférieur du
tableau.
Avec frame="hsides"
(hsides = horizontal sides = côtés horizontaux) ne ligne de bordure n'est
affichée que sur les bords inférieur et supérieur du tableau.
Avec
frame="vsides"
(vsides = vertical
sides = côtés verticaux) une ligne de bordure n'est affichée que sur les
bords droit et gauche du tableau .
Avec frame="lhs"
(lhs = left hand side = à gauche)
une ligne de bordure n'est affichée que sur le bord gauche du tableau .
Avec
frame="rhs"
(rhs = right hand side =
droite) .
La condition préalable à toutes ces mentions est la présence de l'attribut
border=
dans le repère d'ouverture
<table>
. Grâce à lui, un
quadrillage est affiché.
Avec rules=
vous pouvez déterminer
des règles pour le quadrillage dans le repère d'ouverture <table>
(rules = règles).
Les mentions suivantes sont possibles:
Avec rules="none"
(none = aucun) aucune ligne de
quadrillage n'est affichée, le cadre extérieur est cependant affiché.
Avec
rules="rows"
(rows = rangées) les
lignes entre les rangées sont tracées mais pas celles entre les colonnes du
tableau.
Avec rules="cols"
(cols =
columns = colonnes)les lignes entre les colonnes sont tracées mais pas
celles entre les rangées du tableau..
Avec rules="groups"
(groups = groupes) les lignes entre l'entête, le
corps et le pied sont tracées
Avec rules="all"
(all = tout(e)s) sont tracées
toutes les lignes séparant les cellules du tableau (réglage par défaut).
Avec l'attribut nowrap
(sans autre
affectation de valeur) dans un repère <th>
ou <th>
, vous empêchez un passage à la ligne
automatique dans le contenu de la cellule . La cellule et par la même occasion
toute la colonne dont elle fait partie sera aussi large qu'il est
nécessaire.
L'exemple ci-dessus montre dans la première rangée comment l'attribut HTML
nowrap
est mis en ouvre, et dans la
deuxième rangée la notation correspondante en CSS. C'est cette dernière qui est
conforme à la variante HTML "Strict", elle n'est cependant interprétée qu'à
partir de la version 4.x de l'Explorer Internet et de la version 6.x de
Netscape.
Quand vous travaillez conformément à XHTML il vous faut noter
l'attribut nowrap
de cette façon
nowrap="nowrap"
.
Avec align="left"
placé dans le
repère d'ouverture <th>
vous
pouvez aligner à gauche une cellule d'entête, avec la mention align="right"
l'aligner à droite. Vous pouvez
centrer des cellules de données <td>
en plaçant align="center"
dans leur repère d'ouverture et les
aligner à droite avec align="right"
Les
mentions align="center"
pour les
cellules d'entête et align="left"
pour
les cellules de données sont naturellement aussi permises, mais font l'effet du
réglage par défaut et de ce fait ne sont pas nécessaires (align = alignement, left =
gauche, center = centré, right = à droite). Vous pouvez également
noter ces mentions dans le repère d'ouverture <tr>
, dans le repère d'ouverture <thead>
, dans le repère d'ouverture
<tbody>
et dans le repère
d'ouverture <tfoot>
. Alors c'est
toutes les cellules de la partie correspondante du tableau qui seront alignées
comme mentionné. Les mentions contradictoires dans les cellules individuelles
ont, il est vrai priorité sur les mentions s'appliquant à ces passages. À partir
de HTML 4.0 la mention align="justify"
est également permise. Elle vous permet de forcer la justification dans une
cellule.
Avec valign="top"
dans son repère
d'ouverture, vous pouvez aligner une cellule en haut à gauche, avec la mention
valign="bottom"
l'aligner en bas à
gauche. Même la mention valign="middle"
est possible. Ceci est cependant le réglage par défaut - et donc superflu
(valign = vertical align = alignement vertical, top = haut, bottom = bas,
middle = au milieu). Vous pouvez même noter l'attribut valign
dans le repère d'ouverture <tr>
, dans le repère d'ouverture <thead>
, dans le repère d'ouverture
<tbody>
et dans le repère
d'ouverture <tfoot>
. À partir de
HTML 4.0 la mention valign="baseline"
est également permise. Alors, toutes les cellules de la ligne qui reçoit cette
commande sont alignées sur une ligne de base commune, à savoir de telle façon
que la première ligne de texte de toutes ces cellules commence à la même
hauteur.
De plus est permise la mention depuis HTML 4.0 align="char"
en relation avec les attributs
char=
et charoff=
. Avec align="char"
vous pouvez faire en sorte que les
contenus d'une colonne soient alignés sur un signe décimal. Par ailleurs vous
avez encore besoin de l'attribut char=
(char = character = caractère). Derrière, vous placez entre guillemets un
signe que vous utilisez comme signe décimal. Toutes les valeurs de la colonne
concernée qui contiennent ce signe seront alignées de telle façon que le signe
décimal sera toujours au même endroit. À côté de l'attribut char=
pour déterminer le signe décimal vous pouvez
mentionner encore en plus l'attribut charoff=
(charoff = character offset = position
du signe). Vous mentionnez ainsi à quelle position le signe est placé au
plus tôt. Dans l'exemple ci-dessus une virgule a été définie comme signe
décimal. Les valeurs de la colonne
prédéfinie concernée de l'exemple- seront donc alignées de telle
façon que le signe décimal soit toujours au même endroit. La spécification HTML
précise pourtant que le soutien de l'alignement comptable par les navigateurs
est laissé à leur discrétion. Effectivement aucun des navigateurs les plus
répandus n'interprète ces mentions.
Couleurs d'arrière-plan et images d'arrière-plan
Grâce à l'attribut bgcolor=
dans le
repère d'ouverture du tableau, vous pouvez déterminer une couleur d'arrière plan
pour le tableau complet (bgcolor = background color = couleur d'arrière
plan). De la même façon vous
pouvez notez l'attribut bgcolor=
dans le
repère d'ouverture (<tr
>) d'une
ligne de tableau pour fixer une couleur d'arrière-plan à toutes les cellules de
cette ligne. Si vous notez bgcolor=
dans
le repère d'ouverture (<td>
) d'une
cellule de données ou dans le repère d'ouverture d'une cellule d'entête
(<th>
) la couleur d'arrière plan
s'applique pour cette seule cellule. En cas de conflit la mention de couleur
dans une cellule distincte a priorité sur la mention de couleur pour la ligne
complète, ou pour tout le tableau. La mention pour une ligne complète a priorité
en cas de conflit sur la mention pour tout le tableau.
L'attribut background=
permet aussi
d'incorporer une image d'arrière-plan pour le tableau ou pour des cellules
distinctes. Cet attribut appliqué aux tableaux, n'est pourtant pas conforme à
HTML et n'a pas été mis dans l'exemple ci-dessus. Le deuxième tableau noté dans
l'exemple montre comment il faut noter conformément à HTML. Le seul argument
contre cette notation n'est à vrai dire que l'existence de Netscape 4.x qui
n'interprète aucune mentions de feuilles de style CSS pour les tableaux.
Dans
l'exemple il est supposé que le fichier graphique arrplan.jpg
se trouve dans le même répertoire que le
fichier HTML. Vous pouvez cependant également mentionner des graphiques situés
dans d'autres répertoires (par exemple /donnees/graphisme/arrplan/arrplan.gif
ou
../gif/retour.gif
) ou d'une URI éloignée
(par exemple http://www.mon-autre-domaine.fr/graphisme/retour.jpg
.
Couleurs pour le bord et le quadrillage (Microsoft)
Vous pouvez également mentionner des couleurs pour le cadre et le quadrillage. Ces mentions ne sont toutefois pour l'instant interprétées que par l' Explorer Internet MS et ne font pas partie du standard HTML.
Grâce à l'attribut bordercolor=
dans
le repère d'ouverture d'un tableau <table>
vous déterminez une couleur uniforme
pour le cadre et le quadrillage (bordercolor = couleur du bord).
À la place d'une simple couleur de cadre vous pouvez aussi apporter un effet
ombragé dans le cadre, en définissant deux couleurs différentes - une plus
foncée et une plus claire. Pour cela, notez dans le repère d'ouverture du
tableau les deux mentions bordercolordark=
(bordercolordark = couleur de
bordure foncée ) et bordercolorlight=
(bordercolorlight = couleur de
bordure claire).