tecfa
presentation people dispositif projects ressources




Des tableaux dans ses pages WEB


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 icône NVU pour faire un tableau 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.

tableau de 2X2 cases
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) .

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

une seule cellule sélectionnéeFig. 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 ajouter des cellules, à 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.

propriétés de la cellule

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.

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)

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

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.

bébé à l'ordi

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.

Inet

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.

Dans la palette de l'éditeur de tableau, régler à 2 ligne et 2 colonnes, puis régler le cadre Bordure à zéro, pour obtenir un cadre invisible. Ensuite, fusionner les 2 cases inférieures (en sélectionnant les deux cellules à fusionner) pour en faire une seule colonne plus large (Fig. 5).

fusionner deux cellules

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).

- F. Lo - adapté par M.V.