Page 1 sur 1

alignement bottom

Posté : 20 déc. 2007, 11:18
par Invité
Bonjour à tous,

J'ai un tableau html de 2 cellules. 1 cellule contient une image de 100*100, l'autre contient un texte de 2 mot qui tien sur une ligne.

J'essaye d'aligner le texte sur la bordure inférieure du tableau, afin qu'on aie l'impression qu'ils sont "posés" sur la même ligne de base.

J'utilise un valign="bottom" pour coller mon texte au pied de la cellule, mais ça ne marche pas.
Il reste toujours un espace entre le texte et la bordure inférieure du tableau.

Savez vous comment je peux annuler cet espace? d'ou vient il? ya t il une meilleure méthode?
Mon tableau:
<table width="13%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="bottom"><img src="image.jpg" /></td>
    <td valign="bottom">mon texte </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
Merci pour vos réponses.

Posté : 20 déc. 2007, 12:46
par ryykko
tu peux regarder du cote de line-height peut etre pour l appliquer a ta table

http://fr.selfhtml.org/css/proprietes/alignement.htm

:)

Posté : 20 déc. 2007, 15:46
par Patriboom
Dans ta balise <table>, ajoute les attributs suivants:

cellpadding=0 cellspacing=0




Ça te donnera un tableau sans espaces latéraux ni supérieurs ni inférieurs

Code : Tout sélectionner

<table ... cellpadding=0 cellspacing=0>

Posté : 20 déc. 2007, 16:17
par Berzemus
Dans ta balise <table>, ajoute les attributs suivants:

cellpadding=0 cellspacing=0




Ça te donnera un tableau sans espaces latéraux ni supérieurs ni inférieurs

Code : Tout sélectionner

<table ... cellpadding=0 cellspacing=0>
Eum, je crois que c'est déjà le cas.. (a voir son code)..

Sinon, la propriété css border-collapse pourrait t'aider aussi, on ne sait jamais.

Posté : 20 déc. 2007, 17:52
par Victor BRITO
Pourquoi se compliquer la vie quand on peut faire simple ? :roll:

Vu qu'on a affaire à des cellules de tableau, rien de mieux qu'un

Code : Tout sélectionner

td { vertical-align: bottom; }
Un peu de lecture sur la propriété vertical-align (version française).

Posté : 22 déc. 2007, 01:07
par Aureusms
Dans ta balise <table>, ajoute les attributs suivants:

cellpadding=0 cellspacing=0




Ça te donnera un tableau sans espaces latéraux ni supérieurs ni inférieurs

Code : Tout sélectionner

<table ... cellpadding=0 cellspacing=0>
ou utilise en CSS (avec un entourage gratis)

Code : Tout sélectionner

<table style="border-collapse: collapse; border: 1px solid black;">
Sinon rappelles toi que les tableaux, c'est pas très top pour faire ce que tu veux faire sauf si tu désires avoir des lignes biens parallèles. Un petit CSS comme celui là peut aussi faire à peu près la même chose

<div style="width : 150px; height: 150px; position: absolute; top: 0px; right: 87%;">
  <img src="image.jpg" />
 <span>mon texte</span>
</div>
Les div ou les (<p>) "sautent" à la lignes donc tu a l'effet cellules sans les inconvénients. (la lourdeur de l'affichage)