HTML/Tableau/Espaces autour d'une image
Résolu
Bonjour,
J'ai créé un tableau dans lequel se trouve une photo. Je n'arrive pas à faire en sorte que les bords du tableau collent à ceux de la photo. Il y a toujours un espace assez conséquent sous la photo. Je pense avoir tout essayé : marginheight ; valign ; cellpadding... ect. Je ne sais plus quoi faire. Quelqu'un peut-il m'aider ?
Voici mon code :
<center>
<table border="1" bordercolor="#0011ee">
<center>
<tr>
<center>
<td>
<center>
<a href="a.html">
<img src="a.jpg" width="100">
</a>
</center>
</td>
</center>
</tr>
</center>
</table>
</center>
Merci d'avance.
J'ai créé un tableau dans lequel se trouve une photo. Je n'arrive pas à faire en sorte que les bords du tableau collent à ceux de la photo. Il y a toujours un espace assez conséquent sous la photo. Je pense avoir tout essayé : marginheight ; valign ; cellpadding... ect. Je ne sais plus quoi faire. Quelqu'un peut-il m'aider ?
Voici mon code :
<center>
<table border="1" bordercolor="#0011ee">
<center>
<tr>
<center>
<td>
<center>
<a href="a.html">
<img src="a.jpg" width="100">
</a>
</center>
</td>
</center>
</tr>
</center>
</table>
</center>
Merci d'avance.
Configuration: Windows XP Internet Explorer 7.0
6 réponses
-
Une explication sur cet espace génant et comment s'en debarasser :
https://developer.mozilla.org/fr/docs/Archive/Misc_top_level/Images,_tableaux_et_d%C3%A9calages_myst%C3%A9rieux -
Merci beaucoup pour ces réponses. Juste une question, le "no-repeat" et le "text-align:center" servent à quoi ? "text-align:center" c'est pour centrer l'image c'est ça ?
-
Avec 'no-repeat' l'image ne répète pas (parce qu'elle est comme le fond/background du div).
Et 'text-align:center' c'est pour aligner le TEXT au centre du div non l'image.
Pour aligner l'image faites ça:
<div style="background:url(a.jpg) no-repeat; border:1px solid #000000; height:100px; width:150px; text-align:center;" onclick="javascript:window.location='a.html';" ALIGN='CENTER'></div>
Ou avec une table:
<table align='center'>
<tr>
<td>
<div style="background:url(a.jpg) no-repeat; border:1px solid #000000; height:100px; width:150px; text-align:center;" onclick="javascript:window.location='a.html';"></div>
</td>
</tr>
</table>
Je vous suggère ces sites:
https://www.cssdebutant.com/
http://www.cssplay.co.uk -
Merci beaucoup pour les réponses.
-
<table border="0" cellpadding='0' cellspacing='0'>
ou
<table border="1" bordercolor="#0011ee" cellpadding='0' cellspacing='0'>
et aussi:
<table border="1" bordercolor="#0011ee" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="background:url(a.jpg) no-repeat;" onclick="javascript:window.location='a.html';" align="center">
</td>
</tr>
</table> -
tu peux faire la même chose sans une table:
<div style="background:url(a.jpg) no-repeat; border:1px solid #000000; height:100px; width:150px; text-align:center;" onclick="javascript:window.location='a.html';"></div>
