18050 sujets

Questions générales et questions de débutants

[Résolu] Supprimer les espaces entre les cellules d'un tableau

Bonjour,
me revoilà à mes débuts du code... au B.A.BA : le tableau Smiley sweatdrop
Après avoir regardé des dizaines de forums, je n'arrive toujours pas à supprimer le espaces entre 3 cellules horizontales. Je ne comprends pas. Est-ce vraiment une erreur de code ?
la page complète :
<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Document sans nom</title>
		<style>
			body
			{
				align-items: center;
				margin-top : 50px;
				vertical-align : bottom;
			}

			.deux
			{
				background: url('images/ddpb_un.gif');
			}

			.deux:hover
			{
				background: url('http://dummyimage.com/100x100/eb00eb/fff');
			}

			table
			{
				border-collapse: collapse;
				vertical-align= "bottom" border-spacing =" 0";
				display=" inline-block";
			}
		</style>
	</head>
	<body>
		<table width="1024" border-spacing="0" cellspacing="0" vertical-align= "bottom";>
			<tbody>
				<tr>
					<td>
						<img src="images/ddpb_un.gif" width="1024" height="322"  vertical-align= "bottom"; alt="";>
					</td>
				</tr>
				<tr>
					<td class="deux" width="1024" height="191" alt="";></td>
				</tr>
				<tr>
					<td>
						<img src="images/ddpb_trois.gif" width="1024" height="255" alt=""/>
					</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

Merci pour votre aide,
P.
Merci pour ta réponse casper2,
J'ai tenté le tableau car j'ai craqué en ne voyant pas la div#2 apparaître (problème récurrent) avec ce code :
<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Document sans nom</title>
		<style type="text/css">
			body
			{
				margin: 0;
				width: 100%;
			}

			#tab
			{
				width: 1024px;
				margin: auto;
				vertical-align: bottom;
				margin-top: 50px;
			}

			#tab img
			{
				display: block;
			}

			#deux
			{
				background-image: url("images/ddpb_deux.gif");
				width="1024";
				height="191px";
			}

			#deux hover
			{
				background-image: url("images/ddpbb_deux_bis.gif");
				width="1024";
				height="191px";
			}
		</style>
	</head>
	<body>
		<div id= "tab">
			<div>
				<img src="images/ddpb_un.gif" width="1024" height="322" alt=""/>
			</div>
			<div id="deux"></div>
			<div>
				<img src="images/ddpb_trois.gif" width="1024" height=""  alt=""/>
			</div>
		</div>
	</body>
</html>

L'object est uniquement d'avoir un changement d'image lors du :hover dans l'image centrale.
Encore merci,
P.
PS : merci pour tes piqures de rappel Smiley cligne
Modifié par PLGPPUR (17 Sep 2024 - 12:55)
Bonjour, il y a également, pour vous aidez, un validateur CSS => https://jigsaw.w3.org/css-validator/
La pseudo class :hover est préfixée de deux point, comme toutes les pseudo class.
Une règle CSS est composée de nom de propriété suivis de deux point puis une valeur et se termine par un point virgule. Il n'y a donc ni guillemet, ni signe égale.
Voici ton CSS corrigé : 


<!doctype html>
<html lang="fr">

<head>
  <meta charset="UTF-8">
  <title>Document sans nom</title>
  <style>
    body {
      margin: 0;
      width: 100%;
    }

    #tab {
      width: 1024px;
      margin: auto;
      vertical-align: bottom;
      margin-top: 50px;
    }

    #tab img {
      display: block;
    }

    #deux {
      background-image: url("images/ddpb_deux.gif");
      width: 1024px;
      height: 191px;
    }

    #deux:hover {
      background-image: url("images/ddpbb_deux_bis.gif");
      
    }
  </style>
</head>

<body>
  <div id="tab">
    <div>
      <img src="images/ddpb_un.gif" width="1024" height="322" alt="" >
    </div>
    <div id="deux"></div>
    <div>
      <img src="images/ddpb_trois.gif" width="1024" alt="" >
    </div>
  </div>
</body>

</html>


De manière générale préfère utiliser les class en CSS et laisse les identifiants au JS.
Modifié par casper2 (17 Sep 2024 - 13:18)
Meilleure solution
Super, merci beaucoup casper2 Smiley biggrin
Pour être honnête, c'est la première fois que j'ai tout fait de mémoire. Je suis loin de savoir coder sans prendre un exemple auparavant apparemment (pour les pseudo class, règle CSS et tous le reste) Smiley murf
Merci donc encore pour ces rappels de base. Ça va commencer à rentrer Smiley cligne
Bonne journée Smiley biggrin
Administrateur
Bonjour,

dans ton 1er message, il y a de nombreuses erreurs de syntaxe avec du CSS c/c et écrit comme des attributs HTML. Les validateurs peuvent aider mais c'est quelque chose que ton éditeur de code devrait te remonter immédiatement via la coloration syntaxique voire des tooltips d'erreur.
Que ce soit VSCodium ou un autre, ça fait gagner du temps et baisse la frustration d'avoir à chercher pourquoiiii ça marche pas.
Bon VSCod* pique un peu à la prise en main, j'avoue, trop de trucs à configurer et de fonctionnalités à découvrir mais euh j'en connais plus d'autres. Sublime Text ptet bien ?

Sinon une div sans contenu fait par défaut 0 pixel de haut, tu ne risques pas de la voir Smiley smile D'où le (min-)height.
Bonjour Felipe,
J'ai bien retenu la leçon Smiley confused
je vais jeter un œil à tes "tooltips", j'en ai carrément besoin Smiley murf
Merci à toi et bonne journée,
P.
Prévenir un modérateur
Répondre au sujet
Aller à