Des tableaux dans ses pages WEB

• Comment exploiter les tableaux pour soigner la mise en page, pour aligner, etc.

Réalisé avec KompoZer (disponible sur Mac - PC et Linux)

Contenu

1. Le problème
2. Comment réaliser un tableau ?
3. Comment utiliser un tableau pour encadrer un paragraphe ?
4. Comment utiliser un tableau pour mettre en page des images ?
5. Comment obtenir KmpoZer (Mac - PC et Linux) ?
   

Le problème

HTML est fruste :

Lorsqu'on veut réaliser une mise en page évoluée, les choix de base ne suffisent plus.

Fig. 1 : Choix de base du HTML pour la mise en page

Les images sont une solution lourde

Une possibilité est de réaliser une image avec l'ensemble ce qui permet de contrôler précisément l'aspect qu'elle aura pour l'usager. On crée dans un logiciel de dessin la mise en page, on la sauve en GIF, puis on l'intègre dans la page.(Cf. "Comment intégrer une image dans une page WEB")

Mais l'emploi d'images, qui sont généralement de taille considérable, peut ralentir le chargement de la page, surtout pour ceux qui sont connectés au réseau par modem.

Comment réaliser un tableau ?

Très simplement... en cliquant sur le bouton dans la barre d'icônes de KompoZer.

KompoZer crée alors un tableau de 2x2 cases et fait apparaître l'éditeur de tableaux.

Fig. 2 : un tableau de 2x2 cases.

Dans les cases du tableau on peut directement taper du texte, ou placer des images, on d'autres tableaux.

Distinguer la sélection du tableau ou d'une cellule.

Distinguons tout de même bien une sélection de l'ensemble du tableau fig 3a (ensemble des cellules encadrées de bleu) d'une sélection d'une seule cellule du tableau (fig 3b) (une seule cellule encadrée de bleu) .

Fig. 3a : Le tableau est sélectionné dans son ensemble.

Fig. 3a : La première cellule du tableau est seule sélectionnée.

Pour fusionner les cellules, il faut sélectionner les cellules concernées et avec le menu contextuel (clic droit), choisir Fusionner les cellules sélectionnées.

Pour ajouter une colonne dans un tableau déjà existant, il faut sélectionner une cellule adjacente et ensuite cliquer sur l'une des flèches , à gauche ou à droite selon les besoins. Pour éliminer une colonne, c'est la croix située entre les flèches qui le permet (supprime aussi le contenu de la colonne). Le procédé est identique pour les lignes.

Fig. 4a : L'éditeur de la cellule permet de régler les particularités de chaque cellule

L'éditeur de tableaux : Edition des cellules

Les principaux réglages (agrandir la cellule, le tableau, couleur de fond, etc.) peuvent se faire en double-cliquant sur la cellule concernée et en modifiant les paramètres de propriétés. L'éditeur de tableaux fait apparaître les propriétés de la cellule (cf. Fig 4a) permettant de régler les particularité de la cellule sélectionnée.

• Pour gérer la position verticale ou horizontale du contenu dans la cellule, utiliser le menu local Alignement du contenu
• Pour modifier la hauteur des lignes ou la largeur des colonnes dont cette cellule fait partie, régler les valeurs du menu Taille. Ces valeurs peuvent être définis.
• en % de la taille du tableau (qui peut changer si l'usager adapte sa fenêtre du browser, etc.)
• en pixels invariables

L'éditeur de tableaux : Propriétés du tableau

Une fois qu'on clique sur l'onglet Tableau (Fig. 4a), l'éditeur de tableaux apparaît. (cf. fig 4b)

Fig. 4b : L'éditeur de tableaux et les paramètres du tableau dans son ensemble.

• Pour gérer le nombre de lignes/colonnes, modifier les valeurs de Lignes et de Colonnes
• Pour régler la taille du tableau, attribuer une valeur aux champs Hauteur ou Largeur. Ces valeurs peuvent être définies :
  • en % de la taille de la fenêtre (qui peut changer si l'usager adapte sa fenêtre du browser, etc.)
  • en pixels invariables
• Pour régler l'épaisseur et la présence d'un cadre sur l'extérieur du tableau, utiliser le champ Bordure
• Pour régler l'espacement entre les cellules ajuster Marges
• Pour régler l'espacement à l'intérieur des cellules ajuster Remplissage

Comment utiliser un tableau pour encadrer un paragraphe ?

Pour créer un encadré, on peut utiliser un tableau.

Ce tableau aura une seule case et un cadre d'épaisseur non nulle.

Créer un tableau d'une cellule

Introduire les valeurs de Rows :1 et Columns : 1.
Cliquer dans la palette hors du champ valide et le résultat apparaît immédiatement.

Nous avons un tableau à une cellule

Introduire le texte

Ceci est du texte à encadrer, nous utilisons on tableau à une seule ligne et une seule colonne pour obtenir ce résultat. Ceci est du texte à encadrer, nous utilisons on tableau à une seule ligne et une seule colonne pour obtenir ce résultat. Ceci est du texte à encadrer, nous utilisons on tableau à une seule ligne et une seule colonne pour obtenir ce résultat. Ceci est du texte à encadrer, nous utilisons on tableau à une seule ligne et une seule colonne pour obtenir ce résultat. Ceci est du texte à encadrer, nous utilisons on tableau à une seule ligne et une seule colonne pour obtenir ce résultat.

Nous avons un tableau à une cellule avec le texte dedans.

Ajuster l'épaisseur du cadre.

Ceci est du texte à encadrer, nous utilisons on tableau à une seule ligne et une seule colonne pour obtenir ce résultat. Ceci est du texte à encadrer, nous utilisons on tableau à une seule ligne et une seule colonne pour obtenir ce résultat. Ceci est du texte à encadrer, nous utilisons on tableau à une seule ligne et une seule colonne pour obtenir ce résultat. Ceci est du texte à encadrer, nous utilisons on tableau à une seule ligne et une seule colonne pour obtenir ce résultat. Ceci est du texte à encadrer, nous utilisons on tableau à une seule ligne et une seule colonne pour obtenir ce résultat.

Nous avons un tableau à une cellule avec le texte dedans et a un cadre d'épaisseur 2, le padding a été augmenté à 6 pixels pour laisser respirer le texte dans le tableau.

Comment utiliser un tableau pour mettre en page des images ?

On peut aussi utiliser un tableau pour mettre en page une image.

Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à une seule ligne et deux colonnes pour obtenir ce résultat. Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à une seule ligne et deux colonnes pour obtenir ce résultat. Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à une seule ligne et deux colonnes pour obtenir ce résultat. Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à une seule ligne et deux colonnes pour obtenir ce résultat.Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à une seule ligne et deux colonnes pour obtenir ce résultat. Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à une seule ligne et deux colonnes pour obtenir ce résultat. Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à une seule ligne et deux colonnes pour obtenir ce résultat. Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à une seule ligne et deux colonnes pour obtenir ce résultat.

Dans la palette de l'éditeur de tableau, régler à 1 ligne et 2 colonnes, puis régler le cadre Bordure à zéro, pour obtenir un cadre invisible.

Pour une image "habillée" avec du texte

Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à 2 lignes et deux colonnes pour obtenir ce résultat. Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à 2 lignes et deux colonnes pour obtenir ce résultat.

Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à 2 lignes et deux colonnes pour obtenir ce résultat. Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à 2 lignes et deux colonnes pour obtenir ce résultat. Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à 2 lignes et deux colonnes pour obtenir ce résultat. Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à 2 lignes et deux colonnes pour obtenir ce résultat. Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à 2 lignes et deux colonnes pour obtenir ce résultat. Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à 2 lignes et deux colonnes pour obtenir ce résultat. Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à 2 lignes et deux colonnes pour obtenir ce résultat.

Fig. 5 : fusionner deux cellules

Cette manière de faire permet de faire des mises en page assez sophistiquées.

Comment obtenir KompoZer ?

Evidemment sur le WEB, à http://kompozer.net  (Disponible pour les plateformes PC - MAC et Linux).