IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

CSS de tableau contenu dans une div


Sujet :

Tableau en CSS

  1. #1
    Nouveau membre du Club
    Profil pro
    Bioinformaticienne
    Inscrit en
    Novembre 2009
    Messages
    49
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Bioinformaticienne
    Secteur : Industrie Pharmaceutique

    Informations forums :
    Inscription : Novembre 2009
    Messages : 49
    Points : 35
    Points
    35
    Par défaut 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 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!

  2. #2
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 868
    Détails du profil
    Informations personnelles :
    Âge : 41
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 868
    Points : 16 258
    Points
    16 258
    Par défaut
    Tu utilises un "." qui est le sélecteur de classe au lieu d'utiliser le "#" qui est le sélecteur d'identifiant.

    .AmpouleData #AmpouleData

  3. #3
    Nouveau membre du Club
    Profil pro
    Bioinformaticienne
    Inscrit en
    Novembre 2009
    Messages
    49
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Bioinformaticienne
    Secteur : Industrie Pharmaceutique

    Informations forums :
    Inscription : Novembre 2009
    Messages : 49
    Points : 35
    Points
    35
    Par défaut [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 :-)

  4. #4
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 868
    Détails du profil
    Informations personnelles :
    Âge : 41
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 868
    Points : 16 258
    Points
    16 258
    Par défaut
    Tout dépend de ton niveau, mais pour débuter, tu peux regarder celui-ci :

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

  5. #5
    Expert éminent
    Avatar de kdmbella
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2010
    Messages
    799
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Août 2010
    Messages : 799
    Points : 7 038
    Points
    7 038
    Par défaut
    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".

  6. #6
    Nouveau membre du Club
    Profil pro
    Bioinformaticienne
    Inscrit en
    Novembre 2009
    Messages
    49
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Bioinformaticienne
    Secteur : Industrie Pharmaceutique

    Informations forums :
    Inscription : Novembre 2009
    Messages : 49
    Points : 35
    Points
    35
    Par défaut
    Merci beaucoup pour les conseils! J'ai désormais les idées plus claires!

  7. #7
    Invité
    Invité(e)
    Par défaut
    Bonjour,
    tant qu'à te mettre à la "mise à jour" dans l'écriture du code, voici un autre tuto : Les tableaux (XHTML & CSS)

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. CSS d'un tableau contenu dans un DIV
    Par vixell dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 14/08/2008, 08h20
  2. savoir s'il existe un <a href> dans div, elle meme contenue dans une div
    Par poupouille dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 20/02/2008, 20h33
  3. [CSS] Positionner 2 tableaux dans une div
    Par Rei Itchido dans le forum Mise en page CSS
    Réponses: 9
    Dernier message: 12/05/2006, 18h27
  4. [CSS] Centrer le contenu d'une Div
    Par bolo dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 09/03/2006, 19h18
  5. [CSS] Décalage de contenu dans une div
    Par Onyx91 dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 25/01/2006, 15h27

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo