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