CSS de tableau contenu dans une div [Résolu]

[MissElo]

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 :

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!

[Bisûnûrs]

Tu utilises un "." qui est le sélecteur de classe au lieu d'utiliser le "#" qui est le sélecteur d'identifiant.

.AmpouleData #AmpouleData

[MissElo]

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

[Bisûnûrs]

Tout dépend de ton niveau, mais pour débuter, tu peux regarder celui-ci :

http://css.developpez.com/tutoriels/premiers-pas/

[kdmbella]

il est important de bien comprendre la notion de sélecteur en css. ainsi, quand tu as le selecteur '.nom_de_taclasse' tu peut l'appliquer a n'importe quel élément de ta page html via l'attribut "class =nom_de_taclasse "
alors qu'avec le sélecteur '#id_de_ton _element' celui ci ne s'appliquera qu'a l'élément de ta page ayant cet id="id_de_ton _element".

[MissElo]

Merci beaucoup pour les conseils! J'ai désormais les idées plus claires!

[jreaux62]

Bonjour,
tant qu'à te mettre à la "mise à jour" dans l'écriture du code, voici un autre tuto : Les tableaux (XHTML & CSS)