[css] Centrage de tableaux div et span

**HurtMarley** · 09/08/2006, 18h15

Bonjour,
Je suis en train d’éliminer tous les <table> (n lignes, 2 colonnes) d’un site pour les remplacer par des tableaux css.
J’ai remplacé les balises table par des balises div de classe tabSaisieCmps, les tr par des div de classe tabLigne et les cellules gauche et droite par des span de classe caseTabD et caseTabG. Au départ les objets placés dans les cellules étaient alignés à gauche et la largeur des cellules était ajustée sur le plus long des objets. De plus les tableaux centrés sur la page.

Mon problème est que je n’arrive pas a centrer mon tableau (tabLigne) et je n’arrive pas non plus a adapter la largeur des cellules avec l’objet le plus long, donc j’ai mis une taille manuellement mais mes objets ont une taille variable !
J'ai bien trouvé tout un tas de sujets sur les centrages mais je n'arrive à faire fonctionner aucune solution

J’ai crée le css suivant :

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
 
.tabSaisieCmps{
	clear: both;
	border: 2px solid blue;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	width: 80%;
 
}
 
.tabSaisieCmps .tabLigne{
	position: relative;
	clear: both;
	border: 2px solid green;
	width: auto;
}	
 
.tabSaisieCmps .tabLigne .caseTabG{
	position: relative;
	float: left;
	border: 2px solid pink;
	width: 20%;
 	text-align: left;
 
}
 
.tabSaisieCmps .tabLigne .caseTabD{
	position: relative;
	float: left;
	border: 2px solid red;
	width: 30%;
	text-align: left;
 
}

**philippe281281** · 10/08/2006, 11h37

La réponse est simple : garde les tableaux c'est plus pratique !

**HurtMarley** · 10/08/2006, 11h41

Oui mais le problème c'est que du coups pour changer la mise en forme c'est assez lourd les tableaux. Et puis c'est une exigence de virer les tableaux

.
Pfff il me font criser ces css

**philippe281281** · 10/08/2006, 12h11

Pourquoi tu n'expliquerais pas à la personne exigeante qu'elle l'est trop ?

Sinon je pense que tu peux faire
<div style="text-align:center">
<table>
</table>
</div>
et ton tableau devrait être centré.

Pour les largeur variables tu peux tenter width:auto mais je garantis rien...

**HurtMarley** · 10/08/2006, 12h28

lol j'aime beaucoup ta solution de je remplace deux balises center par un div

. Mais la personne exigeante ne veut pas du tout de tableau

. Je l'ai son tableau purement css mais il me reste des problèmes de rezize automatique de cellules et des problèmes de centrage

**philippe281281** · 11/08/2006, 10h32

Nan mais dans mon exemple tu mets ton tableau css à la place de table et c'est pareil....

Et après tu dis à la personne exigeante qu'on ne peut pas faire un tableau CSS avec des cellules de largeur variable, point, comme j'ai dit à mon chef qui voulait la même chose !

Bon, en fait on peut mais ça demande du javascript assez relou... tu récupères la largeur de l'élément le plus grand et tu l'appliques à tous les autres... enfin théoriquement ça devrait marcher... mais personnellement je trouve ça d'une stupidité, quand un bête tableau HTML, interprété correctement par tous, fait tout aussi bien...
Et quelles sont les raisons qui poussent la personne exigeante à ne plus vouloir de tableaux d'ailleurs ?

**HurtMarley** · 11/08/2006, 10h39

Ba il voulait tout passer en css, je tableau je l'ai fais mais ça s'ajuste pas automatiquement

. Et il n'y a meme pas moyen que je jasse du javascript pour les tableaux

**sedryk** · 11/08/2006, 10h51

HurtMarley,

Il est possible d'avoir le code HTML de ta page avec les tableau histoire de voir le rendu que tu vises ?

**HurtMarley** · 11/08/2006, 10h59

Ba c'était un tableau le plus con du monde n lignes 2 colones centrage des textes dans les cellules a gauche et centrage du tableau au centre

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<center>
   <table>
      <tr>
         <td>
             Objets de taille variablea
         </td>
          <td>
             Objets de taille variablea
         </td>
      </tr>
      ......
   </table>
</center>

**sedryk** · 11/08/2006, 11h39

J'ai relu ton message d'origine et je me pose une question : Qu'affiche-tu dans ce tableau ?

si je te pose cette question c'est que j'ai vu que tu voulais garder les "cellules" d'une même colonne de même taille. Or il faut savoir que les tableaux ne sont pas à bannir quand on veut afficher un tableau de données !!!

Le seul cas où il est mieux d'utiliser des "tableaux css" plutôt que des tableaux tout court, c'est pour la mise en page du design. En effet, l'utilisation des CSS et des DIVs permet d'avoir un code source HTML structuré comme un document et donc non dépendant de la présentation.
Conclusion, lorsqu'on doit présenté des données dont la structure est un tableau avec des entêtes de colonne et compagnie, alors on utilise un tableau pas autre chose !

Donc avant d'essayer de te trouver un solution convenable je voudrais être sûr que tu remplace une mise en page (design) par tableau en une mise en page par CSS et c'est pour ça que je t'avais demander s'il était possible de voir ton code. Si tu m'avais mis réellement le code de ta page j'aurais pu déterminer moi-même s'il s'agissait de structure de données ou de mise en page

**HurtMarley** · 11/08/2006, 11h51

dans le tableau il n'y a pas d'entête, a gauche il y a du texte et a droite ça peut etre du texte, une image, ou un input (select, text, radio,...)

En fait a la base dans le tableau il y avait un mix entre un formulaire et des affichages divers, et ça marchait bien mais s'il ne fallait pas vouloir une autre mise en page

Pour le code je ne peux pas te l'envoyer parce que je l'ai complètement dépouillé, et que je n'ai pas acces à la sauvegarde pour le moment à causes de quelques problèmes réseaux.

**sedryk** · 11/08/2006, 12h00

Ok

donc quelque part, chaque ligne de ce tableau correspond à une énumération d'éléments (un texte à gauche et soit un image, soit un (des) élément(s) de formulaire à droite) ?

**HurtMarley** · 11/08/2006, 12h04

oui on peut dire ça

Mais sur la droit il ne peut y avoir qu'un seul élément pas plusieurs
Je sens qu'au final je vais laisser tout ça avec ce bon vieux tableau

**sedryk** · 11/08/2006, 12h13

Si c'est une énumération, alors il n'y a pas à hésiter il s'agit d'une structure de tableau, elle doit donc rester sous forme d'un <TABLE>

Maintenant je peux te proposer une solution sans <TABLE> mais il faudra mettre du javascript si tu veux avoir des cellules de même largueur sur une colonne donné et de même hauteur sur une ligne donnée. A toi de voir

**HurtMarley** · 11/08/2006, 12h16

Merci de votre aide à tous les deux, je vais pas m'amuser à parser mon tableau à la recherche de la taille de l'élément le plus long, je vais éviter de faire le porc

. Je garde les <table> s'il est pas content tant pis

.
++

**sedryk** · 11/08/2006, 13h23

HurtMaley,

Voilà ma solution à base de javascript et css

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
55
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
<title>Untitled</title>
<style>
	body {
  	text-align: center;
	}
	.tab {
  	margin-left: auto;
 		margin-right: auto;
	}
	.col {
		float: left;
		margin: 0;
	}
	.cel {
		border: 1px solid black;
		margin: 0;
	}	
</style>
<script>
	function displayTab() {
		for(i=1; document.getElementById("cel"+i) != null; i=i+2) {
			if (document.getElementById("cel"+i).offsetHeight > document.getElementById("cel"+(i+1)).offsetHeight ) {
				width=document.getElementById("cel"+(i+1)).offsetWidth;
				document.getElementById("cel"+(i+1)).style.height = document.getElementById("cel"+i).offsetHeight;
				document.getElementById("cel"+(i+1)).style.width=width;
			}
			else if (document.getElementById("cel"+i).offsetHeight < document.getElementById("cel"+(i+1)).offsetHeight ){
				width=document.getElementById("cel"+i).offsetWidth;
				document.getElementById("cel"+i).style.height = document.getElementById("cel"+(i+1)).offsetHeight;
				document.getElementById("cel"+i).style.width=width;
			}
		}
		document.getElementById("tab1").style.width = document.getElementById("cel1").offsetWidth + document.getElementById("cel1").offsetWidth; 
	}
</script>
 
</head>
<body onload="displayTab();">
 
	<div id="tab1" class="tab">	
		<div class="col">
			<div id="cel1" class="cel">1 ligne</div>
			<div id="cel3" class="cel">3 longue ligne eryreyveryver<br>lhfalzfhlakh</div>
		</div>
		<div class="col">
			<div id="cel2" class="cel">2 longue ligne</div>
			<div id="cel4" class="cel">4 ligne</div>
		</div>
	</div>	
</body>
</html>

**HurtMarley** · 11/08/2006, 13h32

Merci de t'etre donné tout ce mal.
Je teste ça tout de suite.

[css] Centrage de tableaux div et span

Centrer un élément en CSS

Discussions similaires

Partager

Partager