Création d'un tableau dans l'éditeur HTML

La création d'un tableau est une opération fastidieuse mais permet l'agencement des textes et des images de manière précise.

 

Comment créer un tableau?

  • Etape 1: cliquer sur l'icône "Insérer une table"
    Après avoir cliquer sur cet icône, une fenêtre volante apparaîtra avec diverses options décrites ci-dessous. Cet icône est situé à droite des icônes "Insérer un lien" et "Insérer une image".
  • Etape 2: personnaliser les propriétés du tableau
    Dans la partie dimension sont demandées le nombre de colonnes et de lignes souhaitées. Il est recommandé d'insérer la valeur "0" aux autres champs de la partie disposition.
  • Etape 3: cliquer sur le bouton "OK" pour valider la création du tableau
    Le tableau est alors inséré à la position du curseur.
  • Etape 4: cliquer sur l'icône "Montrer les bordures"
    Si les bordures du tableau ne sont pas visibles, il faut cliquer sur l'icône "Montrer les bordures". Si les bordures ne sont toujours pas visibles, cliquer une seconde fois ou sur l'icône de sauvegarde en forme de disquette situé tout en haut de l'écran.

Le concept de tableau

Un tableau est une matrice, comme dans Microsoft Word ou même Microsoft Excell. Les textes et les images peuvent être disposés de manière précise à l'intérieur de cellules. Les celllules sont liées les unes autres formant ainsi des lignes et des colonnes. La disposition du contenu est contrôlée par diverses propriétés telles que la hauteur, l'alignement horizontal et l'alignement vertical. Ces propriétés s'appliquent aux tableaux, aux lignes et aux colonnes.

Propriétés d'un tableau

Les propriétés d'un tableau

Seules les propriétés les plus utiles sont expliquées ci-dessous. A titre informationel, les dévelopeurs d'Adaltas n'utilisent pas eux-mêmes les autres propriétés.

  • "Disposition" > "Largeur"
    Ce champ est sans doute le plus important. Une largeur de 100% permet au tableau de s'étirer sur toute la largeur disponible. Une largeur en pixel permet le contrôle précis de la largeur du tableau. Ce champs peut être laissé vide si le tableau doit s'adapter naturellement à son contenu.
  • "Disposition" > "Hauteur"
    Ce champ doit être laissé vide dans la majeure partie des scénarios. Une valeur en pixel peut être indiqué dans la mesure ou il est obligatoire de contrôler la hauteur du tableau, par exemple lorsqu'une image est elle-même composée de plusieurs images. Attention, il est fortement déconseillé d'indiquer une valeur en pourcentage car son comportement dépendra du Navigateur Internet des visiteurs.
  • "Alignement"
    L'alignement horizontal et vertical s'applique aux textes et des images présent dans les cellules. Il est recommandé d'éditer les propriétés de chaque cellule plutôt que de spécifier ce champ.
  • "Espacement" > "Entre les cellules"
    L'espacement entre les cellules permet de créer un espace à l'extérieur des cellules. Une couleur de fond appliquée à une ou plusieurs cellules ne s'applique pas à cet espace.
  • "Espacement" > "Dans les cellules"
    Ce champs permet de créer un espace à l'intérieur des cellules. La couleur de fond appliquée aux cellules s'applique aussi à cet espace.
  • "Cadre et bordures" > "bordures"
    Plusieurs options permettent de personnaliser l'apparence du cadre du tableau. Pour des raisons esthétique, Adaltas recommande une utilisation limitée de cette option en indiquant une épaisseur de 1 pixel dans le champ suivant.
  • "Cadre et bordures" > "Epaisseur"
    Une épaisseur de 0 pixel fait disparaître le cadre. Attention, dû à un problème avec l'éditeur HTML, il est nécessaire de re-préciser cette valeur à chaque fois que les propriétés d'un tableau sont éditées.