les tableaux - Collège Albert Ball

Transcription

LES TABLEAUX
Il y a deux façons de créer dans un article :
 directement dans SPIP pour des tableaux élémentaires
 avec un éditeur html pour des tableaux complexes.
Créer un tableau élémentaire
Les colonnes du tableau sont délimitées par le caractère « pipe » | obtenu par la touche Alt Gr et la touche "6" en 1ère
ligne du clavier alphabétique.
Pour créer par exemple un tableau de 3 colonnes, on doit saisir 4 fois ce caractère (4 délimiteurs = 3 intervalles,
rappelez-vous les histoires de piquets et de fil de fer, à l’école primaire)
Nota : on peut créer un tableau d’une seule colonne, avec 2 délimiteurs. Dans ce cas si ce tableau n’a qu’une seule
ligne, on a créé un texte encadré.
Entre chaque délimiteur, on saisit le texte qui doit se trouver dans la cellule ainsi délimitée.
Exemple :
|colonne 1|colonne 2|colonne 3|
Ce qui va donner comme résultat :
Maintenant, ajoutons une nouvelle ligne au tableau :
|colonne 1 ligne 1|colonne 2 ligne 1|colonne 3 ligne 1|
Maintenant, améliorons la présentation en mettant en gras le texte de chacune des cellules de la première ligne
(comme avec un traitement de texte : sélectionner les mots et clic sur l’icone [B] en haut du texte.
|Titre 1|Titre 2|Titre 3|
Remarque : Pour centrer les titres au milieu des cellules, écrire les balises <center> et </center> de part et d’autre de
chaque titre.
|<center>Titre 1</center>|<center>Titre 2</center>|<center>Titre 3</center>|
Dans une cellule d’un tableau, on peut mettre du texte et/ou une image.
Exemple :
|Titre 1|Titre 2|Titre 3|
|colonne 1 ligne 2|colonne 2 ligne 2|<imgxxx>|
Remarque : < imgxxx> est le code image fourni par SPIP après avoir téléchargé l’image.
Ce qui va donner :
Convertir un tableau simple créé avec Word ou Open Office en un tableau pour SPIP
Créez le tableau dans le traitement de texte selon la méthode habituelle.
En créant le tableau, laissez une première et une dernière colonne vides (c’est à dire 2 colonnes de plus que
nécessaire pour le tableau).
Quand les cellules du tableau sont remplies, cliquer dans une des cellules puis aller dans le menu "Tableau", puis
"Convertir" et choisir "Tableau en texte".
Dans la fenêtre "Convertir un tableau en texte" qui s’ouvre, sélectionner l’option "autre" et saisir dans la case le
caractère | (Alt Gr + « 6 »).
Cliquer sur OK.
L’opération est terminée.
Il suffit alors de copier-coller l’ensemble dans le corps de l’article SPIP.
Définir la largeur des colonnes d’un tableau de SPIP
Dans SPIP on ne peut pas modifier la largeur des colonnes.
On peut toutefois forcer la largeur des colonnes avec cette petite astuce.
1- on crée le tableau selon la méthode habituelle.
2- dans le répertoire des images, on installe un fichier nommé pixel.gif, créé avec la dimension de 1 pixel en largeur
et 1 pixel en hauteur, et on le place par exemple dans le répertoire IMG/gif.
3- dans les cellules de la première ligne du tableau, on insère ce code html.
Exemple : pour avoir une colonne de 200 pixels de largeur.
<img src="IMG/gif/pixel.gif" height="1" width="200">
On peut ainsi forcer la largeur de chacune des colonnes, par la présence de cette image "pixel" invisible et de
dimension réglable par le nombre de pixels choisi dans la valeur "width".
La même image invisible "pixel.gif" peut être utilisée un nombre illimité de fois, dans n’importe quel tableau de
n’importe quelle page.
Fusion des cellules d’un tableau
Pour fusionner deux cellules, on utilise les caractères > ou ^.
Explication de la syntaxe pour la fusion des cellules
Si le contenu d’une cellule :

est un caractère « < » (caractère « plus petit que ») seul (sans espaces entre les « | » et ce caractère) cela
indique que cette cellule est fusionnée avec celle de gauche.

est un caractère « ^ » (caractère « exposant » ou « accent circonflexe ») seul (sans espaces entre les « | » et
ce caractère) cela indique que cette cellule est fusionnée avec la cellule juste au-dessus (la cellule de la
même colonne mais de la ligne précédente).
Deux exemples de fusions de cellules
1. Fusions simples
|{{Titre(1,1)}}|<|{{Titre(1,3)}}|<|
|cellule(2,1)|cellule(2,2)|cellule(2,3)|<|
|^|cellule(3,2)|<|cellule(3,4)|
|cellule(4,1)|<|<|^|
|cellule(5,1)|cellule(5,2)|cellule(5,3)|cellule(5,4)|
Explications :

Première ligne (l’entête) :
o
la deuxième cellule fusionne avec la première.
o
la quatrième cellule fusionne avec la troisième.

Deuxième ligne : dans la cellule(2,4), le caractère « < » indique que la cellule (2,4) fusionne avec la cellule(2,3).

Troisième ligne :
o
dans la première cellule(3,1), le caractère « ^ » indique que cette cellule(3,1) fusionne avec la
cellule(2,1) du dessus.
o

dans la cellule(3,3), le caractère « < » indique que la cellule (3,3) fusionne avec la cellule(3,2).
Quatrième ligne :
o
les deux caractères « < » indiquent que les 3 premières cellules n’en font qu’une.
o
le caractère « ^ » de la quatrième cellule(4,4) indique que cette dernière fusionne avec la dernière
cellule(3,4) de la ligne précédente.

Cinquième ligne : pas de fusion
D’où l’affichage suivant du tableau :
2. Double fusion
|{{Titre(1,1)}}|{{Titre(1,2)}}|{{Titre(1,3)}}|{{Titre(1,4)}}|
|cellule(2,1)|cellule(2,2)|<|cellule(2,4)|
|cellule(3,1)|^|cellule(3,4)|
|cellule(4,1)|cellule(4,2)|cellule(4,3)|cellule(4,4)|
| cellule(5,1)|cellule(5,2)|cellule(5,3)|cellule(5,4)|
La cellule (2,2) est fusionnée avec la suivante.
La cellule (3,2) est fusionnée avec la cellule obtenue précédemment : du coup, la cellule (2,3) n’existe pas.
On obtient donc un pavé de 2*2 cellules au milieu du tableau.
D’où l’affichage suivant du tableau :
Quelques conseils et précisions sur les tableaux
Important : Pour que le tableau s’affiche correctement dans votre article, il est impératif de le faire précéder et suivre
d’une ligne vide.
Un tableau peut être placé dans le "Chapeau" ou dans le "Texte" d’un article.
La taille des caractères des textes situés dans les cellules d’un tableau est un paramètre standard pour l’ensemble
du site. Il ne peut pas être modifié par les rédacteurs.
Sauf en utilisant la méthode ci-dessus, la largeur des colonnes se règle automatiquement en fonction de la quantité
de texte, ou de la largeur des images qui sont placées dans les cellules.
Créer un tableau complexe en HTML
Dans SPIP, lorsque vous souhaitez créer un tableau sans bordure, avec des cellules de différentes couleurs, des
polices de tailles différentes ou un tableau très complexe c’est impossible. Mais vous pouvez alors faire appel à votre
traitement de texte et au code HTML.
Exemple :
Supposons que vous vouliez le tableau précédent sous cette forme :
Titre (1,1)
Titre (1,2)
Cellule (2,1)
Titre (1,3)
Cellule (2,4)
Cellule (2,2)
Cellule (3,1)
Titre (1,4)
Cellule (3,4)
Cellule (4,1)
Cellule (4,2)
Cellule (4,3)
Cellule (4,4)
Cellule (5,1)
Cellule (5,2)
Cellule(5,3)
Cellule (5,4)
Les différentes étapes :

Dans Open Office, créer votre tableau.

Enregistrer ce document en choisissant comme format « Document HTML »

Clic droit sur le document que vous venez d’enregistrer puis, dans le menu contextuel qui s’affiche, choisir
« Ouvrir avec ... » et choisissez votre navigateur habituel (Internet Explorer, Mozilla Firefox ....)

Une fois, la page ouverte dans ce navigateur, cliquer sur « Affichage » dans la barre de menus en haut du
navigateur puis « Source » si vous utilisez Internet Explorer ou «Code source de la page » si vous utilisez
Mozilla Firefox

Une page s’affiche avec tout le code html de la page web que vous venez de créer.

Repérer dans cette page la ligne commençant par la balise <body> et sélectionner avec la souris tout le code,
y compris cette balise jusque la ligne se terminant par la balise de fin </body>, y compris cette balise.

Clic droit puis « Copier »

Dans la zone de texte de l’article, clic droit là où vous voulez insérer le tableau, et choisir « Coller »

Enregistrer l’article.
Ici dans notre exemple, avec Mozilla Firefox, on obtient :
<BODY LANG="fr-FR" DIR="LTR">
<TABLE WIDTH=100% BORDER=1 BORDERCOLOR="#000000" CELLPADDING=4 CELLSPACING=0>
<COL WIDTH=64*>
<COL WIDTH=64*>
<COL WIDTH=64*>
<COL WIDTH=64*>
<TR>
<TD WIDTH=25% BGCOLOR="#666666">
Titre
(1,1)
</TD>
(1,2)
</TD>
(1,3)
</TD>
(1,4)
</TD>
</TR>
<TR>
<TD WIDTH=25% BGCOLOR="#ccccff">
Cellule
(2,1)
</TD>
<TD ROWSPAN=2 COLSPAN=2 WIDTH=50% BGCOLOR="#ff9966">
Cellule
(2,2)
</TD>
<TD WIDTH=25% BGCOLOR="#ff00ff">
Cellule
(2,4)
</TD>
</TR>
<TR>
(3,1)
</TD>
(3,4)
</TD>
</TR>
<TR>
(4,1)
</TD>
<TD WIDTH=25% BGCOLOR="#94bd5e">
(4,2)
</TD>
(4,3)
</TD>
(4,4)
</TD>
</TR>
<TR>
(5,1)
</TD>
(5,2)
</TD>
Cellule(5,3)
</TD>
(5,4)
</TD>
</TR>
</TABLE>
 

</BODY>

Vérifier, dans la partie publique du site, que vous obtenez bien le résultat attendu.
Remarque :
Si vous choisissez votre tableau sans bordure et les cellules avec un fond de la même couleur que le fond de page,
vous aurez alors un tableau invisible, ce qui est bien pratique pour positionner des images et du texte relatif à ces
images.
La couleur de fond de page du site est R=255 V=255 B=206 (pour l’obtenir, il faut accéder à la boite de dialogues
« Couleur » et choisir « Personnalisé ». Sélectionner la palette ou le mode RVB et rentrer les valeurs indiquées)

les tableaux - Collège Albert Ball

Transcription

Documents pareils

HTML tableaux couleur HTML 32

HTML 31

Partie HTML TD 5 : Listes et tableaux

Le module EPG de Progdvb

Logiciels AgrÃ©Ã©s par la Commission de pilotage de la

Quatuor Stomp

Les principales balises Html

Télévendeur, call center / web center, rabat

Ajouter un dictionnaire français dans TeXnic Center - Limos

Dates de séjour 2014 / BENEFICIO CLUB / CENTER PARCS Code