dans le cadre de l'UV traduction de FAQ du département ASI de l'INSA Rouen. FAQ de la Création HTML du WDG The Web Design Group

FAQ de la création HTML


Cette liste des questions les plus fréquemment posées est tenue à jour par WDG et a été mise à jour pour la dernière fois le 15 Juillet 2000. (La présente traduction date de Janvier 2001). Elle peut être trouvée aux adresses suivantes :

La traduction en hollandais de ce document est disponible également :

La présente traduction française se trouve sur :

Si vous souhaitez contribuer à cette FAQ, merci d'envoyer un message à <darin@htmlhelp.com>. Toutes les personnes qui ont participé à cette FAQ sont listés à la fin.

N'hésitez pas à contacter le traducteur pour signaler une imprécision, une erreur de traduction, une faute de français que vous pourrez trouver dans ce document : <cedrik.rousseau@insa-rouen.fr>

Index

7.Tableaux en HTML

  1. Comment faire en sorte que les tableaux ne ressortent pas trop mal sur les navigateurs qui ne les supportent pas?
  2. Puis-je loger des tableaux à l'intérieur d'un tableau?
  3. Comment utiliser des tableaux pour structurer des formulaires?
  4. Comment centrer un tableau?
  5. Comment aligner un tableau à droite (ou à gauche)??
  6. Peut-on utiliser des pourcentages avec <TD WIDTH=...>?
  7. Pourquoi <TABLE WIDTH="100%"> n'affiche pas mon tableau sur toute la largeur?
  8. Pourquoi y'a-t'il de l'espace en plus avant ou après un tableau?
  9. Y'a-t'il des problèmes à se servir des tableaux pour mettre en forme?

Section 7: Tableaux

7.1. Comment faire en sorte que les tableaux ne ressortent pas trop mal sur les navigateurs qui ne les supportent pas?

Alan Flavell répond à cette question un tantinet désuète sur <URL:http://ppewww.ph.gla.ac.uk/~flavell/www/tablejob.html>.

7.2. Puis-je loger des tableaux à l'intérieur d'un tableau?

Oui, bien sûr, un tableau peut être intégré à l'intérieur d'une cellule d'un autre tableau. Voici un exemple simple :

    <table>

    <tr>

        <td>Ceci est la première cellule du tableau extérieur.</td>

        <td>Ceci est la seconde cellule du tableau extérieur,

            avec le tableau intérieur inclus dedans.<br>

        <table>

            <tr>

            <td> Première case du tableau interne.</td>

            <td> Seconde case du tableau interne.</td>

            </tr>

        </table>

        </td>

    </tr>

    </table>

Le principal écueil des tableaux imbriqués est que Netscape aura des problèmes si vous ne fermer pas vos balises TD et TR méticuleusement. Veillez à inclure tous les </TD> et </TR>, même si les spécifications de HTML ne les imposent pas; sinon les utilisateurs de Netscape pourraient ne pas être capables d'afficher vos pages.

7.3. Comment utiliser des tableaux pour structurer des formulaires?

Les petits formulaires sont parfois placés à l'intérieur d'un élément TD à l'intérieur d'un tableau. Ca peut être utile pour positionner un formulaire par rapport au reste du contenu, mais ça n'aide pas à positionner les éléments d'un formulaire les uns par rapport aux autres.

Pour positionner les éléments formulaires entre eux, le tableau entier doit être à l'intérieur du champ formulaire. Vous ne pouvez pas commencer un champ formulaire dans un TH ou un TD et le finir dans un autre. Vous ne pouvez pas placer le formulaire à l'intérieur d'un tableau sans le placer à l'intérieur d'un élément TH ou TD. Vous pouvez placer le tableau à l'intérieur du formulaire et puis utiliser le tableau pour positionner les éléments du formulaire comme INPUT, TEXTAREA, SELECT, etc. Aidez vous de l'exemple suivant :

<FORM ACTION="[URL]">

   <TABLE BORDER="0">

      <TR>

         <TH>Account:</TH>

         <TD><INPUT TYPE="text" NAME="Compte utilisateur"></TD>

      </TR>

      <TR>

         <TH>Password:</TH>

         <TD><INPUT TYPE="password" NAME="mot de passe"></TD>

      </TR>

      <TR>

         <TD> </TD>

         <TD><INPUT TYPE="submit" NAME="Entrer"></TD>

      </TR>

   </TABLE>

</FORM>

7.4. Comment centrer un tableau?

La bonne façon de faire ça est un <TABLE ALIGN=CENTER>, mais ça ne marche malheureusement pas dans plusieurs navigateurs répandus. Donc mettre une balise <CENTER> autour du tableau règle le problème pour ces navigateurs.

Mais cette méthode cause de problèmes avec les navigateurs qui supportent <CENTER> mais pas les tableau comme Lynx. Avec ces navigateurs, le contenu des cellules sera centré ce qui n'est pas le but. Pour éviter ça, vous pouvez mettre des balises <P ALIGN=left> ou <DIV ALIGN=left> dans chaque cellule du tableau, suivant la quantité de texte.

7.5. Comment aligner un tableau à droite (ou à gauche)?

Vous pouvez utiliser <TABLE ALIGN="right"> pour placer un tableau à droite. (Utiliser ALIGN="left" pour la gauche.) Tout ce qui suit le tableau (après la balise </TABLE>) remplira l'espace laisser libre autour du tableau. Utilisez <BR CLEAR="right"> ou <BR CLEAR="all"> pour continuer en dessous le tableau (et non à coté). L'exemple suivant est illustratif :

<TABLE ALIGN="right"> Le contenu du tableau sera placé à droite </TABLE>

Ce texte apparaitra à gauche du tableau.

<BR CLEAR="right">

Ce texte apparait en dessous le tableau,

même s'il reste de la place à gauche.

7.6. Peut-on utiliser des pourcentages avec <TD WIDTH=...>?

Les spécifications HTML 3.2 et 4.0 ne permettent que d'utiliser des valeurs entières (représentant un nombre de pixels) pour les attributs WIDTH de l'élément TD. Cependant la DTD HTML 4.0 autorise les pourcentages, ainsi un valideur HTML ne se plaindra pas de voir <TD WIDTH="xx%">.

Veuillez remarquer que les navigateurs de Netscape et de Microsoft ne comprennent pas les pourcentages dans TD WIDTH de la même façon. Cependant, leurs interprétations (et celles des autres navigateurs) concordent quand on déclare le tableau par <TABLE WIDTH="100%">. Dans ce cas, les pourcentages peuvent être utilisés en toute tranquilité bien qu'ils soient interdits par les spécifications.

7.7. Pourquoi <TABLE WIDTH="100%"> n'affiche pas mon tableau sur toute la largeur?

Les navigateurs laissent une petite marge entre les bords de la fenêtre et le contenu. Pour savoir comment régler cette marge, jeter un oeil à la réponse de la question "Comment éliminer les marges autour de la page?"

On peut également noter que Netscape laisse toujours de la place pour une barre de défilement sur la droite, mais ne dessine la barre que quand le document est assez long. Si le document ne nécessite pas de déroulement, ça laisse une "marge" à droite qui ne peut être enlevée.

7.8. Pourquoi y'a-t'il de l'espace en plus avant ou après un tableau?

Ceci est souvent dû à une syntaxe HTML non valide. Plus précisément, c'est souvent la faute d'un contenu flottant à l'intérieur d'un tableau (c'est à dire un contenu qui n'est pas à l'intérieur d'un élément TD ou TH). Il n'y a pas de méthode standard pour gérer du contenu libre à l'intérieur d'un tableau. Certains exploreurs affichent tout le contenu flottant avant ou après le tableau. Quand ce contenu ne consiste qu'en des sauts de lignes ou des paragraphes vides, alors ces navigateurs afficheront tous ces espaces vides avant ou après le tableau lui-même.

La solution est de corriger les erreurs de syntaxe HTML. Tout contenu à l'intérieur d'un tableau doit être inclus dans un élément TD ou TH.

7.9. Y'a-t'il des problèmes à se servir des tableaux pour mettre en forme?

Sauf exception, l'intégralité du tableau doit être téléchargé et les dimensions de tout ce que contient le tableau doivent être connues avant que le tableau ne puisse être affiché. Ceci peut retarder l'affichage de la page, surtout si le tableau contient des images sans attributs HEIGHT ou WIDTH.

Si le moindre élément du tableau est trop large pour la zone d'affichage, alors le tableau s'élargira pour s'adapter au contenu trop grand. Le reste de la page s'ajustera pour se mettre au dimension du tableau (et non des dimensions de la fenêtre). Ceci peut forcer les utilisateurs à faire défiler la page horizontalement pour lire la page et posera des problèmes d'impression.

Pour les utilisateurs dont l'affichage est plus étroit que ce que l'auteur avait pensé, les tableaux de largeur fixe causeront les mêmes problèmes.

A contrario, les utilisateurs ayant un écran plus large verront de grande marge autour du tableau gâcher une bonne partie de la zone d'affichage. Enfin, ceux qui utilisent une police de caractère plus grande verront le nombre de mot par ligne se réduire sensiblement, allongeant ainsi les cellules.

De nombreux navigateurs sont très pointilleux sur les syntaxes non valides pour les tableaux. Une syntaxe correcte est indispensable. (Jetez un oeil à "Comment vérifier les erreur éventuelles?"). Cependant, même avec une syntaxe correcte, les tableaux imbriqués peuvent ne pas s'afficher correctement dans Netscape. Lisez la réponse à "Puis-je loger des tableaux à l'intérieur d'un tableau?" pour savoir comment faire face à ce problème.

Certains navigateurs ignorent les tableaux ou peuvent être configurés pour les ignorer. Ces navigateurs ignoreront la mise en page que vous avez créée avec des tableaux. De la même façon, les moteurs de recherches ne prennent pas les tableaux en compte. Certains moteurs de recherche utilisent le texte au début d'un document pour le résumer quand il apparait dans les résultats d'une recherche tandis que d'autres n'indexent que les n premiers octets d'un document. Quand des tableaux sont utilisés pour la mise en page, le début d'un document contient souvent des liens de navigation qui apparaissent avant le contenu réel.

De nombreuses versions de Netscape ont des problèmes pour lier les ancres quand elles sont à l'intérieur d'un tableau qui utilise l'attribut ALIGN. Ces navigateurs semblent associer l'ancre avec le haut du tableau plutôt qu'avec le contenu réel de l'ancre. Vous pouvez éviter ce problème en évitant l'utilsation de ALIGN avec vos tableaux.

Si vous tenez à utiliser des tableaux, vous pouvez toujours minimiser les problèmes liés avec un balisage soigneux. Evitez de placer des images larges, des éléments PRE préformatés avec de longues lignes, de longues URL ou d'autres larges éléments à l'intérieur des tableaux. Plutôt qu'un seul tableau pleine page, utilisez plusieurs tableaux indépendants. Par exemple, vous pouvez utiliser un tableau pour mettre en forme une barre de navigation en haut de la page et laisser le contenu principal en dehors de tout tableau.

L'utilisation de tableaux pour la mise en forme est décrite en détail sur <URL:http://www.dantobias.com/webtips/tables.html>.

 


Pour des rajouts ou des oublis dans cette FAQ, merci de contacter <darin@htmlhelp.com> (en anglais) ou <cedrik.rousseau@insa-rouen.fr> (en français)

Toutes les informations ici présentes ont été compilées à l'origine par les membres du Web Design Group, principalement Arnoud "Galactus" Engelfriet, John Pozadzides, et Darin McGrew. La traduction hollandaise de cette FAQ a été réalisée par Rijk van Geijtenbeek, tandis que la traduction française à été faite par Cédrik Rousseau dans le cadre de l'UV traduction de FAQ du département ASI de l'INSA Rouen.

Des compléments ont été apportés par Boris Ammerlaan, Martin Atkins, Lori Atwater, Alex Bell, Stan Brown, Roger Carbol, Alex Chapman, Jan Roland Eriksson, Jon Erlandson, Mark Evans, Peter Evans, Alan Flavell, Rijk van Geijtenbeek, Lucie Gelinas, Bjoern Hoehrmann, Tina Marie Holmboe, Cliff Howard, Thomas Jespersen, Peter Jones, Nick Kew, Jukka Korpela, Simon Lee, Nick Lilavois, Neal McBurnett, Glen McDonald, Dan McGarry, Ken O'Brien, Timothy Prodin, Steve Pugh, Liam Quinn, Colin Reynolds, Kai Schätzl, Doug Sheppard, Sue Sims, Toby Speight, Warren Steel, Ian Storms, Peter Thomson, Daniel Tobias, and Diane Wilson.

Merci tout le monde

 


Home, Reference, FAQs, Tools, Design, Feature Article, BBS, Links

Copyright © 1996-1999. Web Design Group All rights reserved.