Définir une taille englobant plusieurs colonnes d'un tableau

Version imprimable

10/05/2012, 20h58
qwertz26

Définir une taille englobant plusieurs colonnes d'un tableau

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 :
http://img585.imageshack.us/img585/5663/tableaua.png

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.

Bonjour,
voici une solution :

Code:

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:

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

11/05/2012, 21h16
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 :calim2:
11/05/2012, 22h15
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.
12/05/2012, 01h27
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 ;) )
13/05/2012, 19h46
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.