Retour à la page d'accueil

Retour Accueil Didacticiel

Retour au menu<Insertion d'objets 
 HTML	    >

Page Précédente

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) .

Attention: Netscape 4.0 n'accepte pas encore ces options.

Règles pour le quadrillage

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).

Attention: Netscape 4.0 n'accepte pas encore ces options.

Empêcher le passage à la ligne dans les cellules

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.

Attention:

Quand vous travaillez conformément à XHTML il vous faut noter l'attribut nowrap de cette façon nowrap="nowrap" .


Alignement de cellules

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 Autre page d'information 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).