Positionner une image bord à bord dans la case d'un tableau !

**campeaux** · 24/03/2018, 15h23

Avant de n'avoir plus de cheveux sur la tête à force de me les arracher, je lance un SOS dans ce forum.
Je suis débutant en HTML/CSS et j'ai besoin de créer un tableau dans lequel je vais afficher des images, du texte etc ...

Voici le code que j'utilise.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
<!doctype html>
<html>
	<style>
		.ma_table {
			color: #000000;
			width: 800px;
			border: 1px solid black;
			/* Pour centrer le tableau */
			margin: auto;
			border-collapse: collapse;
			font-family: inherit;
			}
		td {
			border: 1px solid black;
			width: 160px;
		}
	</style>
 
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	</head>
 
	<body>
		<div style="width: 100%; text-align: center; padding: 0px 0px 0px 0px; border: 1px solid black;">
		<table class="ma_table">	
			<tr>
				<td colspan="5">
					<div>
					bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
					bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
					bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
					bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
					</div>
				</td>
			</tr>
 
			<tr>
				<td colspan="2">
					<img src="ble-320_100.jpg">
				</td>
				<td colspan="3">
					<div>
					bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
					bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
					bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
					bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
					</div>
				</td>
			</tr>
		</table>
		</div>
	</body>
</html>

Mon tableau est divisé en 5 colonnes. La largeur de la table est fixée à 800px. Donc chaque colonne doit faire 160px.
L'image que j'affiche dans la deuxième ligne fait 320px. Donc en prennant deux colonnes (colspan=2) ça devrait rentrer.

Le problème est que ça ne marche pas !
Quand je fixe l'attribut "width: 160px" dans le CSS pour la balise td, j'obtiens un affichage décalé :

Nom : aff_deca.png
Affichages : 974
Taille : 103,3 Ko

Nom : aff_deca.png
Affichages : 974
Taille : 103,3 Ko

Par contre quand je ne fixe pas de "width" ça passe :
Nom : aff_ok.png
Affichages : 940
Taille : 101,2 Ko

Du coup j'ai aussi un autre problème :
Comment supprimer cette petite marge blanche entre l'image et la bordure de la case ? Je souhaite que l'image soit exactement à la taille de la case !

D'avance merci pour votre aide !

Invité · 24/03/2018, 17h36

Bonjour,

ça fait belle lurette qu'on n'utilise plus de <table> pour faire la mise en page !

On utilise des "boîtes" (<div> et autres) qu'on positionne grâce au CSS.
On peut simuler le comportement d'une table avec display:table / table-cell.
Mais intéresse-toi aux flexbox, voire au système de grid CSS.
Et préfère les largeurs en % plutôt qu'en px.

Quant à la marge, ajoute display:block à l'image.

**campeaux** · 24/03/2018, 22h13

Merci pour les conseils. J'ai commencé à les appliquer mais sans succès !

Pour simplifier j'ai juste deux colonnes :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
				<div style="border: inherit; display: table; width: 100%;">
					<span style="display: table-cell; width: 50%; border: inherit;">
						<img src="oseille.jpg" style="display: block;">
					</span>
					<span style="display: table-cell; width: 50%; border: inherit;">
						<p style="display: block;" >Texte</p>
					</span>				
				</div>

Je voudrais qu'il n'y ait pas de marge en dessous le l'image : que les bords en bas de ma case collent à l'image.
Au lieu de ça, j'obtiens cela sur différents navigateurs :
Nom : aff_deca.png
Affichages : 916
Taille : 94,9 Ko

Nom : aff_deca.png
Affichages : 916
Taille : 94,9 Ko

Peux tu encore m'aider stp ?

**psychadelic** · 25/03/2018, 04h52

contrairement à ce que l'imagine l'interpréteur html prend en compte tous les espaces.
quand tu code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<span style="display: table-cell; width: 50%; border: inherit;">
	 <img src="oseille.jpg" style="display: block;">
 </span>

l'interpréteur trouve 2 espaces autour de l'image, et ils se retrouveront dans tes "marges":

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<span style="display: table-cell; width: 50%; border: inherit;">
[espace]<img src="oseille.jpg" style="display: block;">[espace]
 </span>

il faut coder de cette façon :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<span style="display: table-cell; width: 50%; border: inherit;"><img src="oseille.jpg" style="display: block;"></span>

ou:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<span style="display: table-cell; width: 50%; border: inherit;"
><img src="oseille.jpg" style="display: block;"
></span>

si tu tiens à présenter ton code sur plusieurs lignes.

**NoSmoking** · 25/03/2018, 09h48

Bonjour,

Je voudrais qu'il n'y ait pas de marge en dessous le l'image : que les bords en bas de ma case collent à l'image.

il ne s'agit pas d'un problème de « whitespace », comme évoqué, mais du comportement normal des éléments inline comme les images.

Pour supprimer cet espace il suffit effectivement, comme mis dans l'exemple, de passer l'élément en display:block.

Pourquoi je ne peux pas enlever l'espacement sous mon image ?

Invité · 25/03/2018, 10h46

Bonjour,

1- au lieu de t'arracher les cheveux, lis des tutos... : Les meilleurs cours et tutoriels pour apprendre le CSS

2- A savoir : les navigateurs peuvent ajouter les propriétés "par défaut" à certaines balises (margin, padding,...).
On peut faire un "reset" rapide avec :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
* {
  padding:0;
  margin:0;
  border:0;
  font-size:100%;
  box-sizing:border-box;
}

3- Tu as ici un comportement "table" : pour afficher le texte en haute de "cellule" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

vertical-align:top;

4- D'autre part, remplace tes span (inline par défaut) par des div (block par défaut).
Et supprime les bordures noires : c'est juste moche.

5- Je te conseille de DESSINER (papier, crayon !) ce que tu veux obtenir, en dessinant des "boites" dans des boites".
Ce sera plus facile ensuite à coder.

Positionner une image bord à bord dans la case d'un tableau !

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager