Discussion :

[b_reda31]

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.

[Bovino]

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

[b_reda31]

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

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

[Er3van]

"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é.

[Bovino]

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...

[Er3van]

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.

[b_reda31]

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