Pourquoi créer un tableau ?
Il arrive parfois que l'on souhaite insérer un tableau, pour quoi faire ?
-un tableau "classique" de données chiffrées ou autres
-un tableau "invisible" (sans bordure) pour améliorer la présentation (des photos bien positionnées, un article en 2 colonnes, un article avec des "blocs d'information")...
-A savoir: pour insérer un tableau de chiffres conçu avec un tableur, l'idéal est d'importer votre tableau (Excel ou Calc avec LO) dans Google Sheet ou mieux de réaliser directement votre tableau en ligne dans Google Sheet). Ensuite vous pourrez l'intégrer dans votre article de manière dynamique (une modification du tableau sera visible immédiatement en ligne).
Voir notre dossier avec démo d'un tableau intégré dans l'article "Intégrer un document de Drive
Comment créer un tableau
2-avec un outil gratuit en ligne puis de copier le code HTML correspondant pour ensuite le coller dans votre article. C'est une solution simple et rapide qui permet de créer un tableau "plus raffiné" qu'avec Blogger. Mais vous devez avant tout savoir comment insérer du code HTML dans un article ! Voir notre dosssier
C'est une nouveauté de Blogger 2020 !
mais depuis peu Blogger a supprimé cet outil....
Lorsque vous "insérez un tableau", Blogger insère automatiquement un tableau (aligné à gauche) avec 2 lignes et 4 colonnes : à vous de :
- le MODIFIER en ajoutant/supprimant des lignes ou colonnes
- d'AJOUTER du contenu (texte, chiffres, photos...)
- si vous voulez apporter apporter des modifications, il faudra modifier le code HTML
Voici le code de base de Blogger - présenté en mode html : c'est peu clair malgré les couleurs
- ici , mis en forme pour mieux comprendre
- Comprendre le code
- <table...> : cette balise annonce la création d'un tableau
- immédiatement la mise en forme du tableau est indiquée
- table border ="1" => mettre 0 pour ne pas afficher de bordure
- bordercolor="#888" => code couleur bordure, ici en gris (pas de changement si modification)
- cellspacing="0" => espacement entre les cellules (pas de changement si modification)
- border-collapse détermine si les bordures d'un tableau sont séparées ou fusionnées. Quand elles sont séparées, chaque cellule du tableau a ses propres bordures, distinctes. Quand elles sont fusionnées, les bordures des cellules sont partagées : donc ici, par défaut, elles sont fusionnées
- border-color: rgb(136, 136, 136) => couleur bordures extérieures et intérieures (ici engris)
- border-width: 1px => épaisseur bordure extérieure du tableau
- NOTA : voir dernière partie pour ajouter du code pour améliorer ex mettre une largeur fixe avec width=60%...
- la balise <tbody> annonce le contenu du tableau
- <tr> indique une ligne
- <td> indique une cellule qui contiendra les informations (chiffres ou texte ou image....
- Pour centrer le tableau, il suffit d'ajouter <center> <table......>.....</table> </center>
Exemple :
| CELLULE 1 | cellule 2 | 3 | 4 |
Un site en ligne très simple que nous conseillons pour débuter:
https://divtable.com/generator/
attention : ne pas le mettre en français
autres sites pour obtenir des tableaux plus perfectionnés
-https://www.quackit.com/html/html_generators/html_table_generator_old.cfm
ou
-http://www.textfixer.com/html/html-table-generator.php
-http://www.tablesgenerator.com/html_tables
(attention aux sites qui proposent des tableaux avec un CSS que l'on ne peut utiliser dans un article simple de Blogger)
Méthode avec Divtable:
=> le laisser en anglais ( pou réviter des erreurs de code)
=> créer un tableau simple sans utiliser le "styler"
que vous devez modifier
Nota : ne pas utiliser le "styler" qui nécessite un fichier css en plus du tableau
le coller dans votre article en mode HTML
pour obtenir ceci :
ATTENTION : ne jamais faire un copier coller du tableau que l'on aperçoit à gauche : on collerait un code inexploitable !
VOIR UNE PAGE DE DEMO de TABLEAUX réalisés avec Divtable afin de bien comprendre les possibilités
Il faudra seulement indiquer dans le code l'espace entre les cellules via :
A-concevoir un tableau... simple
- A-Conserver "Table tags"
- B-sélectionner à droite les cellules du tableau nécessaires (ici 3/2)
- par défaut
- Border : pas de bordure (border=0)
- width : pas de largeur définie (elle s'adaptera au contenu)
- cell Padding: espace pour le contenu des cellules
- Vous voyez en bas à gauche le résultat
- Vous voyez en bas à droite le code html correspondant
que vous devez modifier
- Border : 1 pixels (on voit la présence d'une bordure autour des cellules, c'est nécessaire pour remplir ensuite le tableau, si border = 0, on ne verrait plus le tableau ! par ex pour afficher des photos)
- width = largeur
- px : largeur fixe en pixels (ici : 600, mais on peut aussi ne rien mettre, le tableau s'adaptera au contenu)
- % : espace proportionnel en % de largeur par rapport au containeur utilisé (ici, avec Blogger, l'espace du bloc "principal des articles")
- cell Padding: espace pour le contenu des cellules (ici =2)
B- Récupérer le code hml
le coller dans votre article en mode HTML
- 1-L'article n' a pas encore de texte
- En mode HTML :
- Taper : <br>
- ceci permettra d'écrire éventuellement un texte avant le tableau
- Coller le code du tableau en dessous de <br>
- 2-L'article contient du texte !
- Il est difficile de se repérer dans le code !
- Passer en Mode "Rédiger" et à l'endroit ou vous souhaitez voir le tableau, passer un ligne et insérer une ligne de zéro
0000000000000000000000000000000000000000000000 - Repasser en mode HTML et repérer facilement vos 0000000000000. Puis, à leur place, coller votre code html
pour obtenir ceci :
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
Ensuite, en mode "Rédiger" vous pourrez compléter le contenu des cellules avec des chiffres, du texte...des photos (voir ci-dessous).
Pour faire disparaitre, en mode html, les "bordures du tableau" , vus de vez, après avoir rempli votre tableau, modifier le code html
<table border="1"...
en
<table border="0"
Vous pouvez aussi utiliser un logiciel éditeur HTML (Nvu ou Kompozer) pour éditer votre tableau (voir dernière partie)
VOIR UNE PAGE DE DEMO de TABLEAUX réalisés avec Divtable afin de bien comprendre les possibilités
C-Ex : Pour insérer des images /photos
Il faut utiliser un tableau et insérer l'image dans la cellule ou remplacer le texte par votre image.
Attention vos images doivent avoir la même taille !
Attention vos images doivent avoir la même taille !
Comme ci-dessus, insérer un tableau sur fond blanc avec bordure, avec des cellules disposées comme vous le souhaitez pour positionner vos images
| cellule1 | cellule2 |
| cellule3 | cellule4 |
Puis insérer votre image de manière classique dans chaque cellule pour obtenir:
 |  |
 |  |
Pour faire disparaitre, en mode html, les "bordures du tableau" modifier le code html
<table border="1"...
en
<table border="0"
pour obtenir:
| |
| |
D- Ex: Pour concevoir un texte d'article/page en 2 colonnes
Il faudra seulement indiquer dans le code l'espace entre les cellules via :
<TABLE cellspacing=?>
puis supprimer l'épaisseur de la bordure pour obtenir :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget tincidunt massa. Nullam justo nisi, semper pretium nunc ac, semper euismod enim. Etiam ornare ac mauris vitae tincidunt. Sed ullamcorper turpis nec augue posuere, eget eleifend erat euismod. Vestibulum sit amet scelerisque elit. Suspendisse vehicula tempor urna, id vestibulum ipsum sagittis eget. Morbi ut libero turpis. Nulla lobortis faucibus odio sed posuere. Aliquam sit amet enim pharetra, viverra dui ut, vestibulum massa. Donec porttitor ut odio nec hendrerit. Phasellus vitae imperdiet lorem, quis consequat augue. Sed hendrerit egestas porta. Donec non ultrices mi, vehicula feugiat magna. Cras in sem diam. Cras vehicula a risus quis commodo. Vestibulum pulvinar dolor non dignissim ullamcorper.
|
Donec ac iaculis elit, at facilisis tortor. Duis nisi metus, elementum eget lacus sit amet, auctor interdum ligula. Aliquam dignissim nulla id laoreet semper. Nulla ut ullamcorper ipsum, ut porttitor orci. Proin scelerisque ipsum eget erat congue sagittis. Aliquam lectus risus, porta non faucibus ut, luctus quis leo. Suspendisse augue ante, placerat a lectus at, maximus ornare lacus. Integer congue venenatis dolor. Aenean non dolor dictum magna sodales feugiat. Fusce maximus vestibulum libero, placerat accumsan augue sodales et. Pellentesque ultrices elit risus, sed pharetra lacus porta at. Morbi vestibulum neque id ipsum vulputate consectetur. Sed condimentum augue quam, vitae porttitor mi mollis id. Maecenas dignissim, erat vel ultrices commodo, nisi ex convallis leo, vitae suscipit neque lectus in leo.
|
A savoir : Blogger modifie parfois le code "classique" html de tableau...
 <br /> <table border="1"> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </tbody> </table>
Créer un tableau en ligne permet uniquement de concevoir un tableau simple : pour l'améliorer il faut obligatoirment passer par le code HTML, voir quelques exemples ci-dessous pour améliorer l'aspect du tableau et des cellulles
=>qu'il faudra indiquer ainsi dans le code Html, première ligne après <table...
<table bgcolor="yellow" border="1" style="width: 60%">
On peut gérer la taille du tableau, mais on peut aussi gérer la taille des cellules. Utile pour affecter la même taille à chacune d’elles malgré un texte de taille différente (sinon le tableau va s’adapter à la taille du texte). Il suffit d’appliquer le paramètre sur la première ligne avec le paramètre « witdh » comme pour le tableau. Et comme pour le tableau la valeur renseignée peut-être en pixels ou en %.
ici le code à utiliser pour que chaque cellule occupe 33% de largeur <TD width=33%>cellule1</TD>
exemple
<CENTER><TABLE width=60% border=1>
<TR><TD width=33%>cellule1</TD><TD width=33%>cel. 2</TD><TD width=34%>3</TD</TR> <TR><TD width=33%>cellule1</TD><TD width=33%>cel. 2</TD><TD width=34%>3</TD></TR> </TABLE></CENTER
le code à utiliser pour positionner le contenu
-align pour l'alignement horizontal avec les valeurs : right (alignement à droite), center (centré) ou left (alignement à gauche).
-valign pour l'alignement vertical
avec les valeurs : top (en haut), middle (centré verticalement) ou bottom (en bas). exemples
<br /> <center> <table border="1" style="width: 60%;"> <tbody> <tr> <td align="center" colspan="3">TITRE au centre</td> </tr> <tr> <td width="33%">Texte 1</td><td width="33%">Texte 2 </td> <td align="right" width="34%">texte 3 à droite</td> </tr> </tbody></table> </center> Nota : colspan => indique que la cellule courante s'étend sur plusieurs colonnes, ici 3.(idem avec rowspan => la cellule s'étend sur plusieurs lignes.
Le mini tableau ci-dessus est centré avec :
la balise <center> juste avant le
descriptif du tableau qui commence par <table...
et mettre après le code du tableau la balise </center> comme dans l'exemple de mini tableau html : <br /> <center> <table border="1" style="width: 60%;"> <tbody> <tr> <td align="center" colspan="3">TITRE au centre</td> </tr> <tr> <td width="33%">Texte 1</td><td width="33%">Texte 2 </td> <td align="right" width="34%">texte 3 à droite</td> </tr> </tbody> </table> </center>
3-AUTRE POSSIBILITE : utiliser un freeware EDITEUR HTML comme KOMPOZER (télécharger + tutoriel simple)
Vous créer uniquement un tableau selon vos souhaits puis vous récupérez le code HTML
Le résultat
En mode source
copier le code de <table......> jusqu'à </table>
coller ce code en mode HTML dans votre article pour obtenir :
vous pouvez ajuster le code (selon vos compétences) en modifiant
- la largeur en pixels (width) - l'épaisseur de la bordure (border) si 0 pas de bordure - les marges entre cellules (cellpadding et cellespacing) ICI:
<table style="text-align: left; width: 600px;" border="1"
cellpadding="2" cellspacing="2">
COMPLEMENTS sur le code HTML:
http://www.snv.jussieu.fr/archambault/cours/html/textes/tableaux.html
http://www.lehtml.com/html/tableaux.htm https://www.lehtml.com/html/cellules.htm formater les cellules en largeur | |||||||||||||||||||||||||||||
