Espace entre les cellules d'un tableau

Version imprimable

Bonjour,

J'utilise un tableau pour afficher un menu. J'ai ajouter 3 onglets à mon menu et maintenant j'ai des espaces pas très jolis dans les images des onglets. (voir ici)

Voici le code utilisé (très basique) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%">
                <tr><td><img src="img/menu_left_on.gif" alt=""></td>
                    <td background="img/menu_on.gif"><a class="menu_on" href="index.jsp?MENU1=0">Accueil</a></td>
                    <td><img src="img/menu_right_on.gif" alt=""></td><td><img src="img/menu_left_off.gif" alt=""></td>
                            <td background="img/menu_off.gif"><a class="menu_off" href="index.jsp?MENU1=1">Intrusion</a></td>
                            <td><img src="img/menu_right_off.gif" alt=""></td>
                            <td><img src="img/menu_left_off.gif" alt=""></td>
                            <td background="img/menu_off.gif"><a class="menu_off" href="index.jsp?MENU1=2">Radio</a></td>
                            <td><img src="img/menu_right_off.gif" alt=""></td>
                            <td><img src="img/menu_left_off.gif" alt=""></td>
                            <td background="img/menu_off.gif"><a class="menu_off" href="index.jsp?MENU1=3">Vidéo</a></td>
                            <td><img src="img/menu_right_off.gif" alt=""></td>
                            <td><img src="img/menu_left_off.gif" alt=""></td>
                            <td background="img/menu_off.gif"><a class="menu_off" href="index.jsp?MENU1=4">Contrôle d'accès</a></td>
                            <td><img src="img/menu_right_off.gif" alt=""></td>
                            <td><img src="img/menu_left_off.gif" alt=""></td>
                            <td background="img/menu_off.gif"><a class="menu_off" href="index.jsp?MENU1=5">Télétransmission</a></td>
                            <td><img src="img/menu_right_off.gif" alt=""></td>
                            <td><img src="img/menu_left_off.gif" alt=""></td>
                            <td background="img/menu_off.gif"><a class="menu_off" href="index.jsp?MENU1=6">Incendie</a></td>
                            <td><img src="img/menu_right_off.gif" alt=""></td>
 
                    <!-- Add By babastutz -->
 
                    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
 
                    <td><img src="img/menu_left_off.gif" alt=""></td>
                    <td background="img/menu_off.gif"><a class="menu_off" href="#">Liste de prix</a></td>
                    <td><img src="img/menu_right_off.gif" alt=""></td>
 
                    <td><img src="img/menu_left_off.gif" alt=""></td>
                    <td background="img/menu_off.gif"><a class="menu_off" href="doctechnique.jsp?page=doctechnique">Doc technique</a></td>
                    <td><img src="img/menu_right_off.gif" alt=""></td>
 
                    <td><img src="img/menu_left_off.gif" alt=""></td>
                    <td background="img/menu_off.gif"><a class="menu_off" href="support.jsp?page=support">Support</a></td>
                    <td><img src="img/menu_right_off.gif" alt=""></td>
                    <!-- End -->
                </tr>
            </table>

06/07/2009, 09h32
Bisûnûrs

Etant donné qu'on n'a pas les images de notre côté pour tester, difficile de te donner une réponse précise. On peut faire des hypothèses, exemple en te disant de rajouter un display:block sur tes images, même si je doute que ça répondra à ton problème.
Donc as-tu une page en ligne pour pouvoir tester ?
06/07/2009, 10h32
Erwan31

Bonjour,
le choix d'un tableau n'est pas très pertinent pour un menu. Tu devrais passer par une liste non ordonnée (UL).
07/07/2009, 09h16
Invité

@Erwan31 : Totalement d'accord avec toi. J'utilise également des listes habituellement. Mais là je dois juste faire des modifications sur le site. Je n'ai pas le droit de tout changer.

voici un lien vers la dite page

Merci de votre aide
07/07/2009, 09h44
Bisûnûrs

Tu peux corriger le problème en rajoutant une largeur à tes td (gauche et droit) identique à la largeur de l'image qu'ils contiennent :

Code:

<td style="width:10px">

En effet, tu souhaites que ton tableau fasse 100% en largeur, seulement les cellules s'agrandissent aléatoirement en fonction de l'espace disponible pour prendre 100% de la largeur totale si elles n'ont pas de largeur spécifiée.

En renseignant cette largeur sur ces td gauches et droits, tu les forces à rester de cette taille là (dans ton cas, certains prenaient 1px de plus ce qui provoquaient ces décalages), donc ce sont les td avec les textes qui vont s'adapter pour prendre en compte 100% de la largeur.

Je sais pas si je suis clair, mais je me suis compris.
07/07/2009, 11h01
Invité

@Bisûnûrs: Parfait!! Merci beaucoup