Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

05.12.2008

Comment aligner le texte autour d'un tableau

Le principe avait rapidement été abordé quand il s'était agit de lettrine. Il peut être utile d'enfermer un objet dans un tableau pour tourner autour.

Vous en faites l'expérience à chaque fois que vous insérez une image dans une note, mieux vaut ne pas se tromper de paramètre si l'on souhaite que le texte enveloppe l'image. Et quand vous insérez un lecteur, il n'y a pas moyen d'aligner le texte autour de l'objet, ce qui oblige le plus souvent à reléguer le lecteur en fin de note pour ne pas créer de grande coupure.

Puisqu'on peut aligner sur un tableau, encadrons les objets.

Le lecteur ci-contre été inséré dans un tableau aligné à gauche. Le texte lui-même aligné à gauche semble tourner autour, en limitant l'effet de coupure visuelle de l'insertion d'un objet. Et cela peut fonctionner avec n'importe quel type d'objet... Je m'avance peut-être un peu, mais vous ne perdez qu'un peu de temps à essayer.

Vous trouverez dans la brève Wysiwyg, un exemple de texte encadré, qui exige un alignement sur la droite.

podcast

Le texte de ce paragraphe-ci est aligné à gauche, comme le précédent, mais le lecteur de média se situe dans un tableau (dont le fond a été mis en couleur) qui s'aligne à droite. Alignement du texte en dehors du tableau, et alignement du tableau lui-même sont indépendant. Sans compter l'alignement du texte dans le tableau.

Voici le code du tableau à insérer.

Ce qui est en couleur n'est pas interprété, c'est du commentaire. Vous pouvez copier puis coller ce code dans l'une de vos notes, et vous obtiendrez un tableau aligné à gauche, avec une cellule contenant XX. Entre ces deux lettres, vous pourrez insérer un lecteur Deezer de petite taille. C'est à peu de chose près le code du cadre en haut de cette note.

<!-- -+-+-+-+- Tableau pour insertion d'objet -0- -+-+-+-+- -->
<table style="width: 224px; height: 59px;"
<!-- width indique la largeur, height la hauteur du tableau. Ici l'unité est le pixel, il faut se référer aux dimensions de l'objet et ajouter 4px aux deux dimensions. Ici, ce sont les dimensions d'un lecteur Deezer de taille réduite. -->
align="left"
<!-- choisir entre "left" et "right" pour l'alignement du tableau -->
border="0" cellpadding="2">
<!-- la bordure est à zéro, il n'y en a donc pas. Cellpadding règle l'espace entre bord de cellule et bord de tableau avec un cellpadding à 2, il faut augmenter la taille du tableau de 2 pixels sur chaque bord, soit 4 sur la hauter, 4 sur la largeur -->
<tbody><tr><td style="text-align: center;" valign="middle">
<!-- ces critères de styles alignent sur le centre de la cellule horizontalement d'abord, puis verticalement -->
<!-- -+-+-+-+-+- Code de l'objet à insérer -0- -+-+-+-+-+- -->

XX
<!-- ces XX servent de repères, il faudra les effacer après avoir inséré le code du lecteur Deezer -->
<!-- -+-+-+-+-+- Code de l'objet à insérer -1- -+-+-+-+-+- -->
</td></tr></tbody></table>
<!-- -+-+-+-+- Tableau pour insertion d'objet -1- -+-+-+-+- -->

22:35 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (0) | Tags : blog, html, tableau, lecteur | |  del.icio.us | | Digg! Digg |  Facebook

Les commentaires sont fermés.