Vous êtes ici: Accueil / Informatique / Site Web / Dreamweaver 8 / Tableaux

Tableaux

Comme le nom l'indique un tableau est constitué de lignes et de colonne. Il permet de réaliser une présentation structurée de son contenu.

  1. Création d'un tableau
  2. Propriétés
  3. Dimension
  4. Regrouper des cellules

Création d'un tableau

Au niveau de la barre de menu sélectionnez Commun

tabclic

puis cliquez sur l'icône tableau et vous envoie sur le menu de configuration.

tabconf

Remplir les cases correspondantes:

  • Taille du tableau
  • Nombre de ligne et de colonne
  • Largeur du tableau est exprimée en % ou en pixel (100% ou fixe 600 pixel )
  • Largeur de bordure permet de réaliser un contour de votre tableau
  • Marge intérieure des cellules permet de réduire la dimension des cellules
  • Espace entre les cellules permet d'encadrer les cellules

Sélectionner En Tête sur aucun

Si vous remplissez la case Légende vous obtenez un titre à votre Tableau

tabpre

 

 

Propriété d'un tableau

Si vous regarder en bas à gauche de votre page vous voyez des mots entre crochets

tabhtml

Ceci vous indique où vous vous trouvez dans la page. Sélectionner les différents mots suivants et regarder le comportement

  • <td> représente la cellule active (là ou votre curseur clignote)
  • <tr> sélectionne la ligne où se trouve la cellule active
  • <table> sélectionne tout le tableau correspondant
  • <body> sélectionne toute votre page

En faisant cette manipulation vous observez que la fenêtre Propriétés change en fonction de la sélection.
Si la représentation de votre tableau ne vous convient pas, alors modifiez ces caractéristiques dans la fenêtre Propriétés (Voir chapitre Fenêtre Propriété Tableau).
Ceci peut ajuster les dimensions de chaque cellule avec (H) et (L) avec des valeurs numériques.

 

 

Dimension d'un tableau

Dans l'image de présentation vous observez une indication concernant les dimensions de votre tableau.
Le tableau à une Largeur (L) de 400 pixel ce qui veut dire que le tableau ne sera pas plus grand ou plus petit et une Hauteur (H) à vide (Le tableau sera ajusté par défaut)
Si vous transformer la valeur (L) à 100 % le tableau prendra automatiquement la taille de votre navigateur.

Nous pouvons maintenant sélectionner une ligne ou une colonne
les cases (H) et (L) sont vide
En remplissant une taille vous fixez la dimension de celle-ci.

Attention de respecter la taille de votre tableau. Somme des cellules doit être sensiblement égale à la longueur ou la largeur du tableau (L'indicateur vous propose une valeur contenu entre parenthèse - c'est celle qui sera réellement retenu à l'affichage)

Si non mettons par exemple 133 pixel de (L) sur chaque cellule la valeur entre parenthèse est de 111. Bizarre! Non, il ne faut pas oublier les valeurs d'espacement de remplissage et de bordure entre les cellules

  1. Bordure : 2 x Epaisseur + (Nbre de cellule) x 2 [Ex: 2x5 + 3x2 = 16]
  2. Remplissage ou Marge : 2 x Epaisseur x (Nbre de cellule) [Ex: 2x5x3 = 30]
  3. Espace entre Cellules : Epaisseur x (Nbre de cellule + 1) [Ex: 5x(3+1) = 20]

la somme de 1. + 2. + 3. = 66

Et voila 333 + 66 = 399 c'est très proche de 400. C'est pour cela que Dreamweaver vous propose une cellule à 112 pixel de large

INDICATION: si les champs sont vides les valeurs par défaut sont sensiblement égales à 0 pixel pour Bordure et Remplissage et de 2 pixel pour l'espacement entre les cellules.

Si votre tableau à une largeur total en % alors il faut au moins une des colonnes en mode %

Exemple 1 - Deux colonnes fixes et une colonne variable

  • Col 1 = 100 pixel (Largeur fixe)
  • Col 2 = 100% (Largeur variable)
  • Col 3 = 100 pixel (Largeur fixe)

Exemple 2 - Trois colonnes identique

  • Col 1 = 33 % (Largeur variable)
  • Col 2 = 33 % (Largeur variable)
  • Col 3 = 33 % (Largeur variable)

NOTE: Vérifiez bien à ne pas dépasser la largeur total de votre table

 

 

Regrouper des cellules

Pour regroupes des cellules entre eux et en former plus qu'une seule rein de plus simple

Avec la souris vous maintenez le clic gauche enfoncé et vous sélectionnez les cellules désirées en passant par dessus.
Ensuite vous allez dans la fenêtre Propriété et vous sélectionnez l'icône combiner la sélection rectangulaire des cellules.

tabcombi

Et voila!

Pour enlever le regroupement, cliquez sur l'icône juste à coté à droite.