Ajustement hauteur de cellule avec rowspan

**absolut75** · 16/09/2015, 10h54

Bonjour,

Je n'arrive pas à faire un truc qui pourtant paraît tout bête en HTML:

Un tableau de 3 lignes par 2 colonnes, et :

colonne 1 => 1 case de 1 ligne, puis une case de 2 lignes
colonne 2 => 1 case de 2 lignes, puis une case de 1 ligne

Voici le code qui me paraissait le plus approprié :

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
<html>
<body>
 
<table align="center" border="1" cellpadding="2" cellspacing="0">
 
	<tr>
		<td>1</td>
		<td rowspan="2">2</td>
	</tr>
 
	<tr>
		<td rowspan="2">3</td>
	</tr>
 
	<tr>
		<td>4</td>
	</tr>
 
	</table>
 
</body>
</html>

J'ai essayé en rajoutant des <td></td> un peu partout sans succès.

Si ce n'est pas clair, je voudrais que dans la table ci-dessus : mon "2" soit à cheval sur "1" et "3" et que le "3" soit à cheval sur "2" et "4"...

Merci de votre aide

**absolut75** · 16/09/2015, 12h21

J'ai un peu avancé !

Je voudrais obtenir ceci, mais sans la colonne de droite, où figure le "Z" ...

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
<html>
<body>
 
<table align="center" border="1" cellpadding="2" cellspacing="0">
 
	<tr>
		<td>1</td>
		<td rowspan="2">2</td>
		<td/>
	</tr>
 
	<tr>
		<td rowspan="2">3</td>
		<td>Z</td>
	</tr>
 
	<tr>
		<td>4</td>
		<td/>
	</tr>
 
	</table>
 
</body>
</html>

... mais je n'y arrive pas.

Merci de votre aide

**cervo** · 16/09/2015, 15h20

Voilà un truc qui pourrait t'aider :
http://www.tablesgenerator.com/html_tables

**absolut75** · 17/09/2015, 00h16

Merci cervo !

Bien pratique ce petit site.

Par contre, pour mon problème, il me sort exactement le code fourni en premier, et qui me paraissait simple. Mais çà ne rend pas çà dans un navigateur ...

**NoSmoking** · 17/09/2015, 18h59

Bonjour,
tu n'as rien à te reprocher et ta construction est correcte sauf que.... le fonctionnement des TABLEs en a décidé autrement, sans autres précisions elles s'adaptent à leur contenu.

Place simplement ce CSS dans ta page

Code css :

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