Discussion :

[philippe281281]

Bonjour ! Ayant sagement utilisé les conseils de ce forum et d'autres, j'ai fait tous mes tableaux avec des balises <div> . MAIS mon chef me demande de pouvoir passer ces tableaux sous excel, pour pouvoir faire des traitements du genre stats, etc...
Alors autant un tableau HTML avec les balises classiques <th>, <tr>, <td> passe nickel avec un copier-coller, autant là c'est la cata avec les balises <div>...
Alors voilà j'aimerais savoir ce que les ardents défenseurs des tableaux <div>+CSS (et même les autres d'ailleurs ) proposent pour m'aider...

[Swoög]

tout dépend de ce que tu présentes...

pour des stats, c'est souvent des données tabulaires donc qui sont présentées sous formes de tableaux... dans ce cas, utiliser des div est aussi absurde que d'utiliser des tableaux pour la mise en forme

ensuite, si tes données sont stockées dans une base de données, il existe de nombreuses librarys qui permettent de créer des documents excels, et notamment le module COM : http://php.net/COM donc tu pourras proposer directement le téléchargement du .xls ^^

[philippe281281]

Ok je vais me rensigner sur cette librairie !

Pour mon choix de présentation, j'ai choisi de mettre des div parce que je voulais que l'en-tete reste fixe quand on scrollait le corps... et aussi d'un point de vue présentation c'est beaucoup moins stressant à manier que des <td>...
Et puis enfin et surtout quand je lisais "les tableaux c'est juste pour les données tabulaires" :
1- je n'ai jamais réussi à trouver une définition de "données tabulaires" (même si je me fais vaguement une vague idée)
2- cette phrase ne signifie pas "les <div>+CSS c'est PAS pour les données tabulaires" !!!! (en gros si "données tabulaires" => "tableaux" on a pas forcément "pas tableaux" => "pas données tabulaires"... )

[Swoög]

si par définition : donnée tabulaires <=> tableaux c'est la sémantique même des données.

des données tabulaires, ça va être des données qui doivent être mises en formes par tabulations...


du style :

Code :

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

1
2
3
4
                   2004             2005          2006         Total
Achats             +10%             -5%           +3%          +8%
Ventes             -2%              +1%           +3%          +2%
Total              +12%             -6%           --           +6%

ça c'est typiquement des données tabulaires, et d'ailleurs on voit parfaitement le tableau qui accompagne...

ensuite, avec overflow + taille fixe, on peut ajouter un scrollbar sur le tableau, et rendre l'en-tête fixe

(avantage thead/tbody etc...)

[philippe281281]

Ah bon ? J'avais échoué à l'époque, même avec des thead et tbody... je vais refaire un essai...
A part ça ta piste m'a mené là : http://stephaneey.developpez.com/tutoriel/php/phpexcel/
Pas encore testé, mais ça m'a l'air pas mal !

[<romain/>]

Ayant sagement utilisé les conseils de ce forum et d'autres, j'ai fait tous mes tableaux avec des balises <div>

euh la il y a un probleme Tu m'as tout l'air d'être atteint d'un divite aigu

Quand tu veux faire un lien tu utilises la balise a, quand tu veux créer un paragraphe tu utilises p et bien quand tu veux faire un tableau tu utilises table.

La balise div sert a definir des blocs simple dans lesquels tu pourras par la suite et si tu le souhaites redefinir diffèrentes balises, mais elle ne doit pas se substituer à toutes les balises.

Si tu as vraiment lu qu'on avait mis sur ce forum qu'il fallait remplacer toutes les balises table par des div c'est qu'on est des gros crétins

Mais a mon avis tu as plus surement lu que chaque balise a son utilité et que la balise table n'est pas du tout faites pour faire de la mise en page. Et que a ce titre effectivement on peux remplacer une structure en table par une structure en div.

Mais la encore il n'y a aucun interet de remplacer tous les td tr et autres th par des divs. Le but est de rendre le code moins "gros", et non de remplcer les table apr des div

Chaque balise (x)html a son utilité et c'est en les utilisant à bon escient qu'on arrive à faire des sites jolie, accessible, conforme au standard, au chargement rapide etc.

Donc pour ton problème peut-être qu'il faut que tu retournes a des <table> <td> <tr>

[philippe281281]

Mais non, vous n'êtes pas du tout des gros crétins !!
Simplement ce que j'avais compris c'est que les balises <div> permettaient de faire des tableaux aussi bien qu'avec les balises <tmachin>, c'est tout... Personne ne m'a jamais dit que les balises <tmachin> étaient mieux dans certains cas... (cf mon précédent message)

Et si je dois changer toutes mes balises ça va être d'un lourd....
Quoiqu'il en soit j'essaie désespéremment de faire mon histoire de scroll sur le corps du tableau et j'y arrive pas !!
Je me souviens qu'à l'époque j'avais cherché comme un fou sur le Net, et partout je voyais "un tableau scrollable wahou super simple avec les <div> !! ...
Bon c'est pas bien le sujet mais siouplé si vous pouviez m'aider... parce que je comprends pas pourquoi là je peux pas scroller mon tbody !! :

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
 
<html>
<table border>
<thead>
	<th>1</th>
	<th>2</th>
	<th>3</th>
</thead>
<tbody style="height:40pt;overflow:auto">
	<tr style="height:20pt">
		<td>a1</td>
		<td>b1</td>
		<td>c1</td>
	</tr>
	<tr style="height:20pt">
		<td>a2</td>
		<td>b2</td>
		<td>c2</td>
	</tr>
	<tr style="height:20pt">
		<td>a3</td>
		<td>b3</td>
		<td>c3</td>
	</tr>
</tbody>
</table>
</html>

[Swoög]

essaie avec des px plutôt que des pt

[philippe281281]

Euh... pourquoi ? J'ai essayé et ça ne marche pas mieux... c'est juste un peu plus petit...

[Swoög]

laisse moi deviner... tu fais tes tests avec IE ?

après vérification IE n'accepte pas les overflow sur les tableaux

[philippe281281]

Aaaaaaaaah ben voilà ! Il me semblait bien aussi ! Malheureusement je suis condamné à développer pour ce navigateur...
Mais je me souviens que je n'avais pas eu que ce problème ! Les cellules font un peu ce qu'elles veulent au niveau présentation... et je ne crois pas que ce soit dû à une ignorance des spécifications CSS de ma part ! J'ai tout bien lu le W3C !

Bon, donc si j'ai bien compris je retrousse mes manches et je m'attaque à l'objet COM Excel ??

[philippe281281]

RRHHHHAAAAAAAAAAAAAAAAAAAAAAAAAAAA !!!!!!!
JE VIENS DE TROUVER LE SAINT GRAAL !!
Ci-dessous un code méga simple pour faire un tableau HTML scrollable avec en-tete fixe, dont l'entete s'ajuste automatiquement au contenu des colonnes !!!!
(Réserve : pour des données pas trop lourdes, parce que je charge deux fois le même tableau .... en tout cas moi ça me va ! ....Ah je voudrais tant vous faire partager ma joie !! J'en pleurerais tellement je suis heureux ! )
(Note:pour le premier tableau, celui qui conditionne la largeur des colonnes de l'en-tete, vous pouvez vous contenter d'afficher seulement les colonnes les plus larges : ainsi vous chargez moins)

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
 
<html>
<div style="height:22px;overflow:hidden">
<table border>
<thead>
	<th>1</th>
	<th>2</th>
	<th>3</th>
</thead>
<tbody >
	<tr>
		<td>a1</td>
		<td>b1</td>
		<td>c1</td>
	</tr>
	<tr>
		<td>a2</td>
		<td>b2</td>
		<td>c2</td>
	</tr>
	<t>
		<td>a3</td>
		<td>b3</td>
		<td>c3</td>
	</tr>
</tbody>
</table>
</div>
 
<div style="height:40px;width:200px;overflow:auto">
<table border >
<tbody>
	<tr>
		<td>a1</td>
		<td>b1</td>
		<td>c1</td>
	</tr>
	<tr>
		<td>a2</td>
		<td>b2</td>
		<td>c2</td>
	</tr>
	<tr>
		<td>a3</td>
		<td>b3</td>
		<td>c3</td>
	</tr>
</tbody>
 
</table>
</div>
</html>

[philippe281281]

Aïe je viens de trouver une faille : si vous vous voulez l'imprimer depuis le navigateur ça fera un peu n'importe quoi... bon ok je me suis peut-etre un peu emballé tout à l'heure...
Si vous voulez faire un copier-coller sur Excel sans que ça copie deux tableaux il ne faut sélectionner que la ligne d'en-tete.

[philippe281281]

Failles réparées ! Avec un petit peu de Javascript (désolé les modos si du coup je suis un peu HS... mais tout est lié vous le savez bien... )

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
56
57
58
59
 
<html>
<head>
<link rel=stylesheet type="text/css" href="test.css" />
</head>
 
 
<div id="1" class="tab1">
<table border>
<thead>
	<th>1</th>
	<th>2</th>
	<th>3</th>
</thead>
<tbody >
	<tr>
		<td>a1</td>
		<td>b1</td>
		<td>c1</td>
	</tr>
	<tr>
		<td>a2</td>
		<td>b2</td>
		<td>c2</td>
	</tr>
	<t>
		<td>a3</td>
		<td>b3</td>
		<td>c3</td>
	</tr>
</tbody>
</table>
</div>
 
<div id="2" style="height:40px;width:200px;overflow:auto">
<table border >
<tbody>
	<tr>
		<td>a1</td>
		<td>b1</td>
		<td>c1</td>
	</tr>
	<tr>
		<td>a2</td>
		<td>b2</td>
		<td>c2</td>
	</tr>
	<tr>
		<td>a3</td>
		<td>b3</td>
		<td>c3</td>
	</tr>
</tbody>
 
</table>
</div>
<button onClick="document.getElementById('2').className='cache';document.getElementById('1').className='blabla' " >Préparer pour l'impression</button>
<button onCLick="document.getElementById('2').className='blabla';document.getElementById('1').className='tab1' ">Navigation</button>
</html>

avec test.css comme ceci :

Code :

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

1
2
3
4
5
6
7
8
9
 
 
.tab1{
	height:22px;
	overflow:hidden
} 
.cache {
	display:none
}

Bon, j'aimerais bien un petit avis là... je me sens tout seul ! Vous allez quand même pas me dire que tout cela est nickel ??

[philippe281281]

Bon, je le considère résolu alors ?

[philippe281281]

Finalement pour le tableau scrollable ce code va beaucoup mieux :

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
56
57
58
59
60
61
62
63
 
<html>
<head>
<link rel=stylesheet type="text/css" href="test.css" />
</head>
 
 
<div id="1" style="overflow:hidden;height:24px;position:absolute">
<table border>
	<tr style="background-color:yellow">
		<td >titre1</td>
		<td>titre2</td>
		<td>titre3</td>
	</tr>
	<tr>
		<td>a1</td>
		<td>b1</td>
		<td>c1</td>
	</tr>
	<tr>
		<td>a2</td>
		<td>b2</td>
		<td>c2</td>
	</tr>
	<t>
		<td>a3</td>
		<td>b3</td>
		<td>c3</td>
	</tr>
</tbody>
</table>
</div>
 
<div id="2" class=tab2>
<table border >
 
	<tr>
		<td>titre1</td>
		<td>titre2</td>
		<td>titre3</td>
	</tr>
	<tr>
		<td>a1</td>
		<td>b1</td>
		<td>c1</td>
	</tr>
	<tr>
		<td>a2</td>
		<td>b2</td>
		<td>c2</td>
	</tr>
	<tr>
		<td>a3</td>
		<td>b3</td>
		<td>c3</td>
	</tr>
 
 
</table>
</div>
<button style="position:absolute;top:500px" onClick="document.getElementById('1').className='cache';document.getElementById('2').className='blabla' ">Préparer pour l'impression</button>
<button style="position:absolute;top:500px;left:300px;" onClick="document.getElementById('2').className='tab2';document.getElementById('1').className='tab1'; ">Navigation</button>
</html>

avec tes.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
 
.cache {
	display:none
}
 
.tab1{
	height:24px;
	z-index:2;
	position:absolute;
	overflow:hidden
}
 
.tab2{
	height:50px;
	overflow:auto
}

[philippe281281]

ça pose encore des pb pou rl'impression ou le copier-coller...
Conclusion : oubliez les tableaux HTML scrollables. La répétition de l'en-tête toutes les x lignes est plus simple.