CSS de tableau contenu dans une div
Bonjour à tous!
Autrefois j'avais l'habitude d'organiser mes pages html grâce aux tableaux mais la tendance est plutôt aux div! J'essaie donc de m'y mettre mais je rencontre quelques difficultés à faire ma feuille css.
J'ai créé des div et chaque div contient des tableaux de données.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<div id="ampouleLocation">
<TABLE>
<TR>
<TH>Titre de tableau</TH>
</TR>
<TR>
<TD CLASS="empty">Donnee du tableau</TD>
<TD CLASS="full">Donnee du tableau</TD>
</TR>
</TABLE>
</div>
<div id="ampouleData">
<TABLE>
<TR>
<TD>Donnee du tableau</TD>
</TR>
</TABLE>
</div> |
Je souhaite styliser ces tableaux donc voici le css que j'ai créé :
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
| div#AmpouleLocation {
float:left;
width:250px;
height:250px;
background-color:#FFCC00;
}
.AmpouleLocation table {
border-collapse: collapse;
margin-top:2em;
}
.AmpouleLocation td{
font-family: sans-serif;
font-style:italic;
border: thin solid #6495ed;
width: 20px;
height:20px;
padding: 5px;
text-align: center;
}
td.empty{
background-color:green;
font-weight:bold;
}
td.full{
background-color:red;
}
div#AmpouleData {
height:250px;
}
.AmpouleData table {
width:100%;
margin-top:2em;
border: medium solid #6495ed;
border-collapse: collapse;
}
.AmpouleData th{
text-align:left;
height:20px;
font-family: monospace;
border: thin solid #6495ed;
width: 50%;
padding: 5px;
background-color: #D0E3FA;
}
.AmpouleData td{
height:20px;
font-family: sans-serif;
border: thin solid #6495ed;
width: 50%;
padding: 5px;
text-align: center;
background-color: #ffffff;
} |
Ce qui ne fonctionne pas : la mise en page du tableau (alors que la mise en page des cellules empty ou full fonctionne).
Je pense que j'ai commis une erreur de syntaxe mais même en lisant plusieurs tutoriels, je n'arrive pas à savoir comment styliser un tableau à l'intérieur d'une div.
Si toutefois vous sauriez comment résoudre mon problème ou carrément mon conseiller une autre façon de faire plus correcte, je suis preneuse!
Merci d'avance!
[Résolu] CSS de tableau contenu dans une div
Super merci beaucoup!
J'en profite pour demander si tu me conseillais un tuto particulier ou un livre pour le css? J'en trouve plein d'éparpillé sur un sujet spécifique mais je n'ai pas encore trouver de manuel complet.
Sujet résolu :-)
