Transformer cellpading et cellspacing en class CSS

Bonjour,

je souhaite supprimer les cellpading et cellspacing en mettant à la place des styles CSS.

Voici mon table à la base :
<table summary="" width=757 cellpadding=0 cellspacing=0>

Après changement :
<table summary="" class="sansmarge">

Sachant que :
.sansmarge
{
border:0;
border-collapse: collapse;
border-spacing: 0px;
padding: 0px;
margin:0px;
width:757px;
}

Voici ce que ça donne : http://www.ville-isle-adam.fr/indexbis.php

Pouvez-vous m'aider s'il vous plaît ?
Je ne sais vraiment pas comment faire.

Merci
Modifié par elisa (05 Jul 2010 - 16:06)

Bonjour Elisa,

Tu dois aussi éliminer le padding des td, par exemple :

.sansmarge td {
padding:0;
border:0;
}

Cette règle s'appliquera à tous les td qui sont des enfants d'un élément ayant la classe .sansmarge.

À noter qu'en règle générale, il est préférable d'utiliser les tableaux pour présenter des données, et non pour de la mise en page.
Modifié par Tony Monast (05 Jul 2010 - 16:24)

Merci pour ton conseil. J'essaie de suite.

J'ai mis un style "sansmarge" à chaque td mais ça ne change rien...
que faire...

Tu m'as mal compris.

Si ton tableau possède la classe "sansmarge", le code suivant s'appliquera automatiquement à chacun des td de ton tableau. Inutile de mettre une classe à chaque td.

.sansmarge td {
padding:0;
border:0;
}

Si ça ne fonctionne toujours pas, montre-moi le code HTML et CSS que tu as essayé pour le tableau.

Lire l'article sur les sélecteurs CSS.
Modifié par Tony Monast (05 Jul 2010 - 16:52)

Voici le code (il est très long, c'est le tableau qui contient tout) :
<table summary="" class="sansmarge">
<tr>
<td colspan=4 rowspan=6 class="valign_top txt_middle" ><img src="images/logo_ia.gif" title="logo du site internet de L'Isle-Adam" alt="Logo du site de L'Isle-Adam" width="155" height="102"></td>
<td class="table_fond_blanc txt_middle"><img src="images/home_03.gif" width=368 height=4 alt=""></td>
<td rowspan=5><img src="images/home_04.gif" width=60 height=66 alt="" title="une feuille volante"></td>
<td colspan=2 rowspan=2><img src="images/home_05.gif" width=155 height=29 alt=""></td>
<td rowspan=2><img src="images/home_coinvert.gif" width=19 height=29 alt=""></td>
<td ><img src="images/spacer.gif" width=1 height=4 alt=""></td>
</tr>
<tr>
<td rowspan=3 class="table_fond_blanc">
<table summary="">
<tr>
<td><form name="search" method="get" action="http://search.atomz.com/search/">
<label for="recherche">*
<input name="sp-q" type="text" class="recherche" id="recherche" value=" Rechercher votre rubrique" size="15" title="Taper un mot et cliquez sur Ok !"> </label>
<input name="submit" type="image" src="images/ok.gif" alt="ok" class="border:0">
<a href="divers/index.php?p=1" ><img src="images/rech_av.gif" alt="recherche avanc&eacute;e" title="recherche avancée" class="cadre_fond_blanc" width="26" height="20" ></a><a href="javascript op('aide_rech.htm',500,300);"><img src="images/aide.gif" alt="aide &agrave; la recherche" title="aide à la recherche" class="cadre_fond_blanc" width="26" height="20" ></a>
<input type="hidden" name="sp-a" value="sp1002490c">
<input type="hidden" name="sp-p" value="all">
<input type="hidden" name="sp-f" value="ISO-8859-1">
<img src="images/flags2.gif" width="115" height="20" style="border:0" alt="" usemap="#Map">
<map name="Map">
<area shape="rect" coords="0,4,19,20" href="decouvrir/index.php?p=10" alt="English">
<area shape="rect" coords="23,4,43,20" href="decouvrir/index.php?p=11" alt="Deutsch">
<area shape="rect" coords="47,4,67,20" href="decouvrir/index.php?p=12" alt="Italiano">
<area shape="rect" coords="71,4,91,20" href="decouvrir/index.php?p=13" alt="Portugu&ecirc;s">
<area shape="rect" coords="95,4,115,20" href="decouvrir/index.php?p=14" alt="Espa&ntilde;ol">
</map>
</form></td>
</tr>

</table></td>
<td><img src="images/spacer.gif" width=1 height=25 alt=""></td>
</tr>
<tr>
<td colspan=3 rowspan=4><img src="images/home_08.gif" width=174 height=73 alt="" title="feuilles volantes"></td>
<td><img src="images/spacer.gif" width=1 height=1 alt=""></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width=1 height=25 alt=""></td>
</tr>
<tr>
<td><img src="images/home_10.gif" width=368 height=11 alt=""></td>
<td><img src="images/spacer.gif" width=1 height=11 alt=""></td>
</tr>
<tr>
<td colspan=2><img src="images/home_11.gif" width=428 height=36 alt="Bienvenue sur le site de L'Isle-Adam"></td>
<td><img src="images/spacer.gif" width=1 height=36 alt=""></td>
</tr>
<tr class="link2">
<td class="link2"><img src="images/home_12.gif" width=9 height=35 alt=""></td>

<td colspan=2 class="link"><img src="images/home_14.gif" width=126 height=35 alt=""></td>
<td><img src="images/spacer.gif" width=1 height=35 alt=""></td></tr>

<tr>
<td colspan=9>
<object type="application/x-shockwave-flash" data="images.swf" width="757" height="76" align="top"title="les 6 rubriques de votre site" >
<param name="movie" value="images.swf">
<p>animations menus</p>
</object>
</td>
<!-- <img src="images/spacer.gif" alt="" width="1" height="76" class="sp" >-->
</tr>
<tr >
<td colspan=9 >
<table summary="" class="t_pages">
<tr>
<td class="table_fond_blanc valign_top"></td>
<td class="table_fond_orange_index" title="Venez découvrir ou redécouvrir L’Isle-Adam la ville-parc..."><img src="images/espaceur.gif" alt="" width="1" height="6"><br>
<? include ("menus/menu_dec.php"); ?></td>
<td class="table_fond_blanc valign_top"></td>
<td class="table_fond_rouge_index" title="Tenez-vous informé de ce qui se passe dans votre ville"><img src="images/espaceur.gif" alt="" width="1" height="6"><br>
<? include ("menus/menu_inf.php"); ?></td>
<td class="table_fond_blanc valign_top"></td>
<td class="table_fond_gris_index" title="Se tenir au courant des décisions de la ville"><img src="images/espaceur.gif" alt="" width="1" height="6"><br>
<? include ("menus/menu_par.php"); ?></td>
<td class="table_fond_blanc valign_top"></td>
<td class="table_fond_bleu_index" title="Toute la vie pratique de L'Isle-Adam à portée de clic !"><img src="images/espaceur.gif" alt=""width="1" height="6"><br>
<? include ("menus/menu_viv.php"); ?></td>
<td class="table_fond_blanc valign_top"></td>
<td class="table_fond_vert_index" title="Tout les divertissements de L'Isle-Adam"><img src="images/espaceur.gif" alt="" width="1" height="6"><br>
<? include ("menus/menu_div.php"); ?></td>
<td class="table_fond_blanc valign_top"></td>
<td class="table_fond_violet_index" title="Découvrir le pôle économique de L'Isle-Adam"><img src="images/espaceur.gif" alt="" width="1" height="6"><br>
<? include ("menus/menu_ent.php"); ?></td>
<td class="table_fond_blanc valign_top"></td>
</tr>
</table></td>
<td><img src="images/spacer.gif" width=1 height=147 alt=""></td>
</tr><tr>
<td colspan=9><img src="images/home_19.gif" width=757 height=3 alt=""></td>
<td><img src="images/spacer.gif" width=1 height=3 alt=""></td>
</tr>
<tr>
<td colspan=9 class="table_fond_blanc" >
<table summary="" class="table_centrer sansmargeb">
<tr class="valign_middle">
<td rowspan="2" ><div class="txt_middle"><a href="http://www.villes-et-villages-fleuris.com/" title="L'Isle-Adam 3 Fleurs au palmarès Ville Fleurie : accéder au site des villes et villages fleuries de France" target="_blank (lien externe)"><img src="images/fleuries.jpg" alt="ville fleuries" border="0" ></a></div></td>
<td rowspan="2"><div class="txt_right"><a href="http://www.plusbeauxdetours.com/" title="Ville des plus beaux détours de France" target="_blank (lien externe)" ><img src="images/beauxdetours.jpg" alt="Ville des plus beaux détours de France" border="0" ></a></div></td>
<td rowspan="2"><span class="ecriture_vert txt_left">LES PLUS <br></span><span class="ecriture_bleu">BEAUX DETOURS <br></span><span class="ecriture_vert">DE FRANCE</span></td>
<td rowspan="2"><div class="txt_middle"><a href="http://www.villes-internet.net/UPLOAD/rubrique/pages/16/16_rubrique.php" title="L'Isle-Adam 5@ au concours Villes Internet" target="_blank (lien externe)"><img src="images/@5.jpg" alt="L/'Isle-Adam 5@ au concours Villes Internet" border="0" ></a></div></td>
<td class="table_centrer"><div class="menu_bas"><a href="sinformer/dernier_clin.php" target="_blank (autre page)" title="En cliquant sur ce lien vous pouvez consulter le dernier Clin d'Oeil !">Le
dernier Clin d'Oeil</a></div></td>
</tr>
<tr class="valign_middle">
<td><div class="menu_bas">Derni&egrave;re mise &agrave; jour
effectu&eacute;e le : <? echo Date("d")."/".Date("m")."/".Date("Y"); ?> </div></td>
</tr>
</table></td></tr>
<tr>
<td colspan=9><img src="images/home_19.gif" width=757 height=3 alt=""></td>
<td><img src="images/spacer.gif" width=1 height=3 alt=""></td>
</tr>
<tr>
<td colspan=2><img src="images/footer_02.gif" width=19 height=20 alt=""></td>
<td colspan=6 class="menu_bas" >
[ <a href="javascript op('nouveautes.htm',500,500);" title="Les dernières nouveautés du site.">Nouveaut&eacute;s</a> ]
[ <a href="sinformer/index.php?p=5" title="Vous avez des questions ? Nous avons les réponses !">Foire Aux Questions F.A.Q</a> ]
[ <a href="javascript op('acces.htm',500,500);" title="Conseils destinés aux malvoyants.">Accessibilit&eacute;</a> ]
[ <a href="javascript op('aide.htm',500,500);" title="Tous les conseils pour profiter pleinement de votre visite.">Aide</a> ]
[ <a href="divers/index.php?p=2" title="Les conditions d'utilisation et autres renseignements.">Mentions L&eacute;gales</a> ]
[<a href="javascript op('plan_site.htm',600,500);" title="regarder l'arborescence du site de la ville."> Plan du Site </a>]
[ <a href="divers/index.php?p=3"><img src="images/rss.gif" alt="indique un lien vers les flux RSS" width="28" height="16" class="RSS" title="découvrir l'actualité au jour le jour" ></a> ]</td>

</table>

Et voici la feuille de style :
.menus /* Style appliqué aux menus sur la homepage */ { font-family: Arial; padding-left: 12px; background-image: url(../images/003366_4x4.gif); background-position:4px 5px; background-repeat:no-repeat; line-height: 15px; font-size: 0.70em; }
.div_centrer {
background-position: center center;
vertical-align: middle;
}

.menu_avant /* Style appliqué aux menus sur la homepage */ { background-image: url(../images/003366_4x4.gif); background-position:4px 5px; background-repeat:no-repeat; font-family: Arial; padding-left: 12px; line-height: 15px; font-size: 0.70em; font-weight: bold }
a:visited /* Liens hypertextes généraux */ { color: #003366; text-decoration: none }
a:link /* Liens hypertextes généraux */ { color: #003366; text-decoration: none }
a:hover /* Liens hypertextes généraux */ { color: #003366; text-decoration: underline }
a.lien_avant:visited /* Style appliqué aux liens à mettre en avant sur la homepage */ { color: #003366; text-decoration: none }
a.lien_avant:link /* Style appliqué aux liens à mettre en avant sur la homepage */ { color: #003366; text-decoration: none }
a.lien_avant:hover /* Style appliqué aux liens à mettre en avant sur la homepage */ { color: #003366; text-decoration: underline }
.menu_bas /* Style appliqué au menu de bas de page */ {
font-family: Arial;
color: #003366;
text-align: center;
font-size: 0.75em;
background-color: #FFFFFF;
}
.table_centrer {
background-position: center center;
}

.recherche /* Style appliqué au champ de recherche */ { background-color: #FFFFFF; border:1px solid #003366; font-family: Arial; color: #003366; font-weight: bold; font-size: 0.70em }
/* Styles appliqués au scroll vertical */
.ejs_scroll { font-size:12px ; font-family:Arial; color:#FFFFFF; font-weight: bold }
.link { color: #FFFFFF; text-decoration: none }
.erreur { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #FF0000; }
.table_fond_orange {
background-color: #f5e0cc;
text-align: left;
vertical-align: top;
}
.table_fond_rouge {
background-color: #F5D6D6;
text-align: left;
vertical-align: top;
}
.table_fond_gris {
background-color: #dfe7ea;
text-align: left;
vertical-align: top;
}
.table_fond_bleu {

background-color: #cce0eb;
text-align: left;
vertical-align: top;
}
.table_fond_vert {


background-color: #dbebd4;
text-align: left;
vertical-align: top;
}
.table_fond_violet {

background-color: #E3DFEE;
text-align: left;
vertical-align: top;
}
.table_fond_blanc {

background-color: #ffffff;
text-align: left;
vertical-align: middle;
}
.txt_left { text-align: left }
.txt_middle { text-align: center }
.middle {
background-position: center;
vertical-align: middle;
}
.table {
font-size: 757px;
background-position: center;
}


.txt_right { text-align: right }
.middle_verticale { vertical-align: middle;
}
.RSS {
width: 28px;
vertical-align: middle;
margin: auto;
height: 16px;
background-color: #FFFFFF;
color: #FFFFFF;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
}
.table_fond_orange_index /* Style définissant la colonne découvrir de l'index */{
background-color: #f5e0cc;
text-align: left;
vertical-align: top;
height: 165px;
width: 125px;
}
.table_fond_rouge_index /* Style définissant la colonne s'informer de l'index */{
background-color: #F5D6D6;
text-align: left;
vertical-align: top;
height: 165px;
width: 125px;
}
.table_fond_gris_index /* Style définissant la colonne participer de l'index */{
background-color: #dfe7ea;
text-align: left;
vertical-align: top;
height: 165px;
width: 125px;
}
.table_fond_bleu_index /* Style définissant la colonne vivre de l'index */{

background-color: #cce0eb;
text-align: left;
vertical-align: top;
height: 165px;
width: 125px;
}
.table_fond_vert_index /* Style définissant la colonne se divertir de l'index */{


background-color: #dbebd4;
text-align: left;
vertical-align: top;
height: 165px;
width: 125px;
}
.table_fond_violet_index/* Style définissant la colonne entreprendre de l'index */{

background-color: #E3DFEE;
text-align: left;
vertical-align: top;
height: 165px;
width: 125px;
}
.link2 {
color: #003366;
text-decoration: none;
background-color: #003366;
}
.cadre_fond_blanc {
background-color: #FFFFFF;
background-position: bottom;
height: 20px;
width: 26px;
color: #FFFFFF;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
vertical-align: bottom;
}
.fond_vert_fonce /* Style définissant la page de fond*/{
background-color: #003300;
}
.fond_vert_fonce_middle /* Style définissant la page de fond centrée*/{
background-color: #003300;
background-position: center;
}
.t_menu_top /* Style définissant les colonnes des sommaires 50%*/ {
background-color: #FFFFFF;
width: 50%;
background-position: top;
vertical-align: top;
color: #003366;
font-size: 0.75em;
font-family: Arial, Helvetica, sans-serif;
}
.sp { margin-top: 10px }
.centrer {
background-position: center;
width: 757px;
}
.table_tranparent {
background-image: url(../images/transparent.gif);
background-repeat: repeat;
}
.ecriture_vert {
color: #006600;
font-size: x-small;
font-family: Arial, Helvetica, sans-serif;
}
.ecriture_bleu {
color: #000066;
font-size: x-small;
font-family: Arial, Helvetica, sans-serif;
}
.t_pages /*style pour le tableau d'ensemble, grand tableau du index*/{
background-color: #FFFFFF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
text-align: center;
width: 757px;
margin: auto;
padding: 0px;
border:0;
border-collapse: collapse;
border-spacing: 0px;
}
.sansmarge /* style pour un tableau ou une ligne ou une colonne sans marge ni pading*/{
border:0;
border-collapse: collapse;
border-spacing: 0px;
padding: 0px;
margin:0px;
}
.sansmarges /* style pour un tableau ou une ligne ou une colonne sans marge ni pading*/{
border:0;
padding: 0px;
}
.sansmargeb /* style pour un tableau ou une ligne ou une colonne sans marge ni pading*/{
border:0;
border-collapse: collapse;
border-spacing: 0px;
padding: 0px;
width:757px;
}
.tableindex /* style pour un tableau ou une ligne ou une colonne sans marge ni pading*/{
border:0;
margin:auto;
text-align:center;
width:757px
}
.valign_top
{
vertical-align: top;
}
valign_middle
{
vertical-align:middle;
}

Franchement je ne sais pas si c'est une bonne idée de te donner tout ça, tu vas t'embêter à regarder tout. C'est vraiment très long.

Merci de m'aider, je suis complètement perdue...

Dans le code CSS que tu me montre, je ne vois pas du tout le code que je t'ai proposé, à savoir .sansmarge td... Y'a aucun risque que ça marche en effet.

Sérieusement, il faudrait que tu revois entièrement ton code de mise en page. L'utilisation d'un tableau pour la mise en page du site est une méthode ancienne, dépassée et dangereuse (oui, dangereuse, car j'ai presque eu un arrêt cardiaque en le voyant). Il serait mieux que tu partes sur des bases solides, sinon tu risques de rencontrer beaucoup de problèmes.

Je suis désolé, je débute dans dreamweaver. Je l'avais ajouté mais je l'avais mis dans chaque td, tu m'as dis de ne pas faire ça donc je l'ai supprimer. Je ne comprends pas bien où je dois mettre cette class... Dans le table qui contient une class "sansmarge" ? Vu que la class "sansmarge" se répercute sur le reste, pourquoi mettre un "sansmarge td" ? C'est surement une question idiote, mais je ne comprends pas bien.

Comment ferais-tu pour mettre en page une page sans un tableau de mise en page?

En fait pour tout te dire, je reprends la gestion de ce site, ce n'est pas moi qui l'ai créé...

Dans tous les cas, merci pour le temps que tu me consacre.

elisa a écrit :
Comment ferais-tu pour mettre en page une page sans un tableau de mise en page?

Avec les balises adéquates selon le contenu, un soupçon de div et une bonne dose de CSS.

Je te suggère de consulter la section Apprendre. Tu y trouveras plusieurs articles intéressants. Évidemment, ça demande du temps et de la patience pour arriver à bien utiliser le HTML et CSS, mais la communauté est disponible pour t'aider dans ton apprentissage.

Quelques articles intéressants :

- Construire un site sans tableau
- Arrêtons de remplacer systématiquement les tableaux par des div !
Modifié par Tony Monast (05 Jul 2010 - 17:22)

Merci beaucoup pour tes conseils. J'espère que j'arriverai à m'en sortir.

elisa a écrit :
Je ne comprends pas bien où je dois mettre cette class...

Le code suivant élimine les bordures et le padding du tableau lui-même :

.sansmarge {
padding:0;
border-collapse:collapse;
border:0;
}

Par contre, le code précédent n'élimine pas le padding des td du tableau. Il faut donc le faire comme ceci :

.sansmarge td {
padding:0;
border:0;
}

La traduction de cette déclaration est la suivante : Pour chaque td qui descend de l'élément ayant la classe .sansmarge, met un padding à zéro et aucune bordure.

Relire attentivement l'article sur les sélecteurs CSS
Modifié par Tony Monast (05 Jul 2010 - 17:28)

Merci, j'essaierai demain et je te tiens au courant.
Bonne soirée.

En fait j'ai réussi, c'était un tout autre problème : 4 div à la suite pour le même tableau donc 3 qui ne servaient pas. Le fait de les enlever a réglé le problème.

Merci de m'avoir donner tes conseils, je prends note si je retombe sur un problème de ce type.