Espaces entre tableaux HTML...

Résolu/Fermé

XxJoRgxX - 2 juin 2010 à 17:49
XxJoRgxX - 4 juin 2010 à 09:46

Bonjour,
Je suis actuellement en stage et je fais les newsletter de mon entreprise.
J'arrive a tout mettre en place avec dreamwaver mais quant j'ouvre la page html ou que je reçois la newsletter sur hotmail, des espaces s'affichent entre les tableaux....

Voici le code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Newsletter 02/06/2010</title>
</head>

<body>

<table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top" colspan="2">
		<a href="http://www.bhdiscount.com/fr/index.php" target="_blank" style="text-decoration:none; margin:0px; padding:0px;">
			<img src="http://www.bhdiscount.com/fr/mail/26_05_10/images/a.jpg" border="0" alt="BHDiscount, la référence de l'electroménager" title="BHDiscount, la référence de l'electroménager" style="margin:0px; padding:0px;" />
		</a>
	</td>
	</tr>
	
  <tr>
    <td valign="top" colspan="2">
		<a href="http://www.bhdiscount.com/fr/index.php" target="_blank" style="text-decoration:none; margin:0px; padding:0px;">
			<div style="text-align:center;">
			<span style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:20px; color:#ffa800; line-height:22px;">
			La référence de l'électroménager est sur www.bhdiscount.com
			</span><br />
			<span style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#133e61; line-height:16px;">
			Soin du corps &amp; Beauté - Entretien du sol - Entretien du linge - Cuisine - Petit déjeuner - Froid - Cuisson - Lavage - Image - Son - Téléphones fixes
			</span>
			</div>
		</a>
	</td>
  </tr>
  
  <tr>
    <td valign="top" colspan="2">
		<a href="http://www.bhdiscount.com/" target="_blank" style="text-decoration:none; margin:0px; padding:0px;">
			<img src="http://www.bhdiscount.com/fr/mail/2_06_10/images/1.jpg" border="0" alt="Prix de folie ! " title="Prix de folie !" style="margin:0px; padding:0px;" />
		</a>
	</td>
  </tr>
  
 
  
  <tr>
    <td valign="top" colspan="1">
		<a href="http://www.bhdiscount.com/fr/index.php?option=com_virtuemart&page=shop.product_details&flypage=flypage.tpl&category_id=474&product_id=34752514&Itemid=100474" target="_blank" style="text-decoration:none; margin:0px; padding:0px;">
			<img src="http://www.bhdiscount.com/fr/mail/2_06_10/images/2g.jpg" border="0" alt="Yaourtière DJC241 Moulinex à -52% !" title="Yaourtière DJC241 Moulinex à -52% !" style="margin:0px; padding:0px;" />
		</a>
	</td>
	<td valign="top" colspan="1">
		<a href="http://www.bhdiscount.com/fr/index.php?option=com_virtuemart&page=shop.product_details&flypage=flypage.tpl&category_id=178&product_id=25326985&Itemid=100178" target="_blank" style="text-decoration:none; margin:0px; padding:0px;">
			<img src="http://www.bhdiscount.com/fr/mail/2_06_10/images/2d.jpg" border="0" alt="Broyeurs à Café et Moulin à Café GVX242 Krups à -21% !" title="Broyeurs à Café et Moulin à Café GVX242 Krups à -21% !" style="margin:0px; padding:0px;" />
		</a>
	</td>
    <tr>
<td valign="top" colspan="1">
		<a href="http://www.bhdiscount.com/fr/index.php?option=com_virtuemart&page=shop.product_details&flypage=flypage.tpl&category_id=238&product_id=52804637&Itemid=100238" target="_blank" style="text-decoration:none; margin:0px; padding:0px;">
			<img src="http://www.bhdiscount.com/fr/mail/2_06_10/images/3g.jpg" border="0" alt="Fer à Repasser FV4550 Calor à -25% !" title="Fer à Repasser FV4550 Calor à -25% !" style="margin:0px; padding:0px;" />
		</a>
	</td>
    <td valign="top" colspan="2">
		<a href="http://www.bhdiscount.com/fr/index.php?option=com_virtuemart&page=shop.product_details&flypage=flypage.tpl&category_id=222&product_id=52938929&Itemid=100222" target="_blank" style="text-decoration:none; margin:0px; padding:0px;">
			<img src="http://www.bhdiscount.com/fr/mail/2_06_10/images/3d.jpg" border="0" alt="Friteuse AH900000 Seb à -27% !" title="Friteuse AH900000 Seb à -27% !" style="margin:0px; padding:0px;" />
		</a>
	</td>
  </tr>
      <tr>
<td valign="top" colspan="1">
		<a href="http://www.bhdiscount.com/fr/index.php?option=com_virtuemart&page=shop.product_details&flypage=flypage.tpl&category_id=190&product_id=49920855&Itemid=100190" target="_blank" style="text-decoration:none; margin:0px; padding:0px;">
			<img src="http://www.bhdiscount.com/fr/mail/2_06_10/images/4g.jpg" border="0" alt="Plaques Lissantes CF7362 Calor à -53% !" title="Plaques Lissantes CF7362 Calor à -53% !" style="margin:0px; padding:0px;" />
		</a>
	</td>
    <td valign="top" colspan="2">
		<a href="http://www.bhdiscount.com/fr/index.php?option=com_virtuemart&page=shop.product_details&flypage=flypage.tpl&category_id=88&product_id=30489467&Itemid=10088" target="_blank" style="text-decoration:none; margin:0px; padding:0px;">
			<img src="http://www.bhdiscount.com/fr/mail/2_06_10/images/4d.jpg" border="0" alt="Plaques de Cuisson STI664BF1 Sauter à -45% !" title="Plaques de Cuisson STI664BF1 Sauter à -45% !" style="margin:0px; padding:0px;" />
		</a>
	</td>
  </tr>

  
  <tr>
    <td valign="top" colspan="3">
		<a href="http://www.bhdiscount.com/fr/index.php" target="_blank" style="text-decoration:none; margin:0px; padding:0px;">
			<img src="http://www.bhdiscount.com/fr/mail/2_06_10/images/5.jpg" border="0" alt="Ils nous font confiance !" title="Ils nous font confiance !" style="margin:0px; padding:0px;" />
		</a>
	</td>
  </tr>
  
  
  
</table>
</body>
</html>

Et le lien de la page: http://www.bhdiscount.com/fr/mail/2_06_10/mail.html

A voir également:

Espaces entre tableaux HTML...
Espaces insécables - Guide
Editeur html - Télécharger - HTML
Tableaux croisés dynamiques - Guide
Nbsp html ✓ - Forum Webmastering
À l’aide des tableaux ci-dessous, trouvez le mot dont le code ascii est le suivant : 72 65 6a 6f 69 6e 64 72 65 - Forum C

7 réponses

Réponse 1 / 7

justoo76 Messages postés 186 Date d'inscription mardi 13 avril 2010 Statut Membre Dernière intervention 23 mars 2016 13
Modifié par justoo76 le 3/06/2010 à 12:19

Trouvé !!
En fait c'est pas le tableau en lui même qui créé ce problème, mais l'image à l'intérieur. Utilise donc, au sein de la balise <img> un style="display:block"

exemple avec le premier tableau :

<table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" colspan="2">
<a href="http://www.bhdiscount.com/fr/index.php" target="_blank" style="text-decoration:none; ">
<img src="http://www.bhdiscount.com/fr/mail/26_05_10/images/a.jpg" border="0" alt="BHDiscount, la référence de l'electroménager" title="BHDiscount, la référence de l'electroménager" style="display:block" />
</a>
</td>
</tr>
</table>

Par ailleurs, je te conseil de créer des tableaux pour chaques "ligne ou produit" de ta news, dont un pour l'entête et un pour le pied de page, pour plus de clareté.

Voilou j'espère que sa t'as aidé !

Réponse 2 / 7

Utilisateur anonyme
2 juin 2010 à 18:16

essaye en mettant dans le style CSS de ton tableau :

border-collapse:collapse;

par ailleur tu devrai placer le CSS dans un fichier externe
cela rend le code plus clair
(bien que je pense que tu ne mettent pas souvent le nez dans le code)

Réponse 3 / 7

XxJoRgxX
2 juin 2010 à 18:26

Non c'est vrai ^^ c'est mon premier jour de "codage", donc mes connaissances la dessus sont très limitées! j'essaye et je vous tiens au jus ;-)

Réponse 4 / 7

Utilisateur anonyme
2 juin 2010 à 18:51

ok ;)

bien pour coder
il ne faut pas faire confiance aux logiciels d'edition visuelle

tu doit verifier le code (donc aprendre les base du xHTML et CSS
comme sur le site du zero

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 7

XxJoRgxX
3 juin 2010 à 11:44

Merci pour le conseil! ;)

J'ai essayé de faire ce que tu as dit mais ça ne change rien :(

J'ai remarqué que sur les news de CDiscount ça fait la même chose quant je les reçois parfois...

Réponse 6 / 7

justoo76 Messages postés 186 Date d'inscription mardi 13 avril 2010 Statut Membre Dernière intervention 23 mars 2016 13
3 juin 2010 à 11:55

Bonjour,

Je fait exactement la même chose que toi , NewsLetter en stage.
Sauf que moi il ne me reste plus qu'une semaine :D

Donc pour le code , vaut mieux y aller directement en HTML, c'est pas trop difficile. Pour le css, tu es obligé de faire comme tu a fait : le mettre "en ligne" dans les balise du html. Bah oui, quand on envoi le mail, on envoi qu'un seul fichier..

Et pour les ecarts entre tableaux, j'ai le même souci parfois. Je regarde sa de plus pres et jte dit si je trouve.

Réponse 7 / 7

XxJoRgxX
4 juin 2010 à 09:46

Ça y est c'est réglé! Merci!!!

Discussions similaires

Espace en HTML

Espace HTML

la balise <br> ou <br />

[**] Balise pour un espace vide en hml. Merci