Espacement des cellules d'un tableau

Version imprimable

Bonjour,

Je souhaiterai que ce tableau n'ait aucun espacement entre ses cellules, pour que l'image ne soit pas coupée.

Le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
 
	<head>
		<title>Episode 2 : Space Trip</title>
		<link rel="stylesheet" media="screen" type="text/css" title="The Mutant's Trek" href="mutantstrek.css" />
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	</head>
 
	<body>
		<div id="matable">
		<TABLE border="0" cellpadding="0" cellspacing="0">
  			<TR>
  				<TD width="1024", height="600", colspan="3" border="0">
  					<TABLE border="0" cellpadding="0" cellspacing="0">
  						<TR>
  							<TD colspan="3"> <img src="http://www.ilovelemutant.com/episodes/images/episode2/episode02-01.jpg" width="1024", height="500"> </TD>
  						</TR>
  						<TR height="100">
  							<TD width="325" border="0"> <img src="http://www.ilovelemutant.com/episodes/images/episode2/episode02-02.jpg" width="325" height="100"> </TD></TD>
  							<TD width="400" border="0"></TD>
  							<TD width="300" border="0"> <img src="http://www.ilovelemutant.com/episodes/images/episode2/episode02-04.jpg" width="300" height="100"> </TD>
  						</TR>
  					</TABLE>
  					</div>
  				</TD>
  			</TR>
  			<TR height=20>
				<TD width="341", align=left> <a href="http://www.ilovelemutant.com/episodes/episode01.html">Previous</a> </TD>
				<TD width="342", align=center> <a href="http://www.ilovelemutant.com/the-mutants-trek/">Website</a> </TD>
				<TD width="341", align=right> </TD>
  			</TR>
		</TABLE>
 
	</body>
 
</html>

Voici maintenant quelques heures que je m'arrache les cheuveux, et je parviens pas à savoir d'où viens l'erreur...!

Merci pour votre aide !

04/04/2010, 11h32
polymorphisme

Bonjour,

Code:

<TD width="1024", height="600", colspan="3" border="0">

Cela n'est pas du HTML. Tu doit supprimer les vigules ",".

Ensuite, tu peux consulter ta feuille de style, des fois qu'il y aurait des styles relatifs aux éléments de ton tableau.

Enfin, il faut que les dimensions que tu indiques dans tes balises width et height soient cohérentes avec les tailles de tes images.

Merci pour ta réponse !

Je viens d'enlever les virgules, le résultat est identique : (ici)

Je n'ai pas l'impression que la feuille de style "interfère" avec mon tableau. Dans le doute, la voici (elle n'est pas longue) :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 a:link {color: #009900;} a:hover {color: #FF0000;} a:visited {color: #009900;} body { background-color: #000000; font-family: courier, courrier new, andele mono; color: #ffffff; } td { font-size: 11px; } #matable { position:absolute; left: 50%; top: 50%; margin-top: -310px; /* moitié de la hauteur de l'image */ margin-left: -512px; /* moitié de la largeur de l'image */ }
Quand aux dimensions width et height, elles correspondent exactement aux dimensions des images...

04/04/2010, 11h58
polymorphisme

Et puis, en lisant ton code, j'ai vu que les balises n'étaient pas emboitées : la balise div, c'est pas propre du tout.
04/04/2010, 12h29
aupaaupa

Tu veux parler de la balise </div> qui n'était pas au bon endroit ? Je viens la replacer... aucun changement.

Je ne suis pas du tout un professionnel, et j'ai écrit ce code petit à petit, en m'aidant de tutoriels et en tâtonnant ! Peut-être y a-t-il une solution beaucoup plus propre et "pro" de réaliser ce que je veux faire ?

En tout cas, il y a toujours ce #&@% d'espace dans mon tableau...!
04/04/2010, 13h28
aupaaupa

Je viens de faire quelques tests, et il semblerait que cette ligne soit à l'origine du problème :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

En effet, le même code avec cette ligne, et sans cette ligne.

Mais ça me fait un peu peur de supprimer cette ligne ! (j'ai du lire quelque part qu'elle était importante !)...

Quelqu'un pourrait-il m'éclairer ?
04/04/2010, 19h48
12monkeys
Bonjour

Pour ton problème rajoute ceci dans ton CSS :
Code:

1 2 3 img { vertical-align:bottom; }
En fait certains navigateurs laissent un espace sous les images de la place pour les jambages des caractères... En effet les images sont des éléments en ligne d'où l'existence de cet espace...

En effet le DOCTYPE est très important et ne doit pas être supprimé... Voici pourquoi : http://xhtml.developpez.com/faq/?pag...octype_utilite

Cependant si tu utilises un DOCTYPE il faut aussi en respecter les règles. En l'occurence tu utilises un DOCTYPE XHTML mais tu ne respecte pas toutes ses règles : http://a-pellegrini.developpez.com/tutoriels/xhtml/

Si tu ne veux pas t'embêter avec ça tu peux aussi utiliser un DOCTYPE plus permissif : http://xhtml.developpez.com/faq/?pag...#html_doctypes un DOCTYPE HTML transitionnal par exemple...

Enfin la mise en page à l'aide de tableaux ce n'est pas fait pour ça : http://xhtml.developpez.com/faq/?pag...u_mise_en_page
06/04/2010, 10h13
aupaaupa

Merci 12monkeys pour cette réponse complète ! Je vais étudier tout ça à tête reposée, bien que ma première impression est que j'ai peut être essayé de faire quelque chose de trop compliqué pour mon niveau !
07/04/2010, 15h51
polymorphisme

Bonjour,

tu peux toujours consulter les tutoriels du site sur le HTML.
Petit à petit, tu construira des documents plus facilement. :ccool: