Discussion :

[qwertz26]

Bonsoir,

Je suis en train de mettre au point un formulaire un peu grand, j'aimerai donc le mettre dans un tableau et mettre plusieurs champs sur une même ligne.

Afin de rendre tout cela bien joli et ergonomique, j'aimerai diviser mon tableau (de 4 colonnes) en deux grosses colonnes de 50% de largeur chacune et qui possèdent 2 "sous-colonnes" (la première à taille fixe et la seconde à taille variable).

Voici un schéma pour illustrer tout ça :


J'ai essayer de diviser cela en deux sous-tables, chacune contenu dans une cellule d'une super-table, malheureusement le résultat n'est pas concluant car les hauteur des colonnes de correspond pas toujours (en fonction de la quantité de contenu qui à pour effet d'agrandir celle-ci).

Merci d'avance pour toute l'aide que vous pourrez m'apporter.

Bonne soirée.

[Invité]

Bonjour,
voici une solution :

Code css :

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

1
2
3
4
5
6
7
8
9
<style type="text/css">
* { margin:0; padding:0; }
html,body { width:100%; height:100%; }
.content { width:1000px; }
.t50 { width:50%; float:left; }
.t50 table { width:100%; border:0; }
.t50 table th { background:#ccffff/*bleu*/; width:150px;/*taille fixe*/ }
.t50 table td { background:#ccffcc/*vert*/; }
</style>

Code html :

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
<div class="content">
<div class="t50">
	<table>
		<tr>
			<th>titre 1</th>
			<td>contenu 1</td>
		<tr>
		<tr>
			<th>titre 2</th>
			<td>contenu 2</td>
		<tr>
	</table>
</div>
<div class="t50">
	<table>
		<tr>
			<th>titre 3</th>
			<td>contenu 3</td>
		<tr>
		<tr>
			<th>titre 4</th>
			<td>contenu 4</td>
		<tr>
	</table>
</div>
</div>

Et voici de quoi trouver une MEILLEURE SOLUTION (sans <table>) :
=> Personnalisation d'un formulaire XHTML avec CSS

[Muchos]

Lire le lien de jreaux62. Éventuellement, utiliser display: table;
… mais PAS DE TABLE HTML ! S'il vous plaît, on est plus dans les 90's

[Invité]

@Muchos : merci !
Cela dit, oui et non :
Les <table> restent utiles pour afficher des données... tabulaires !
Et aussi, parfois, pour éviter de se prendre trop la tête avec d'autres solutions, certes plus "in", mais moins pratiques ou plus compliquées à utiliser (et moins bien interprétées par certains navigateurs). Les display:table, display:table-cell, entre autres...

Mais je te rejoins quand il existe, en effet, des solutions "modernes" (moins 90's !) qui peuvent donner un meilleur résultat, plus efficace.

[Muchos]

Je me suis mal exprimé :

Les table html pour faire des tableaux de données, rien de plus normal ! J'en utilise moi-même en html5

Mais pas pour du design (du genre — complètement au hasard — organiser un formulaire )

[qwertz26]

Merci pour vos réponses, je vais voir ce que j'arrive à faire et je reviens vers vous =)

Je ne savais pas que le table n'était plus utilisé pour faire ça. Faut dire que j'avais commencé mon apprentissage autodidacte il y a quelque année, puis mis tout ça de côté pendant un moment.