/fdata%2F0137516%2Favatar.jpg){kind=avatar}
Un outil existe dans l'éditeur d'Over-Blog pour faire des tableaux.
Chouette !!
Un bémol pourtant, si vous testez des placements, couleurs, polices, bordures etc. en espérant arriver à un résultat à priori satisfaisant, sachez qu'à coup sûr la source (html) de ce tableau est devenue un grand n'importe quoi.
Il vaut mieux créer directement un tableau en Html. Ça peut paraître repoussant de prime abord, mais c'est bien plus simple dès qu'on a compris la logique de base.
Avant toute chose, voici les balises minimales d'un tableau avec ici les explications en italique :
<table> Balise d'ouverture d'un tableau
<tbody> Balise du "corps" du tableau
<tr> Balise ouvrant une ligne
<td> Balise d'ouverture d'une cellule
Contenu de la cellule
</td> Fermeture de la cellule. Vous voulez une deuxième cellule ?
Pour ça, dupliquez balises et contenu à la suite.... (de <td> à </td>)
</tr> Fermeture de la ligne. Vous voulez une deuxième ligne avec autant de cellules ?
Pour ça, dupliquez balises de lignes, de cellule et de contenu à la suite.... (de <tr> à </tr>)
</tbody> Fermeture du corps du tableau
</table> Fermeture du tableau.
Copiez les lignes suivantes dans un document Bloc-Note, enregistrez-le avec une extension .html (par ex : test01.html). Ici, il y a une balise pour un titre.
Ouvrez votre navigateur et via le menu Fichier, demandez l'ouverture de cet élément (test01.html). Résultat
Il faut savoir que par défaut un tableau est blanc, lettres noires, positionné à gauche de l'écran, que les cellules s'adaptent au contenu le plus large.
Il est évidemment possible de fixer tous les paramètres soi-même pour obtenir exactement ce qu'on veut, dès l'instant où on en a une idée précise !
Pour attribuer à ces balises de tableaux tailles, couleurs etc... on écrira soit en html pur, mais pour ceux qui sont plus à l'aise avec le langage Css, il est possible de mixer les deux facilement.
Par exemple, ces trois lignes sont écrites différemment mais réagissent de manière identique sur le navigateur.
Test02.html Résultat
Comment faire un tableau fond transparent qui s'adapte à mon écran de façon élastique, avec des images à droite et à gauche, et le nom du blog centré ?
Pour ne pas coller aux bords de l'écran, je demande un tableau à 98% de la place disponible, centré dans la largeur, avec une bordure rouge et un léger retrait des éléments à l'intérieur des cellules.
Pas besoin de titre.
Je construit ma cellule de gauche en lui fixant une largeur en pixel (j'ai vérifié avant que mon image pouvait entrer dedans) et en lui précisant l'alignement du contenu (gauche)
Pour ma cellule centrale, je centre le contenu et j'applique une police, couleur taille pour mon texte.
Pour ma troisième cellule, je copie/colle toute la partie de ma première cellule à la suite, et, comme mon image est la même, je ne modifie que l'alignement du contenu (droite)
Je referme le tableau, c'est fini. Si je visualise le résultat et que je rétrécis la fenêtre de mon navigateur, les images restent bien collées aux bord et seul le centre reste élastique.
Test03.html Résultat
Comment faire un tableau fond gris avec des petites images, style mosaïque sur fond coloré, espacées les unes des autres de manière régulière ?
Pour ça, je détermine déjà la taille de mes images, dans cet exemple 40px au carré.
Je centre mon tableau, je lui donne un fond gris, pas de bordure, je lui demande d'espacer les cellules de 5px et je prévois un retrait du contenu de 5px à l'intérieur de la cellule.
Je spécifie les attributs du titre, couleur, taille police.
Je donne au corps de mon tableau une couleur noire.
J'ouvre une ligne.
Je ne spécifie rien à pour ma balise de cellule, car les infos nécessaires sont contenues plus haut, j'insère mon image qui est déjà à la bonne taille.
Je ferme toutes les balises (cellule, ligne, corps, tableau).
Pour ma deuxième cellule, je vais copier/coller la première (de <td> à </td>) et juste changer l'url de l'image que j'insère.
Pareil pour la troisième cellule.
test04.html Résultat
Pour ajouter à ce tableau une deuxième ligne, je copie/colle la première (de <tr> à </tr>) et son contenu (les 3 cellules).
ne me reste plus qu'à mettre les bonnes url d'images aux bonnes place.
Seule ma dernière image n'est pas d'origine à la côte de 40px au carré, j'interviens alors dans la balise image en précisant hauteur et largeur.
test04.html Résultat
Si finalement j'estime qu'il me faudrait une colonne supplémentaire, je copie/colle les lignes d'une cellule.
Si je laisse tel quel, là où se trouve la cellule en moins aura la couleur de fond de tableau, gris dans l'exemple.
Si je veux un carré noir sans image à la place de ce manque, je copie/colle là où manque encore les lignes d'une cellule et j'efface la balise image.
Cette cellule vide aura la couleur du fond du corps du tableau, noir dans l'exemple.
test05.html Résultat
Comment mettre un lien sur une image d'un tableau.
Facile, on entoure la balise image des balises liens.
Pour éviter le contour bleu windows qui peut apparaître, on le supprime en précisant dans la balise image un contour à 0.
Dans l'exemple suivant, première image/lien telle quelle, la deuxième sans contour.
test06.html
Comment fusionner des cellules
La mention fusion se trouve dans la première cellule du "futur groupe".
Si on fixe une largeur de cellule et que l'on écrit au kilomètre, le texte passe automatiquement à la ligne.
Par défaut, l'alignement vertical du contenu des cellules est centré.
Si dans une première cellule on a 2 lignes et dans celle adjacente 3, et que l'on veut que les écrits soient alignés, il faut introduite dans ces deux balises un alignement vertical en haut, et un margin-top pour "descendre" le début des écrits.
test07.html Résultat
On peut donc, au final, faire exactement le tableau que l'on souhaitait au départ, sans trop de fatigue !!
D'ailleurs, suite à cette démonstartion, je me rends compte que mon tableau de liens favoris (le cœur de l'en-tête), pourrait être allégé de manière conséquente !
Une simple recherche sur Google avec les mots "attributs tableau html" vous enverra sur des tas de pages avec des infos complémentaires (dont certaines même que j'ignore encore !). N'hésitez pas à fouiller...
N'oubliez pas de visiter les autres pages du module V2 !
Écrire un commentaire Lire les commentaires
Chouette !!
Un bémol pourtant, si vous testez des placements, couleurs, polices, bordures etc. en espérant arriver à un résultat à priori satisfaisant, sachez qu'à coup sûr la source (html) de ce tableau est devenue un grand n'importe quoi.
Il vaut mieux créer directement un tableau en Html. Ça peut paraître repoussant de prime abord, mais c'est bien plus simple dès qu'on a compris la logique de base.
Avant toute chose, voici les balises minimales d'un tableau avec ici les explications en italique :
<table> Balise d'ouverture d'un tableau
<tbody> Balise du "corps" du tableau
<tr> Balise ouvrant une ligne
<td> Balise d'ouverture d'une cellule
Contenu de la cellule
</td> Fermeture de la cellule. Vous voulez une deuxième cellule ?
Pour ça, dupliquez balises et contenu à la suite.... (de <td> à </td>)
</tr> Fermeture de la ligne. Vous voulez une deuxième ligne avec autant de cellules ?
Pour ça, dupliquez balises de lignes, de cellule et de contenu à la suite.... (de <tr> à </tr>)
</tbody> Fermeture du corps du tableau
</table> Fermeture du tableau.
Copiez les lignes suivantes dans un document Bloc-Note, enregistrez-le avec une extension .html (par ex : test01.html). Ici, il y a une balise pour un titre.
<table>
<caption>
Titre
</caption>
<tbody>
<tr>
<td>
1
</td>
<td>
2
</td>
</tr>
<tr>
<td>
3
</td>
<td>
4
</td>
</tr>
</tbody>
</table>
<caption>
Titre
</caption>
<tbody>
<tr>
<td>
1
</td>
<td>
2
</td>
</tr>
<tr>
<td>
3
</td>
<td>
4
</td>
</tr>
</tbody>
</table>
Ouvrez votre navigateur et via le menu Fichier, demandez l'ouverture de cet élément (test01.html). Résultat
***
Il faut savoir que par défaut un tableau est blanc, lettres noires, positionné à gauche de l'écran, que les cellules s'adaptent au contenu le plus large.
Il est évidemment possible de fixer tous les paramètres soi-même pour obtenir exactement ce qu'on veut, dès l'instant où on en a une idée précise !
Pour attribuer à ces balises de tableaux tailles, couleurs etc... on écrira soit en html pur, mais pour ceux qui sont plus à l'aise avec le langage Css, il est possible de mixer les deux facilement.
Par exemple, ces trois lignes sont écrites différemment mais réagissent de manière identique sur le navigateur.
<table>
<caption>
Titre
</caption>
<tbody>
<tr>
<td bgcolor="#000000">
<font color="#ffffff">
1
</font>
</td>
<td bgcolor="#000000" style="color:#fff;">
2
</td>
</tr>
<tr>
<td style="background:#000; color:#fff;">
3
</td>
<td>
4
</td>
</tr>
</tbody>
</table>
<caption>
Titre
</caption>
<tbody>
<tr>
<td bgcolor="#000000">
<font color="#ffffff">
1
</font>
</td>
<td bgcolor="#000000" style="color:#fff;">
2
</td>
</tr>
<tr>
<td style="background:#000; color:#fff;">
3
</td>
<td>
4
</td>
</tr>
</tbody>
</table>
Test02.html Résultat
***
Comment faire un tableau fond transparent qui s'adapte à mon écran de façon élastique, avec des images à droite et à gauche, et le nom du blog centré ?
<table width="98%" align="center" style="border:3px double #f00" cellpadding="3px">
<tbody>
<tr>
<td width="70px" align="left">
<img src="http://idata.over-blog.com/0/13/75/16/chatleg.gif" />
</td>
<td align="center" style="color:#f00; font-family:Arial black; font-size:30px;">
Titre du bandeau
</td>
<td width="70px" align="right">
<img src="http://idata.over-blog.com/0/13/75/16/chatleg.gif" />
</td>
</tr>
</tbody>
</table> w
<tbody>
<tr>
<td width="70px" align="left">
<img src="http://idata.over-blog.com/0/13/75/16/chatleg.gif" />
</td>
<td align="center" style="color:#f00; font-family:Arial black; font-size:30px;">
Titre du bandeau
</td>
<td width="70px" align="right">
<img src="http://idata.over-blog.com/0/13/75/16/chatleg.gif" />
</td>
</tr>
</tbody>
</table> w
Pour ne pas coller aux bords de l'écran, je demande un tableau à 98% de la place disponible, centré dans la largeur, avec une bordure rouge et un léger retrait des éléments à l'intérieur des cellules.
Pas besoin de titre.
Je construit ma cellule de gauche en lui fixant une largeur en pixel (j'ai vérifié avant que mon image pouvait entrer dedans) et en lui précisant l'alignement du contenu (gauche)
Pour ma cellule centrale, je centre le contenu et j'applique une police, couleur taille pour mon texte.
Pour ma troisième cellule, je copie/colle toute la partie de ma première cellule à la suite, et, comme mon image est la même, je ne modifie que l'alignement du contenu (droite)
Je referme le tableau, c'est fini. Si je visualise le résultat et que je rétrécis la fenêtre de mon navigateur, les images restent bien collées aux bord et seul le centre reste élastique.
Test03.html Résultat
Comment faire un tableau fond gris avec des petites images, style mosaïque sur fond coloré, espacées les unes des autres de manière régulière ?
<table align="center" bgcolor="#cccccc" cellspacing="5px" cellpadding="5px" border="0">
<caption style="color:#666; font-family:Arial black; font-size:20px;">
Mosaïque
</caption>
<tbody bgcolor="#000000">
<tr>
<td>
<img src="http://idata.over-blog.com/0/13/75/16/minilogo/oeil.jpg"/>
</td>
<td>
<img src="http://idata.over-blog.com/0/13/75/16/minilogo/grenouille.jpg"/>
</td>
<td>
<img src="http://idata.over-blog.com/0/13/75/16/minilogo/koulou.jpg"/>
</td>
</tr>
<tr>
<td>
<img src="http://idata.over-blog.com/0/13/75/16/minilogo/misshorse.jpg"/>
</td>
<td>
<img src="http://idata.over-blog.com/0/13/75/16/minilogo/forro.jpg"/>
</td>
<td>
<img src="http://idata.over-blog.com/0/13/75/16/minilogo/pied.png" width="40px height="40px"/>
</td>
</tr>
</tbody>
</table>
<caption style="color:#666; font-family:Arial black; font-size:20px;">
Mosaïque
</caption>
<tbody bgcolor="#000000">
<tr>
<td>
<img src="http://idata.over-blog.com/0/13/75/16/minilogo/oeil.jpg"/>
</td>
<td>
<img src="http://idata.over-blog.com/0/13/75/16/minilogo/grenouille.jpg"/>
</td>
<td>
<img src="http://idata.over-blog.com/0/13/75/16/minilogo/koulou.jpg"/>
</td>
</tr>
<tr>
<td>
<img src="http://idata.over-blog.com/0/13/75/16/minilogo/misshorse.jpg"/>
</td>
<td>
<img src="http://idata.over-blog.com/0/13/75/16/minilogo/forro.jpg"/>
</td>
<td>
<img src="http://idata.over-blog.com/0/13/75/16/minilogo/pied.png" width="40px height="40px"/>
</td>
</tr>
</tbody>
</table>
Pour ça, je détermine déjà la taille de mes images, dans cet exemple 40px au carré.
Je centre mon tableau, je lui donne un fond gris, pas de bordure, je lui demande d'espacer les cellules de 5px et je prévois un retrait du contenu de 5px à l'intérieur de la cellule.
Je spécifie les attributs du titre, couleur, taille police.
Je donne au corps de mon tableau une couleur noire.
J'ouvre une ligne.
Je ne spécifie rien à pour ma balise de cellule, car les infos nécessaires sont contenues plus haut, j'insère mon image qui est déjà à la bonne taille.
Je ferme toutes les balises (cellule, ligne, corps, tableau).
Pour ma deuxième cellule, je vais copier/coller la première (de <td> à </td>) et juste changer l'url de l'image que j'insère.
Pareil pour la troisième cellule.
test04.html Résultat
Pour ajouter à ce tableau une deuxième ligne, je copie/colle la première (de <tr> à </tr>) et son contenu (les 3 cellules).
ne me reste plus qu'à mettre les bonnes url d'images aux bonnes place.
Seule ma dernière image n'est pas d'origine à la côte de 40px au carré, j'interviens alors dans la balise image en précisant hauteur et largeur.
test04.html Résultat
Si finalement j'estime qu'il me faudrait une colonne supplémentaire, je copie/colle les lignes d'une cellule.
Si je laisse tel quel, là où se trouve la cellule en moins aura la couleur de fond de tableau, gris dans l'exemple.
Si je veux un carré noir sans image à la place de ce manque, je copie/colle là où manque encore les lignes d'une cellule et j'efface la balise image.
Cette cellule vide aura la couleur du fond du corps du tableau, noir dans l'exemple.
test05.html Résultat
Comment mettre un lien sur une image d'un tableau.
<table align="center" bgcolor="#cccccc" cellspacing="5px" cellpadding="5px" border="0">
<tbody bgcolor="#000000">
<tr>
<td>
<a href="http://www.google.fr/">
<img src="http://idata.over-blog.com/0/13/75/16/minilogo/oeil.jpg"/>
</a>
</td>
<td>
<a href="http://www.google.fr/">
<img src="http://idata.over-blog.com/0/13/75/16/minilogo/misshorse.jpg" border="0"/>
</a>
</td>
</tr>
</tbody>
</table>
<tbody bgcolor="#000000">
<tr>
<td>
<a href="http://www.google.fr/">
<img src="http://idata.over-blog.com/0/13/75/16/minilogo/oeil.jpg"/>
</a>
</td>
<td>
<a href="http://www.google.fr/">
<img src="http://idata.over-blog.com/0/13/75/16/minilogo/misshorse.jpg" border="0"/>
</a>
</td>
</tr>
</tbody>
</table>
Facile, on entoure la balise image des balises liens.
Pour éviter le contour bleu windows qui peut apparaître, on le supprime en précisant dans la balise image un contour à 0.
Dans l'exemple suivant, première image/lien telle quelle, la deuxième sans contour.
test06.html
Comment fusionner des cellules
<table align="center" bgcolor="#cccccc" cellspacing="5px" cellpadding="5px" border="0">
<tbody bgcolor="#000000">
<tr>
<td>
<img src="http://idata.over-blog.com/0/13/75/16/minilogo/oeil.jpg"/>
</td>
<td>
<img src="http://idata.over-blog.com/0/13/75/16/minilogo/grenouille.jpg"/>
</td>
<td>
<img src="http://idata.over-blog.com/0/13/75/16/minilogo/koulou.jpg"/>
</td>
</tr>
<tr>
<td>
<img src="http://idata.over-blog.com/0/13/75/16/minilogo/misshorse.jpg"/>
</td>
<td colspan="2" style="background:#cff; text-align:center; font-weight:bold;">
ABCD
</td>
</tr>
<tr>
<td colspan="2" style="color:#f0f; background:#ccc;">
EFG
<br/>
HI
</td>
<td>
<img src="http://idata.over-blog.com/0/13/75/16/minilogo/koulou.jpg"/>
</td>
</tr>
<tr>
<td style="color:#fff; margin-top:5px;" valign="top">
aa
<br/>
bbb
</td>
<td style="color:#fff; margin-top:5px;" valign="top">
aa
<br/>
bbb
<br/>
ccc
</td>
<td>
</td>
</tr>
</tbody>
</table>
<tbody bgcolor="#000000">
<tr>
<td>
<img src="http://idata.over-blog.com/0/13/75/16/minilogo/oeil.jpg"/>
</td>
<td>
<img src="http://idata.over-blog.com/0/13/75/16/minilogo/grenouille.jpg"/>
</td>
<td>
<img src="http://idata.over-blog.com/0/13/75/16/minilogo/koulou.jpg"/>
</td>
</tr>
<tr>
<td>
<img src="http://idata.over-blog.com/0/13/75/16/minilogo/misshorse.jpg"/>
</td>
<td colspan="2" style="background:#cff; text-align:center; font-weight:bold;">
ABCD
</td>
</tr>
<tr>
<td colspan="2" style="color:#f0f; background:#ccc;">
EFG
<br/>
HI
</td>
<td>
<img src="http://idata.over-blog.com/0/13/75/16/minilogo/koulou.jpg"/>
</td>
</tr>
<tr>
<td style="color:#fff; margin-top:5px;" valign="top">
aa
<br/>
bbb
</td>
<td style="color:#fff; margin-top:5px;" valign="top">
aa
<br/>
bbb
<br/>
ccc
</td>
<td>
</td>
</tr>
</tbody>
</table>
La mention fusion se trouve dans la première cellule du "futur groupe".
Si on fixe une largeur de cellule et que l'on écrit au kilomètre, le texte passe automatiquement à la ligne.
Par défaut, l'alignement vertical du contenu des cellules est centré.
Si dans une première cellule on a 2 lignes et dans celle adjacente 3, et que l'on veut que les écrits soient alignés, il faut introduite dans ces deux balises un alignement vertical en haut, et un margin-top pour "descendre" le début des écrits.
test07.html Résultat
On peut donc, au final, faire exactement le tableau que l'on souhaitait au départ, sans trop de fatigue !!
D'ailleurs, suite à cette démonstartion, je me rends compte que mon tableau de liens favoris (le cœur de l'en-tête), pourrait être allégé de manière conséquente !
Une simple recherche sur Google avec les mots "attributs tableau html" vous enverra sur des tas de pages avec des infos complémentaires (dont certaines même que j'ignore encore !). N'hésitez pas à fouiller...
N'oubliez pas de visiter les autres pages du module V2 !
Écrire un commentaire Lire les commentaires
/http%3A%2F%2Fassets.over-blog-kiwi.com%2Ft%2Felegant_press%2Fimages%2Fthumb.jpg)
/idata%2F0137516%2F82asaxon-dragonfly2004-thumb.gif)