[Resolu] Cellpadding cellspacing vont ou ?

désolée pour ma premiére question, mais je viens chez les spécialistes
pour savoir si cellpadding et cellspacing sont bien des atributs qui n'ont pas leur place dans les CSS ?
si c'est le cas dois-je mettre des " des ' ou rien ?

<td cellpadding=0 cellspacing=0>

et mieux encore cette régle des " ' ou rien est' elle générale ?
merci.
Modifié par Christele (04 Aug 2009 - 09:56)

Salut,

Les attributs cellpadding et cellspacing ont leur équivalent en CSS. padding sur le <td> pour cellpadding et border-spacing sur le <table> pour cellspacing.

En ce qui concerne les délimiteurs, ils sont tous les 3 valides (sauf en XHTML où "aucun" ne passe pas la validation), mais par convention on utilisera les guillemets.

Bonjour aussi

Les délimiteurs utilisés n'ont rien à voir avec la présence ou non d'un équivalent en CSS. Ne mettre aucun délimiteur est incorrect en XHTML et plus que fortement déconseillé en HTML.

Que tu utiliser ' ou " ne présente pas une grande différence, l'important c'est de rester cohérent tout au long d'un document.

Laurie-Anne a écrit :

et

Agylus a écrit :

en tout premier Bonjour, et escusez cet oublie dans ma précipitation.
Vos deux réponses se complétent parfaitement et au moins un point
bien classé danss ma petite tête. de toute façon c'est facile je vais opter pour les " ..

J'ais bien noté les équivalent en CSS que je ne connaissait pas.
Encore merci

Au passage, les attributs cellpadding et cellspacing sont autorisés en XHTML, donc il n'y a aucune raison de s'en priver, vu que nombre de navigateurs (IE jusqu'à la version 7 incluse pour ne citer que lui) ne comprend pas la propriété border-spacing.

Au passage toujours, ces deux attributs doivent se mettre sur la balise <table> et non la balise <td>.

Agylus a écrit :
Au passage, les attributs cellpadding et cellspacing sont autorisés en XHTML, donc il n'y a aucune raison de s'en priver, vu que nombre de navigateurs (IE jusqu'à la version 7 incluse pour ne citer que lui) ne comprend pas la propriété border-spacing.
Au passage toujours, ces deux attributs doivent se mettre sur la balise <table> et non la balise <td>.

Je sent que nous ne sommes pas d'accord, IE 6 7 et 8 comprennent trés bien

table {border-spacing: 0px;border-collapse:collapse;} 

avec border-collapse qui est a préciser car separet de base.

Effectivement, on n'est pas d'accord !

border-collapse ne sert pas à réduire l'espace entre les bordures, il fait en sorte de les confondre.
Par défaut, sur la majorité des navigateurs, les cellules ont une bordure d'1px inset et le tableau une bordure d'1px outset lorsque l'on affiche un tableau avec ses bordures. Que l'on utilise l'attribut cellspacing ou la propriété border-spacing renseignés à 0, le résultat est le même sur Firefox, c'est-à-dire que la largeur des bordures fait 2px. Juste que l'espace entre ces bordures a été réduit à 0.

En utilisant le border-collapse à collapse, on "interdit" l'utilisation de border-spacing, puisque quelle que soit la valeur qu'on lui renseignera elle ne sera pas prise en compte, vu que les bordures sont confondues.
Il n'y a (à ma connaissance) aucun équivalent HTML à la propriété CSS border-collapse.

Bonjour,
Désolé d'avoir retiré le "RESOLU"
mais en testant sur vos conseils je constate plein de choses , ne voulant pas réouvrire un sujet , je continue.

J'avais un espace entre mes images et fonds dans un tableau
je l'avais réglé avec dans le html

<table cellspacing=0><tr><td cellpadding=0 >

suite a vos conseils j'ais fais une feuille de style

table {margin: 0px;border: 0px;}
td {padding: 0px;}

Le défault est réaparu ? mais avec

table {margin: 0px;border: 0px;border-spacing: 0px;border-collapse:collapse;}
td {padding: 0px;}

tout était parfait ???
donc c'est pas clair pour moi
merci de vos idées
Modifié par Christele (03 Aug 2009 - 19:14)

Et avec <table cellspacing="0" cellpadding="0"> ?

ps : met des guillemets à tes attributs !

Fabious a écrit :
Et avec <table cellspacing="0" cellpadding="0"> ?
ps : met des guillemets à tes attributs !

Oui oui avec les guillemets pareil, voici mon test
(j' ais mis le style dans le html pour que tu ais tout d'un seul coup d'oeil

MARCHE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<!--  etc... dont appel feuille de style -->
</head>
<body>
<style>
BODY {
background-color : #75B2B2;
margin: 0; 
}
table {margin: 0px;border: 0px;border-spacing: 0px;border-collapse:collapse;}
td {padding: 0px;}
td.general {background-image:url(general.jpg); }
div.centre900 {width: 900px;margin : auto;}
</style>
<div class="centre900">
<table width="800px"><tr><td><img src="haut.jpg" width="800px" height="30px" alt="" /></td></tr><tr><td class="general">
<p align="center">
xxxxxxxxxxxxxxxxxxxxxxx<br />
<br /><br /><br /><br />
et en bas
</p>
</td></tr><tr><td><img src="bas.jpg" width="800px" height="30px" alt="" /></td></tr></table>
<div>
</body></html>

MARCHE PAS

<!-- LE MEME MAIS --------->
table {margin: 0px;border: 0px;border-spacing: 0px;}

par contre ma version qui marchait sans feuille de style était bien avec guillemets
Modifié par Christele (03 Aug 2009 - 23:20)

Personnellement je fais toujours par habitude <table cellspacing="0" cellpadding="0" border="0"> lorsque j'attaque un tableau, après à toi de voir si tu tiens à séparer le + possible l'html et la mise en page.

a écrit :
J'avais un espace entre mes images et fonds dans un tableau

Là j'ai pas très bien compris, tu veux que ton image de fond prenne toute la cellule c'est ça ?
Modifié par Fabious (03 Aug 2009 - 20:05)

Hello,

Faisons un point:

1. L'équivalent de l'attribut HTML cellpadding en CSS est la propriété padding, appliquée aux cellules (élément TD ou TH). Elle est supportée par tous les navigateurs.

2. L'équivalent de l'attribut HTML cellspacing en CSS est la propriété border-spacing, appliqué au tableau (élément TABLE). Elle est supportée par tous les navigateurs récents. Les anciennes versions qui peuvent poser problème sont IE 6 et 7, qui n'ont aucun support de border-spacing.

3. CSS rajoute de plus les propriétés border-collapse, table-layout, empty-cells et caption-side. Seules les deux premières sont vraiment intéressantes (les deux autres étant soit trop limitées, soit mal implémentées, et plutôt les deux à la fois).

La seule chose qui obligerait à utiliser un attribut de mise en forme dans le code HTML, ce serait si on voulait utiliser cellspacing pour écarter les bordures de cellules de tableau. En général, la plupart des design de tableaux à intégrérer utiliseront table-collapse: collapse, qui rend l'utilisation de cellspacing inutile.

À retenir: la plupart du temps, on aura juste besoin de:

<table>
  <tr>
    <td> Blah. </td>
  </tr>
</table>

Modifié par Florent V. (03 Aug 2009 - 20:40)

merci pour la leçon

Fabious a écrit :
Personnellement je fais toujours par habitude <table cellspacing="0" cellpadding="0" border="0"> lorsque j'attaque un tableau,

Ok moi aussi tu as vu, mais je veux entrer dans la tendance de séparer le HTML et le style et c'était mon seul but dans ma question, puisque cela marchait avant. Tu comprends ma démarche ?

a écrit :
j'ai pas très bien compris, tu veux que ton image de fond prenne toute la cellule c'est ça ?

Non, j'ais le fond que dans le TR central, en haut et en bas ce sont des images a bord rond qui doivent faire un tout

As tu pris mes trois images puis mon html et juste testé en quelques secondes sur ton micro.
Merci en tout cas du temps que tu prends pour moi.

Florent V. a écrit :
Hello,Faisons un point:
À retenir: la plupart du temps, on aura juste besoin de:

<table>
  <tr>
    <td> Blah. </td>
  </tr>
</table>

Oui merci beaucoup c'est trés clair et ça me précise encore mieux les choses,
c' est agréable un tel résumer !

tu as précisé la plupart du temps, et si tu as testé mon exemple complet tu as compris que je ne peut pas m'en sortir ainsi, qu'en penses tu ?

Bien sur je sais faire autre chose pour ce résultat, mais ce qui m' intéresse
c' est ce cas d'école de ne pas avoir l'espace !
Modifié par Christele (03 Aug 2009 - 21:48)

Christele a écrit :
tu as précisé la plupart du temps, et si tu as testé mon exemple complet tu as compris que je ne peut pas m'en sortir ainsi, qu'en penses tu ?

J'en pense que je n'ai pas testé ton exemple complet MAIS que tu peux quand même t'en sortir avec un border-collapse:collapse. Ton problème n'est pas là. Si tu mets une couleur de fond à tes TD (td {background: red;}) tu constateras que l'espace sous les images n'est PAS un espace entre les cellules, mais un espace dans la cellule elle-même.

Christele a écrit :
c' est ce cas d'école de ne pas avoir l'espace !

Je soupçonne quelque chose qui n'a rien à voir. Et qui se trouve avec une petite recherche pas trop compliquée:
http://www.alsacreations.com/search/tag/espace

Ceci dit, cas d'école mis à part, mettre des éléments IMG dans des cellules de tableau pour faire un simple cadre à bords arrondis, ça nous rappellerait presque tendrement les glorieuses années 1999-2000.
Plus sérieusement: ça clashe avec le principe de séparation du contenu (HTML) et de la mise en forme (CSS). D'une part, il se peut qu'on puisse se passer facilement de la structure en tableaux. D'autre part, même si on doit/veut garder le tableau, on peut éviter de placer des images de mise en forme dans le code HTML, et les appliquer plutôt comme images de fond en CSS.
Modifié par Florent V. (03 Aug 2009 - 22:49)

Florent V. a écrit :

J'en pense que je n'ai pas testé ton exemple complet MAIS

Encore merci a vous tous ici, et ton article Florent est trés complet, du reste nouvelle ici, j'avais lu déjas tes articles.
Quel temps donné aux autres ,

Je suis vraiment dans un cas curieux ou le phénoméne décris n'existe pas. Du reste j'ais rajouté ce que tu dis et voila le test complet dans le cas ou je n' utilises pas

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<!--  etc... dont appel feuille de style -->
</head>
<body>
<style>
BODY {
background-color : #75B2B2;
margin: 0; 
}
table {margin: 0px;border: 0px;}
td {padding: 0px;background: red}
td.general {background-image:url(general.jpg); }
div.centre900 {width: 900px;margin : auto;}
</style>
<div class="centre900">
<table width="800px"><tr><td><img src="haut.jpg" width="800px" height="30px" alt="" /></td></tr><tr><td class="general">
<p align="center">
xxxxxxxxxxxxxxxxxxxxxxx<br />
<br /><br /><br /><br />
et en bas
</p>
</td></tr><tr><td><img src="bas.jpg" width="800px" height="30px" alt="" /></td></tr><tr><td>gggggggggggggggggggggggg</tr></td></table>
<div>
</body></html>

Regardes l'image résultat.

Tu aurais effectivement moins de problème avec un structure :

<div id="haut"></div>
<div id="corps"></div>
<div id="bas"></div>

#haut{
  width:800px;
  height:30px;
  background:url(haut.jpg) no-repeat;
}
#bas{
  width:800px;
  height:30px;
  background:url(bas.jpg) no-repeat;
}
#corps{
  width:800px;
  background:url(general.jpg) repeat-y;
}

Laurie-Anne a écrit :
Tu aurais effectivement moins de problème avec un structure : Div ...

Oh oui je comprends bien cela, et me voici de retour dans la norme
Merci a toi.
Merci toutes et tous je remets RESOLU