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

HTML Discussion :

[HTML] Imbrication de tableau et propriétés


Sujet :

HTML

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre émérite Avatar de b_reda31
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Avril 2007
    Messages
    899
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Algérie

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Avril 2007
    Messages : 899
    Par défaut [HTML] Imbrication de tableau et propriétés
    Bonjour tout le monde,
    Je suis entrain de m'initier au langage XHTML avec CSS,j'utilise DreamWeaver 8.
    et je suis tombé sur le problème suivant:

    Je voudrai dessiner un tableau à l'intérieur d'une cellule d'un autre autre tableau englobant,voici "grossomodo" comment j'ai procédé :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    <table >
      <tr>
         <td >
              <table>
                      <tr>
                         <td></td>
                      </tr>
              </table>
          </td>
      </tr>
    </table>

    J y suis arrivé,mais le problème est que le tableau "Fils" est centré dans la cellule du tableau "Père",et moi je voudrai personnaliser l'alignement du tableau à l'intérieur de la cellule
    Ca fait des heures que j'essaie de tâtonner avec des propriétés mais sans résultat.

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Les propriétés de mise en forme des cellules sont héritées, donc vérifie s'il existe des attributs align="center" au niveau des balises du tableau, sinon regarde les CSS pour voir d'où cela provient.
    Ensuite, modifie juste les styles de ton 2e table en y affectant les styles que tu souhaites...

    PS: la première étape, c'est essentiellement pour info, histoire de savoit d'où ça vient, mais tu n'as pas forcément à modifier quoi que ce soit sauf pour la cellule contenant ton 2e tableau, à qui il faut dire de ne pas centrer son contenu
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Membre émérite Avatar de b_reda31
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Avril 2007
    Messages
    899
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Algérie

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Avril 2007
    Messages : 899
    Par défaut
    Merci pour votre roponse.



    Voici un exemple qui illustre mon problème :
    Dans la premiére cellule d'un tableau 3 ligne 1 colonne (Père) je dessine un tableau 1 ligne 1 colonne (Fils);Le tableau Père est en rouge et Fils en vert.



    Pour pouvoir déplacé le tableau Fils à l'intérieur de la cellule du tableau père,j'ai utilisé les propriétés margin-top et margin-left (du tableau Fils).
    Mais je n'arrive pas à coller le tableau fils avec les bords supérieurs de la cellule du tableau père.D'ailleurs dans l'image précédente j'avais mis la valeur 0 pour margin-top du tableau fils! Je ne vois pas pourquoi il ne se colle pas au bords supérieurs

    Citation Envoyé par Bovino Voir le message
    mais tu n'as pas forcément à modifier quoi que ce soit sauf pour la cellule contenant ton 2e tableau, à qui il faut dire de ne pas centrer son contenu
    C'est avec quelle propriété?
    J'ai essayé de modifier les propriétés de la première cellule du tableau Père mais toujours la même chose

  4. #4
    Membre Expert Avatar de Er3van
    Homme Profil pro
    Architecte Logiciel
    Inscrit en
    Avril 2008
    Messages
    1 430
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Architecte Logiciel
    Secteur : Industrie

    Informations forums :
    Inscription : Avril 2008
    Messages : 1 430
    Par défaut
    "cellpadding" spécifie l'espace entre la bordure et le contenu de la cellule du tableau, donc en CSS td { padding : 10px ; } par exemple.

    "cellspacing" spécifie l'espace entre les cellules du tableau, donc en CSS table { border-spacing: 20px; } par exemple.
    Mais si tu veux supprimer cet espace, il te faudra table { border-collapse : collapse ; }.

    Tu peux jouer avec ces propriétés pour parvenir à la disposition qui te convient.
    Néanmoins, l'imbrication de tableaux n'est pas forcément conseillé. Et si tu ne mets pas des données type tableaux à l'intérieur, tu risques de perdre en accessibilité.

  5. #5
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Comme le souligne Er3van, la mise en forme d'un tableau peut se faire soit avec les attributs particuliers des balises dans table (par exemple "cellpadding" et "cellspacing") donc vérifies leur valeur dans le code html.
    Soit en CSS, et là, il y a les styles fixés directement pour les éléments qui t'intéressent qui posent rarement problème car on les retrouve facilement, soit les styles hérités qui peuvent parfois poser problème.

    Poursimplifier tout ça, il existe un outil formidable sur FF qui s'appelle Firebug.
    Quand tu l'ouvres, tu peux parcourir le code html de ta page et pour chaque élément, obtenir dans une fenêtre tous les styles qui lui sont appliqués, d'abord les styles directs puis les héritage, avec en plus la possibilité de désactiver des propriétés ou d'en rajouter pour vérifier le comportement.

    Alors n'attend pas, installe et utilises Firebug...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  6. #6
    Membre Expert Avatar de Er3van
    Homme Profil pro
    Architecte Logiciel
    Inscrit en
    Avril 2008
    Messages
    1 430
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Architecte Logiciel
    Secteur : Industrie

    Informations forums :
    Inscription : Avril 2008
    Messages : 1 430
    Par défaut
    Citation Envoyé par Bovino Voir le message
    Comme le souligne Er3van, la mise en forme d'un tableau peut se faire soit avec les attributs particuliers des balises dans table (par exemple "cellpadding" et "cellspacing") donc vérifies leur valeur dans le code html.
    Peut, mais ne doit pas se faire en HTML.
    Avec le principe de séparation des couches, la mise en forme se gère en CSS.

    Sinon, as-tu essayé d'enlever le "vertical-align : middle", ou s'il est en HTML, il faut de toute façon le passer en CSS pour respecter l'idée évoquée plus haut.

    A mon avis, ça vient du fait que tu as du donné une dimension à ta cellule et à ton tableau.
    C'est la seule explication qui correspond avec ton schéma.
    En effet, si tu donne une dimension 30*100 à un tableau contenue dans une cellule de 60*150, et que celle-ci admet un "vertical-align : middle", des border-spacing (au niveau de la table) et padding nul, on obtient exactement ça.

    Si tu veux régler le problème, ne donne pas de dimension à ton tableau, il prendra l'espace disponible définit au niveau de ta cellule conteneur.

  7. #7
    Membre émérite Avatar de b_reda31
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Avril 2007
    Messages
    899
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Algérie

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Avril 2007
    Messages : 899
    Par défaut
    Citation Envoyé par Er3van Voir le message
    Mais si tu veux supprimer cet espace, il te faudra table { border-collapse : collapse ; }.
    C'est ce que j'ai fait!
    Le tableau Fils s'est coller au bord vertical mais pas horizontal!
    En gros j'arrive à déplacer le Tableau Fils à l'intérieur de la cellule mais seulement horizontalement... Le tableau fils reste toujours centré verticalement .Quel est le problème?

    J'ai utilisé la propriété Vertical-align de la cellule,mais elle ne peut pas prendre des valeurs personnalisées (en pixel par ex)...

Discussions similaires

  1. [MySQL] Affichage résultat requête SQL dans page HTML comme un tableau
    Par joxbl dans le forum PHP & Base de données
    Réponses: 13
    Dernier message: 14/03/2011, 14h26
  2. [JS+HTML]Ligne de tableau comme un lien
    Par ThitoO dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 05/10/2005, 20h48
  3. [HTML]bordure de tableau
    Par totoranky dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 21/05/2005, 15h36
  4. [HTML] Construire un tableau colonne par colonne ?
    Par Cthulhu 22 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 6
    Dernier message: 11/05/2005, 15h31
  5. [HTML]Imbrication de tableaux
    Par LhIaScZkTer dans le forum Balisage (X)HTML et validation W3C
    Réponses: 8
    Dernier message: 06/11/2004, 11h33

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