Mise en page d'un tableau

Version imprimable

21/01/2008, 14h23
Perceuse-Killer

Mise en page d'un tableau

Bonjour à tous,

je ne sais pas si je poste dans la bonne section, mais mon souci concerne la mise en page d'un tableau, lequel récupère le résultat d'une requête SQL.

Le voici : http://img167.imageshack.us/img167/712/screeneg3.jpg

Je ne sais pas encore quel est le nombre exact de colonnes que j'aurais à afficher, mais il est vrai qu'en l'état ce n'est pas très esthétique surtout avec la pagination en bas... :calim2:

Si quelqu'un a uen suggestion de présentation, je suis preneur.

Merci par avance. ;)

a modifier à ta convenance :

CSS :

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
 
tr.titre td p {
	background-color: green;
	color: #FFFFFF;
	font-weight: bold;
        text-transform: capitalize;
}
 
td p:hover { /* ne fonctionne pas sous ie */
	background-color: #FFFFFF;
	color: #000000;
}
 
td {
	padding: 0px;
}
 
p {
	padding: 5px;
	display: block;
	background-color: red;
	height: 25px;
	text-align: center;
	line-height: 25px;
}

html :

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
64
65
<table>
		<tr class="titre">
			<td>
				<p>Id</p>
			</td>
 
			<td>
				<p>nom abregé</p>
			</td>
 
			<td>
				<p>immeuble</p>
			</td>
 
			<td>
				<p>attributaire principal</p>
			</td>
 
			<td>
				<p>nombre occupant</p>
			</td>
		</tr>
		<tr>
			<td>
				<p>1</p>
			</td>
 
			<td>
				<p>villa</p>
			</td>
 
			<td>
				<p>32658841</p>
			</td>
 
			<td>
				<p>mairie</p>
			</td>
 
			<td>
				<p>5</p>
			</td>
		</tr>
		<tr>
			<td>
				<p>etc</p>
			</td>
 
			<td>
				<p>etc</p>
			</td>
 
			<td>
				<p>etc</p>
			</td>
 
			<td>
				<p>etc</p>
			</td>
 
			<td>
				<p>etc</p>
			</td>
		</tr>
	</table>

22/01/2008, 09h27
Perceuse-Killer

Salut kohsaka, et merci beaucoup pour ta réponse rapide.:lol:

Bonne journée
22/01/2008, 10h17
kohsaka

avec l'ajout d'une doc type, l'effet devient possible sous ie7 (j'ai pas testé les autres)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">

en revanche ça déforme le tableau sous Firefox, les balises td sont plus grandes et je n'arrive pas a les réduire :/

si quelqu'un à une idée de ou cela vient.