Créer un tableau spécial

Version imprimable

15/08/2013, 10h10
collosus

Créer un tableau spécial

bonjour tout le monde,

je ne sais pas si je suis dans le bon langage, donc dites moi s'il faut que je change de forum.

J'aimerais créer un tableau qui afficherait le détail lorsque que l'on clique sur la ligne principale.

Je m'explique, je souhaite créer un tableau qui compare plusieurs produits. J'aurais donc 5 grandes catégories pour lesquels j'attribue une note. Les internautes s'ils veulent voir le détail de ces catégories devront cliquer sur la ligne principale (avec les notes).

Si vous avez de idées?

Merci beaucoup

bonjour
peut etre cela ?

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
 
<!DOCTYPE html>
<head>
<title>title</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
 
 
<style type="text/css">
a {
  position : relative;
}
a span {
  display : none;
}
a:active span {
  display : block;
  position : absolute;
}
</style>
 
 
</head>
 
 
<body>
  <a href="">Texte toujour affiche<span>texte affiche au clic de souris</span></a>
</body>
 
 
</html>

Pourquoi masquer par défaut ces informations ?

En tous cas, l'idée m'a amusé :). Je propose l'utilisation du sélecteur :TARGET. Ex:

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
66
67
68
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
	<meta charset="UTF-8" />
 	<title>L'appeau sur les OS !</title>
	<style type="text/css">
table {
        width: 50%;
        margin: auto;
        text-align: center;
}
td {
        border-bottom: thin dotted #333;
}
.avis {
        display: block;
        position: relative; /* Pour croix de fermeture */
        visibility: hidden; /* Avis masqué par défaut */
        text-align: left;
}
.avis:target {
        visibility: visible; /* Avis visible si sélectionné */
        background: #EDF;
}
.close {
        position: absolute;
        top: 0;
        right: 0;
        border: thin solid black;
        text-decoration: none;
        color: black;
}
        </style>
</head>
<body> 
 
	<table>
		<caption><h1>Comparez nos OS !</h1></caption>
		<tr>
			<th>Système d'exploitation</th>
			<th>Note</th>
		</tr>
		<tr>
			<td>Micrapplux</td>
			<td>
				<a title="Cliquez pour plus de détails." href="#a"><meter value="2" max="5">2 sur 5</meter></a>
				<span class="avis" id="a">
					Pas terrible :(
					<br /> C'était mieux avant®...
					<a class="close" title="Fermer." href="#">×</a>
				</span>
			</td>
		</tr>
		<tr>
			<td>Linicropple</td>
			<td class="note">
				<a title="Cliquez pour plus de détails." href="#b"><meter value="4" max="5">4 sur 5</meter></a>
				<span class="avis" id="b">
					Super :)
					<br /> Ça n'a planté que 6 fois en 3 jours !
					<a class="close" title="Fermer." href="#">×</a>
				</span>
		</td>
		</tr>
	</table>
 
</body>
</html>

15/08/2013, 19h07
collosus

Merci beaucoup
je vais arranger ça à ma sauce.
encore merci