Créer et manipuler des tableaux

dimanche 2 septembre 2007
par Jean-Michel FREDERIC
popularité : 2%

 Précaution

S’il est vrai qu’il est préférable de structurer une page Web grace à des balises DIV et une feuille de styles CSS, il est aussi vrai que cela est d’une telle complexité qu’il reste plus efficace, pour les non programmeurs, de structurer les pages grace à des tableaux. Ce qui n’est déjà pas simple si l’on est exigeant quant à la présentation.

 Créer un tableau simple

  • Soit par l’outil "Tableau"
  • Soit par le menu
    • Tableau / Insérer / Tableau / Précisément

 Ajouter, supprimer...

Manipuler tableau, lignes, colonnes, cellules

  • Par le menu
    • Tableau / Insérer / ...
      • Pour ajouter une ligne, appuyez sur la touche tabulation lorsque vous êtes en fin de tableau
    • Tableau / Sélectionner / ...
      • Il est toujours plus précis de sélectionner un élément du tableau en passant par le menu qu’en le sélectionnant à la souris !
    • Tableau / Supprimer
  • Observer
    • Observez dans la barre d’état (tout en bas de NVU) les balises à partir de la balise <table>

 Fusionner, scinder

Fusionner ou scinder des cellules

  • Par le menu
    • Tableau / Fusionner
    • Tableau / Scinder

 propriétés d’un tableau

Modifier les propriétés du tableau

Tableau / Propriétés / Tableau

  • Définir la largeur du tableau
    • Fixe : en pixels
    • Variable : en pourcentages (sera variable suivant la définition d’écran du visiteur de votre site)
    • Travailler de préférence en largeur variable (ex : 100 %)
    • La largeur des colonnes sera gérée dans l’onglet cellules
  • Définir l’épaisseur des bordures
    • Bordure à 0 pixels = bordure non visible
  • Concernant les bordures, les paramètres suivant seront définis plus tard dans une feuille de style
    • Marges, Espacements, style de trait et couleur des bordures
  • Modifier la couleur de fond du tableau
    • Soit en cochant la case transparent (par défaut)
    • Soit en choisissant une couleur de fond (prenez l’habitude de noter (sur une feuille de papier) en hexadécimal les couleurs que vous utilisez)

 un tableau dans un tableau

Insérer un tableau dans un tableau

  • Vocabulaire : tableaux imbriqués
  • Tableau / Insérer / Tableau

 Manipuler des cellules

Tableau / Propriétés / Cellules

  • Commencer par indiquer l’objet que l’on paramètre
    • Sélection = Cellule ou Ligne ou Colone
  • Définir la largeur des colonnes
    • Fixe : en pixels
    • Variable : en pourcentages (sera variable suivant la définition d’écran du visiteur de votre site)
    • Travailler de préférence en largeur variable (ex : 63 %)
  • Définir l’alignement vertical du contenu
  • Définir la couleur de fond
  • Identifier que l’on peut passer à la cellule suivante pour la paramétrer
  • Paramétrer le style de cellule
    • Style de cellule = normale ou titre
    • A quoi sert de paramétrer le style "Cellule de titre" ? 
      • A prendre de bonnes habitudes (normalisation XML)