Espacement cellules tableau

Espacement cellules tableau - HTML/CSS - Programmation

Marsh Posté le 23-12-2010 à 18:30:07    

Bonjour à tous et à toutes,
 
Je débute en html et css et j'aimerais arriver à créer un espace entre deux cellules d'un tableau. Je précise que j'aimerais que l'espace ne soit créé qu'entre le bas de la première (cell1) et le haut de la seconde (cell2).
 
Je précise également que les cellules ont des bordures, la solution du padding est donc exclue car l'espace doit se situer entre les deux bordures.
 
J'ai essayé avec des margin cela n'a pas fonctionné. La solution pourrait être d'utiliser des cellspacing mais je ne sais pas comment cela fonctionne et surtout je n'ai pas l'impression que cela permette de choisir où se situera l'espace.
Quelqu'un aurait-il une idée ?
 
Voici mon code html :  
<table>
  <tr>
     <td>cell1</td>
 </tr>
 <tr>
     <td>cell2</td>
 </tr>
</table>
 
Et mon css :
 
td {
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 border: 2px solid #fff1e4;
 padding: 5px 5px;
}
 
 
Merci par avance et très bonnes fêtes de fin d'année à toutes et à tous.

Reply

Marsh Posté le 23-12-2010 à 18:30:07   

Reply

Marsh Posté le 30-12-2010 à 12:53:10    

Bonjour,
 
Personne n'a une petite idée ?
 
Merci.

Reply

Marsh Posté le 30-12-2010 à 13:02:33    

Citation :

Quelqu'un aurait-il une idée ?

Oui, mais à propos de quoi ?
Si c'est à propos de l'espacement en général, le sujet est trop vaste pour être traité en une petite réponse sur un forum.
 
Il y a plusieurs choses qui rentrent en ligne de compte. Cela dépend des cas. Il y a padding, margin, height, overflow, line-height, font-size, ....
 
Edit :

Citation :

padding: 5px 5px;

Attention, cela défini du padding pour les 4 côtés, et non pas pour 2 côtés seulement comme on pourrait le penser. Peut-être qu'il vaudrait mieux définir avec padding: 5px 5px 0px 0px; ou définir plus précisément padding-top, padding-left, etc. Voir http://www.w3schools.com/css/css_padding.asp


Message édité par olivthill le 30-12-2010 à 13:11:44
Reply

Marsh Posté le 30-12-2010 à 20:17:39    

Bonjour,
 
Je vous remercie de votre réponse. Le padding ne fonctionne pas dans mon cas car j'ai mis des bordures à mes td et que je veux que l'espace se place entre les deux cellules, donc entre les deux bordures.  
 
Pour pallier à mon soucis j'ai finalement ajouté un autre td au milieu des deux. J'ai enlevé la bordure et ajouté une grosse marge intérieure. Cela fait illusion mais je ne sais pas si c'est la meilleure solution ...
 
Merci à vous et très bonne fin d'année !

Reply

Marsh Posté le 30-12-2010 à 22:32:30    

Sinon tu appliques le css à ton tr
tr{margin-bottom: 5px;}
 
Si tu veux le mettre qu'entre la première et la deuxième ligne, utilise un class ou mets le css dans les propriétés du tr

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed