LES TABLEAUX. Créer un tableau élémentaire

Dimension: px

Commencer à balayer dès la page:

Download "LES TABLEAUX. Créer un tableau élémentaire"

Robert Aubin
il y a 8 ans
Total affichages :

1 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 Maintenant, ajoutons une nouvelle ligne au tableau : colonne 1 ligne 1 colonne 2 ligne 1 colonne 3 ligne 1 colonne 1 ligne 2 colonne 2 ligne 2 colonne 3 ligne 2 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 colonne 1 ligne 2 colonne 2 ligne 2 colonne 3 ligne 2 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> colonne 1 ligne 2 colonne 2 ligne 2 colonne 3 ligne 2

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 :

2 Dans une cellule d un tableau, on peut mettre du texte et/ou une image. Exemple : Ce qui va donner : 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. 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.

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.

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

cette cellule est fusionnée avec celle de gauche.

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) Titre (1,3) Titre (1,4) Cellule (2,1) Cellule (2,4) Cellule (2,2) 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) 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.

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

5 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> (1,1) (1,2) (1,3) (1,4) (2,1) <TD ROWSPAN=2 COLSPAN=2 WIDTH=50% BGCOLOR="#ff9966"> Cellule (2,2) (2,4) (3,1) (3,4) (4,1)

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> (1,1)</B></FONT></P>

6 (4,2) (4,3) (4,4) (5,1) (5,2) Cellule(5,3) (5,4) </TABLE> </BODY> Vérifier, dans la partie publique du site, que vous obtenez bien le résultat attendu.

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

Documents pareils

Introduction à Expression Web 2

Introduction à Expression Web 2 Définitions Expression Web 2 est l éditeur HTML de Microsoft qui répond aux standard dew3c. Lorsque vous démarrez le logiciel Expression Web 2, vous avez le choix de créer