[HTML][CSS]tableaux div excel

Version imprimable

23/06/2006, 15h34
philippe281281

[HTML][CSS]tableaux div excel

Bonjour ! Ayant sagement utilisé les conseils de ce forum et d'autres, j'ai fait tous mes tableaux avec des balises <div>8-) . 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>...:aie:
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...
23/06/2006, 15h36
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 ^^
23/06/2006, 15h55
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"... ):(

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:

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...)

23/06/2006, 16h14
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 ! :D
23/06/2006, 16h22
<romain/>

Citation:

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> ;);););)

Mais non, vous n'êtes pas du tout des gros crétins !! :D
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....:aie:
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:

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>

23/06/2006, 16h52
Swoög

essaie avec des px plutôt que des pt ;)
23/06/2006, 16h55
philippe281281

Euh... pourquoi ? J'ai essayé et ça ne marche pas mieux... c'est juste un peu plus petit...
23/06/2006, 16h59
Swoög

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

après vérification IE n'accepte pas les overflow sur les tableaux
23/06/2006, 17h09
philippe281281

Aaaaaaaaah ben voilà ! Il me semblait bien aussi ! Malheureusement je suis condamné à développer pour ce navigateur... :cry:
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 ??

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 .... :mrgreen: en tout cas moi ça me va ! ....Ah je voudrais tant vous faire partager ma joie !! :mrgreen: J'en pleurerais tellement je suis heureux ! :cry: )
(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:

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>

23/06/2006, 18h35
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... :lol:
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.

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:

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:

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 ?? ;)

26/06/2006, 09h45
philippe281281

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

Finalement pour le tableau scrollable ce code va beaucoup mieux :

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
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:

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
}

26/06/2006, 11h22
philippe281281

:cry: ç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.