Redimensionner les <IMG SRC> relatives au % de leurs <td>

Résolu
Mathbeul Messages postés 13 Date d'inscription   Statut Membre Dernière intervention   -  
 Chocobot -

Bonjour, je programme un site en html et j'ai configuré la <table WIDTH="100%"> pour qu'elle soit relative à la largeur de sa colonne.*

Pour la suite, j'ai bien sûr donné une largeur relative à chaque <td> ,la somme des td width étant égale à 100% (voir l’essai plus bas). Dans chacune d'elles se trouve une image et cette image ne se conforme pas à la largeur de la td où elle se trouve.

à IMG SRC WIDTH="100%", l'image est à l'échelle 1 et ne se conforme pas à la TD WIDTH.

J'ai tenté de donner la même valeur de la <td width> à l'image, mais je pense qu'elle s'adapte à un % du <td width> (voir image d'illustration)et non pas à la totalité de la page.

Existe-t-il une balise qui permet de redimensionner les <IMG SRC> relatives au % de leurs <td> quelle que soit la taille de l'écran? Peut être à placer dans la table ou dans le td de la table principale? Peut être à chaque <td> ou <IMG SRC>? Merci de ne pas me donner une réponse avec un formulaire css, je ne suis jamais arrivé à programmer comme ça.

Merci.

ici, un extrait de mon dernier essai:

<table WIDTH="100%" BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
        <TD ROWSPAN=11 WIDTH=0,55%>
            <IMG SRC="images/accueil_FRA_01.gif" WIDTH=0,55%></TD>
        <TD COLSPAN=6 WIDTH=98,48%>
            <IMG SRC="images/accueil_FRA_02.gif" WIDTH=98,48%></TD>
        <TD ROWSPAN=11 WIDTH=0,58%>
            <IMG SRC="images/accueil_FRA_03.gif" WIDTH=0,58%></TD>
        <TD ROWSPAN=11 WIDTH=0,37%>
            <IMG SRC="images/accueil_FRA_04.gif" WIDTH=0,37%></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
    </TR>

<TR>
        <TD WIDTH=33,23%>
            <IMG SRC="images/accueil_FRA_05.gif" WIDTH=33,23%></TD>
        <TD COLSPAN=4 WIDTH=32,59%>
            <IMG SRC="images/accueil_FRA_06.gif" WIDTH=32,59%></TD>
        <TD ROWSPAN=2 WIDTH=32,659%>
            <IMG SRC="images/accueil_FRA_07.gif" WIDTH=32,659%></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
    </TR>
    </table>

*elle même contenue comme colonne centrale d'une table à trois <td> de WIDTH=100% pour s'adapter à l'écran.

A voir également:

6 réponses

Bruno83200_6929 Messages postés 621 Date d'inscription   Statut Membre Dernière intervention   138
 

Corriger la structure de la table "A" : Assurez-vous que la table "A" a bien 4 colonnes, avec la table "B" dans la deuxième <TD>, et attribuez des largeurs cohérentes (ex. 1%, 98%, 1%, 0%).
Ajuster la table "B" : Vérifiez que les largeurs des <TD> dans chaque <TR> de "B" somment à 100%, en tenant compte des COLSPAN et ROWSPAN.
Supprimer les erreurs de syntaxe : Corrigez les balises mal placées et fermez correctement les tables.

<table WIDTH="100%" BORDER=0 CELLPADDING=0 CELLSPACING=0> <!-- Table "A" -->
    <TR>
        <TD WIDTH="1%"> <!-- Colonne gauche -->
            <IMG SRC="images/accueil_FRA_01.gif" WIDTH=100%>
        </TD>
        <TD WIDTH="98%"> <!-- Contient table "B" -->
            <table WIDTH="100%" BORDER=0 CELLPADDING=0 CELLSPACING=0> <!-- Table "B" -->
                <TR>
                    <TD WIDTH="33%">
                        <IMG SRC="images/accueil_FRA_05.gif" WIDTH=100%>
                    </TD>
                    <TD WIDTH="33%">
                        <IMG SRC="images/accueil_FRA_06.gif" WIDTH=100%>
                    </TD>
                    <TD WIDTH="34%">
                        <IMG SRC="images/accueil_FRA_07.gif" WIDTH=100%>
                    </TD>
                    <TD>
                        <IMG SRC="images/espaceur.gif" WIDTH=1>
                    </TD>
                </TR>
                <!-- Ajoutez les autres lignes de "B" en ajustant les largeurs -->
                <TR>
                    <TD WIDTH="33%">
                        <IMG SRC="images/accueil_FRA_08.gif" WIDTH=100%>
                    </TD>
                    <TD WIDTH="33%">
                        <IMG SRC="images/accueil_FRA_09.gif" WIDTH=100%>
                    </TD>
                    <TD WIDTH="34%">
                        <IMG SRC="images/accueil_FRA_07.gif" WIDTH=100%>
                    </TD>
                    <TD>
                        <IMG SRC="images/espaceur.gif" WIDTH=1>
                    </TD>
                </TR>
            </table>
        </TD>
        <TD WIDTH="1%"> <!-- Colonne droite -->
            <IMG SRC="images/accueil_FRA_03.gif" WIDTH=100%>
        </TD>
        <TD WIDTH="0%"> <!-- Espaceur -->
            <IMG SRC="images/accueil_FRA_04.gif" WIDTH=100%>
        </TD>
    </TR>
</table>

<!-- Table suivante si nécessaire -->
<table WIDTH="100%" BORDER=0 CELLPADDING=0 CELLSPACING=0>
    <TR>
        <TD WIDTH="100%">
            <IMG SRC="images/accueil_FRA_26.gif" WIDTH=100%>
        </TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1>
        </TD>
    </TR>
    <!-- Ajoutez les autres lignes -->
</table>

Table "A" : Les 4 colonnes ont des largeurs (1%, 98%, 1%, 0%) qui somment à 100%. La table "B" est dans la deuxième <TD> avec 98% de la largeur.
Table "B" : Chaque ligne a des <TD> dont la somme des largeurs est 100% (33% + 33% + 34%), avec un espaceur.
Suppression des erreurs : Les COLSPAN et ROWSPAN sont simplifiés pour éviter les conflits. Ajoutez-les progressivement si nécessaire.


1
Bruno83200_6929 Messages postés 621 Date d'inscription   Statut Membre Dernière intervention   138
 

Bonjour,

Voici une suggestion pour améliorer votre code :

Vérifiez que la somme des largeurs des <TD> dans chaque <TR> est bien égale à 100% (ou ajustée selon votre design).
Utilisez des valeurs entières pour les pourcentages (par exemple, WIDTH=55 au lieu de WIDTH=0,55%) et testez si cela fonctionne mieux.
Placez l'attribut WIDTH de l'image à l'intérieur de la balise <TD> pour qu'elle hérite de la largeur définie.

<table WIDTH="100%" BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
    <TD ROWSPAN=11 WIDTH=1%>
        <IMG SRC="images/accueil_FRA_01.gif" WIDTH=100%></TD>
    <TD COLSPAN=6 WIDTH=98%>
        <IMG SRC="images/accueil_FRA_02.gif" WIDTH=100%></TD>
    <TD ROWSPAN=11 WIDTH=1%>
        <IMG SRC="images/accueil_FRA_03.gif" WIDTH=100%></TD>
    <TD ROWSPAN=11 WIDTH=0%>
        <IMG SRC="images/accueil_FRA_04.gif" WIDTH=100%></TD>
    <TD>
        <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
</TR>
<TR>
    <TD WIDTH=33%>
        <IMG SRC="images/accueil_FRA_05.gif" WIDTH=100%></TD>
    <TD COLSPAN=4 WIDTH=33%>
        <IMG SRC="images/accueil_FRA_06.gif" WIDTH=100%></TD>
    <TD ROWSPAN=2 WIDTH=34%>
        <IMG SRC="images/accueil_FRA_07.gif" WIDTH=100%></TD>
    <TD>
        <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
</TR>
</table>

J'ai ajusté les pourcentages pour qu'ils se rapprochent de 100% par ligne et utilisé WIDTH=100% pour les images afin qu'elles remplissent leur <TD> respective.
Testez ce code et ajustez les largeurs des <TD> si nécessaire pour éviter les débordements.
Si cela ne fonctionne pas parfaitement, cela peut dépendre du rendu du navigateur, et une recherche web pourrait fournir des solutions supplémentaires.


0
Mathbeul Messages postés 13 Date d'inscription   Statut Membre Dernière intervention   3
 

J'ai refait tout le tableau selon vos instructions et bizarrement, seules les images de la droite de la page apparaissent et très éloignées les unes des autres sur une colonne.

Je pense que le problème peut venir des COLSPAN et ROWSPAN qui ne permettent pas de calculer 100% par ligne.

Faut-il soustraire les colonnes et rangées à chaque fois qu'elles sont fusionnées sur deux lignes? Ou l'erreur est ailleurs? Faut il changer la valeur des espaceurs aussi?

Par contre, oui, les images changent de taille avec l'écran. Ça c'est bien.

(Testé sur Firefox et Edge)

<table WIDTH="100%" BORDER=0 CELLPADDING=0 CELLSPACING=0>
    <TR>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
        <TD></TD>
    </TR>
    <TR>
        <TD ROWSPAN=11 WIDTH=1%>
            <IMG SRC="images/accueil_FRA_01.gif" WIDTH=100%></TD>
        <TD COLSPAN=6 WIDTH=98%>
            <IMG SRC="images/accueil_FRA_02.gif" WIDTH=100%></TD>
        <TD ROWSPAN=11 WIDTH=1%>
            <IMG SRC="images/accueil_FRA_03.gif" WIDTH=100%></TD>
        <TD ROWSPAN=11 WIDTH=0%>
            <IMG SRC="images/accueil_FRA_04.gif" WIDTH=100%></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
    </TR>
    <TR>
        <TD WIDTH=33%>
            <IMG SRC="images/accueil_FRA_05.gif" WIDTH=100%></TD>
        <TD COLSPAN=4 WIDTH=33%>
            <IMG SRC="images/accueil_FRA_06.gif" WIDTH=100%></TD>
        <TD ROWSPAN=2 WIDTH=34%>
            <IMG SRC="images/accueil_FRA_07.gif" WIDTH=100%></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
    </TR>
    <TR>
        <TD WIDTH=33%>
            <IMG SRC="images/accueil_FRA_08.gif" WIDTH=100%></TD>
        <TD COLSPAN=4 WIDTH=77%>
            <IMG SRC="images/accueil_FRA_09.gif" WIDTH=100%></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
    </TR>
    <TR>
        <TD COLSPAN=2 WIDTH=33%>
            <IMG SRC="images/accueil_FRA_10.gif" WIDTH=100%></TD>
        <TD COLSPAN=2 WIDTH=32%>
            <IMG SRC="images/accueil_FRA_11.gif" WIDTH=100%></TD>
        <TD COLSPAN=2 WIDTH=35%>
            <IMG SRC="images/accueil_FRA_12.gif" WIDTH=100%></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
    </TR>
    <TR>
        <TD WIDTH=33%>
            <IMG SRC="images/accueil_FRA_13.gif" WIDTH=100%></TD>
        <TD ROWSPAN=2 WIDTH=0%>
            <IMG SRC="images/accueil_FRA_14.gif" WIDTH=100%></TD>
        <TD COLSPAN=2 ROWSPAN=2 WIDTH=33%>
            <IMG SRC="images/accueil_FRA_15.gif" WIDTH=100%></TD>
        <TD COLSPAN=2 ROWSPAN=2 WIDTH=34%>
            <IMG SRC="images/accueil_FRA_16.gif" WIDTH=100%></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
    </TR>
    <TR>
        <TD ROWSPAN=2 WIDTH=100%>
            <IMG SRC="images/accueil_FRA_17.gif" WIDTH=100%></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
    </TR>
    <TR>
        <TD COLSPAN=2 WIDTH=50%>
            <IMG SRC="images/accueil_FRA_18.gif" WIDTH=100%></TD>
        <TD COLSPAN=3 ROWSPAN=2 WIDTH=50%>
            <IMG SRC="images/accueil_FRA_19.gif" WIDTH=100%></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
    </TR>
    <TR>
        <TD ROWSPAN=2 WIDTH=50%>
            <IMG SRC="images/accueil_FRA_20.gif" WIDTH=100%></TD>
        <TD COLSPAN=2 ROWSPAN=2 WIDTH=50%>
            <IMG SRC="images/accueil_FRA_21.gif" WIDTH=100%></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
    </TR>
    <TR>
        <TD COLSPAN=3 WIDTH=100%>
            <IMG SRC="images/accueil_FRA_22.gif" WIDTH=100%></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
    </TR>
    <TR>
        <TD WIDTH=33%>
            <IMG SRC="images/accueil_FRA_23.gif" WIDTH=100%></TD>
        <TD COLSPAN=2 ROWSPAN=2 WIDTH=33%>
            <IMG SRC="images/accueil_FRA_24.gif" WIDTH=100%></TD>
        <TD COLSPAN=3 ROWSPAN=2 WIDTH=34%>
            <IMG SRC="images/accueil_FRA_25.gif" WIDTH=100%></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
    </TR>
    <TR>
        <TD ROWSPAN=2 WIDTH=100%>
            <IMG SRC="images/accueil_FRA_26.gif" WIDTH=100%></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
    </TR>
    <TR>
        <TD ROWSPAN=2 WIDTH=50%>
            <IMG SRC="images/accueil_FRA_27.gif" WIDTH=100%></TD>
        <TD COLSPAN=7 ROWSPAN=2 WIDTH=50%>
            <IMG SRC="images/accueil_FRA_28.gif" WIDTH=100%></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
    </TR>
    <TR>
        <TD WIDTH=100%>
            <IMG SRC="images/accueil_FRA_29.gif" WIDTH=100%></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
    </TR>
</table>
0
Bruno83200_6929 Messages postés 621 Date d'inscription   Statut Membre Dernière intervention   138
 

Bonjour,

Je pense qu'il faut :

Ajuster les largeurs par ligne : Assurez-vous que la somme des WIDTH dans chaque <TR> (en tenant compte des COLSPAN) soit cohérente. Par exemple, si une cellule avec COLSPAN=6 prend 98%, les autres cellules doivent se partager les 2% restants.


Supprimer ou ajuster les espaceurs : Réduisez le nombre d'espaceurs ou assurez-vous qu'ils n'ajoutent pas de colonnes inutiles. Par exemple, un seul espaceur par ligne suffit souvent.


Vérifier les ROWSPAN : Les ROWSPAN doivent être cohérents avec le nombre total de lignes. Si une cellule s'étend sur 11 lignes, toutes les lignes suivantes doivent avoir le bon nombre de <TD> pour éviter des décalages.

<table WIDTH="100%" BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
    <TD ROWSPAN=11 WIDTH=1%>
        <IMG SRC="images/accueil_FRA_01.gif" WIDTH=100%></TD>
    <TD COLSPAN=6 WIDTH=97%>
        <IMG SRC="images/accueil_FRA_02.gif" WIDTH=100%></TD> <!-- Ajusté à 97% pour laisser 2% -->
    <TD ROWSPAN=11 WIDTH=1%>
        <IMG SRC="images/accueil_FRA_03.gif" WIDTH=100%></TD>
    <TD ROWSPAN=11 WIDTH=1%>
        <IMG SRC="images/accueil_FRA_04.gif" WIDTH=100%></TD> <!-- Ajusté à 1% -->
    <TD>
        <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
</TR>
<TR>
    <TD WIDTH=33%>
        <IMG SRC="images/accueil_FRA_05.gif" WIDTH=100%></TD>
    <TD COLSPAN=4 WIDTH=33%>
        <IMG SRC="images/accueil_FRA_06.gif" WIDTH=100%></TD>
    <TD ROWSPAN=2 WIDTH=33%>
        <IMG SRC="images/accueil_FRA_07.gif" WIDTH=100%></TD> <!-- Ajusté à 33% -->
    <TD>
        <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
</TR>
<!-- Continuez à ajuster les autres lignes de la même manière -->
</table>

Soustraire les colonnes fusionnées : Oui, quand vous utilisez COLSPAN ou ROWSPAN, la largeur totale doit être redistribuée. Par exemple, si COLSPAN=6 prend 97%, les autres <TD> doivent partager les 3% restants.
Espaceurs : Gardez un seul espaceur par ligne (par exemple, le dernier <TD>) avec WIDTH=1 pour éviter les décalages.
Test progressif : Corrigez ligne par ligne et testez dans Firefox et Edge pour voir où le problème persiste.


0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Mathbeul Messages postés 13 Date d'inscription   Statut Membre Dernière intervention   3
 

je viens de restructurer la mise en page dans une <table>"A" avec 4 colonnes,

la partie centrale (la 2e<td> de la table "A") est dans une <table>"B" qui contient trois colonnes. 

Le résultat est encore une fois, la colonne de gauche (05-08-10-13-17-20-23 sur le schéma) de la <table>"B" prend 100% de l'écran.

Je ne comprends pas où sont passées les autres colonnes de la table "A", ou "B".

Quelqu'un a une idée?

<table WIDTH="100%" BORDER=0 CELLPADDING=0 CELLSPACING=0>
    <TR>
    <TD WIDTH="100%">
    <table WIDTH="100%" BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD width="1%">
<IMG SRC="images/accueil_FRA_01.gif" WIDTH=100%>
</TD>

    </TD>
    <TD WIDTH="100%">
<table WIDTH="100%" COLSPAN=3 BORDER=0 CELLPADDING=0 CELLSPACING=0>
    <TR>
        <TD WIDTH=33%>
            <IMG SRC="images/accueil_FRA_05.gif" WIDTH=100%></TD>
        <TD COLSPAN=4 WIDTH=33%>
            <IMG SRC="images/accueil_FRA_06.gif" WIDTH=100%></TD>
        <TD ROWSPAN=2 WIDTH=34%>
            <IMG SRC="images/accueil_FRA_07.gif" WIDTH=100%></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
    </TR>
    <TR>
        <TD WIDTH=33%>
            <IMG SRC="images/accueil_FRA_08.gif" WIDTH=100%></TD>
        <TD COLSPAN=4 WIDTH=33%>
            <IMG SRC="images/accueil_FRA_09.gif" WIDTH=100%></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
    </TR>
    <TR>
        <TD COLSPAN=2 WIDTH=33%>
            <IMG SRC="images/accueil_FRA_10.gif" WIDTH=100%></TD>
        <TD COLSPAN=2 WIDTH=32%>
            <IMG SRC="images/accueil_FRA_11.gif" WIDTH=100%></TD>
        <TD COLSPAN=2 WIDTH=35%>
            <IMG SRC="images/accueil_FRA_12.gif" WIDTH=100%></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
    </TR>
    <TR>
        <TD WIDTH=33%>
            <IMG SRC="images/accueil_FRA_13.gif" WIDTH=100%></TD>
        <TD ROWSPAN=2 WIDTH=0%>
            <IMG SRC="images/accueil_FRA_14.gif" WIDTH=100%></TD>
        <TD COLSPAN=2 ROWSPAN=2 WIDTH=33%>
            <IMG SRC="images/accueil_FRA_15.gif" WIDTH=100%></TD>
        <TD COLSPAN=2 ROWSPAN=2 WIDTH=34%>
            <IMG SRC="images/accueil_FRA_16.gif" WIDTH=100%></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
    </TR>
    <TR>
        <TD ROWSPAN=2 WIDTH=100%>
            <IMG SRC="images/accueil_FRA_17.gif" WIDTH=100%></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
    </TR>
    <TR>
        <TD COLSPAN=2 WIDTH=50%>
            <IMG SRC="images/accueil_FRA_18.gif" WIDTH=100%></TD>
        <TD COLSPAN=3 ROWSPAN=2 WIDTH=50%>
            <IMG SRC="images/accueil_FRA_19.gif" WIDTH=100%></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
    </TR>
    <TR>
        <TD ROWSPAN=2 WIDTH=50%>
            <IMG SRC="images/accueil_FRA_20.gif" WIDTH=100%></TD>
        <TD COLSPAN=2 ROWSPAN=2 WIDTH=50%>
            <IMG SRC="images/accueil_FRA_21.gif" WIDTH=100%></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
    </TR>
    <TR>
        <TD COLSPAN=3 WIDTH=100%>
            <IMG SRC="images/accueil_FRA_22.gif" WIDTH=100%></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
    </TR>
    <TR>
        <TD WIDTH=33%>
            <IMG SRC="images/accueil_FRA_23.gif" WIDTH=100%></TD>
        <TD COLSPAN=2 ROWSPAN=2 WIDTH=33%>
            <IMG SRC="images/accueil_FRA_24.gif" WIDTH=100%></TD>
        <TD COLSPAN=3 ROWSPAN=2 WIDTH=34%>
            <IMG SRC="images/accueil_FRA_25.gif" WIDTH=100%></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
    </TR>
</table>
    </TD>
<TR>
    <TD WIDTH=1%>
            <IMG SRC="images/accueil_FRA_03.gif" WIDTH=100%></TD>
    <TD WIDTH=0%>
            <IMG SRC="images/accueil_FRA_04.gif" WIDTH=100%></TD>
</TR>
</table>
</table>
<table WIDTH="100%" BORDER=0 CELLPADDING=0 CELLSPACING=0>
    <TR>
        <TD ROWSPAN=2 WIDTH=100%>
            <IMG SRC="images/accueil_FRA_26.gif" WIDTH=100%></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
    </TR>
    <TR>
        <TD ROWSPAN=2 WIDTH=50%>
            <IMG SRC="images/accueil_FRA_27.gif" WIDTH=100%></TD>
        <TD COLSPAN=7 ROWSPAN=2 WIDTH=50%>
            <IMG SRC="images/accueil_FRA_28.gif" WIDTH=100%></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
    </TR>
    <TR>
        <TD WIDTH=100%>
            <IMG SRC="images/accueil_FRA_29.gif" WIDTH=100%></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
    </TR>
</table>

​​​​​​​

0
Mathbeul Messages postés 13 Date d'inscription   Statut Membre Dernière intervention   3
 

Merci.

J'ai travaillé dessus toute l'après-midi.

C'est un gros bricolage, mais ça a fini par marcher.

<table WIDTH="100%" BORDER=0 CELLPADDING=0 CELLSPACING=0>
    <TR>
    <TD WIDTH="100%">
    <table WIDTH="100%" BORDER=0 CELLPADDING=0 CELLSPACING=0  COLSPAN=2>
<TR>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
        <TD>
            <IMG SRC="images/espaceur.gif" WIDTH=1></TD>
    
    </TR>
<TR>
<TD width="1%" rowspan="7" valign="top">
<IMG SRC="images/espaceur.gif" WIDTH=100%>
</TD>

    <TD WIDTH="100%" valign="top">
<table WIDTH="100%" BORDER=0 CELLPADDING=0 CELLSPACING=0>
    <TR>
<TD COLSPAN=3 WIDTH=98%>
            <IMG SRC="images/accueil_FRA_02.gif" WIDTH=100%></TD>
    </TR>
    <TR>
        <TD WIDTH=33% HEIGHT=33% valign="top">
            <IMG SRC="images/accueil_FRA_05.gif" WIDTH=100% HEIGHT=100%></TD>
        <TD WIDTH=33% HEIGHT=33% valign="top">
            <IMG SRC="images/accueil_FRA_06.gif" WIDTH=100% HEIGHT=100%></TD>
        <TD ROWSPAN=2 WIDTH=33% HEIGHT=33%>
            <IMG SRC="images/accueil_FRA_07.gif" WIDTH=100% HEIGHT=100%></TD>
        <TD WIDTH=1% HEIGHT=1%>
            <IMG SRC="images/espaceur.gif" WIDTH=100% HEIGHT=100%></TD>
    </TR>
    <TR>
        <TD WIDTH=33% HEIGHT=33% valign="top">
            <IMG SRC="images/accueil_FRA_08.gif" WIDTH=100% HEIGHT=100%></TD>
        <TD WIDTH=33% HEIGHT=33% valign="top">
            <IMG SRC="images/accueil_FRA_09.gif" WIDTH=100% HEIGHT=100%></TD>
        <TD WIDTH=1% HEIGHT=1%>
            <IMG SRC="images/espaceur.gif" WIDTH=100% HEIGHT=100%></TD>
    </TR>
    <TR>
        <TD WIDTH=33% HEIGHT=33% valign="top">
            <IMG SRC="images/accueil_FRA_10.gif" WIDTH=100% HEIGHT=100%></TD>
        <TD WIDTH=33% HEIGHT=33% valign="top">
            <IMG SRC="images/accueil_FRA_11.gif" WIDTH=100% HEIGHT=100%></TD>
        <TD WIDTH=33% HEIGHT=33%>
            <IMG SRC="images/accueil_FRA_12.gif" WIDTH=100% HEIGHT=100%></TD>
        <TD WIDTH=1% HEIGHT=1%>
            <IMG SRC="images/espaceur.gif" WIDTH=100% HEIGHT=100%></TD>
    </TR>
    <TR>
        <TD WIDTH=33% valign="top">
            <IMG SRC="images/accueil_FRA_13.gif" WIDTH=100% HEIGHT=100%></TD>
        <TD WIDTH=33% valign="top">
            <IMG SRC="images/accueil_FRA_15.gif" WIDTH=100% HEIGHT=100%></TD>
        <TD WIDTH=33%>
            <IMG SRC="images/accueil_FRA_16.gif" WIDTH=100% HEIGHT=100%></TD>
        <TD WIDTH=1%>
            <IMG SRC="images/espaceur.gif" WIDTH=100% HEIGHT=100%></TD>
    </TR>
    <TR>
        <TD WIDTH=33% HEIGHT=33%>
            <IMG SRC="images/accueil_FRA_17.gif" WIDTH=100% HEIGHT=100%></TD>
        <TD WIDTH=33% HEIGHT=33%>
            <IMG SRC="images/accueil_FRA_18.gif" WIDTH=100% HEIGHT=100%></TD>
        <TD WIDTH=33% HEIGHT=33%>
            <IMG SRC="images/accueil_FRA_19.gif" WIDTH=100% HEIGHT=100%></TD>
        <TD WIDTH=1% HEIGHT=1%>
            <IMG SRC="images/espaceur.gif" WIDTH=100% HEIGHT=100%></TD>
    </TR>
    <TR>
        <TD WIDTH=33% HEIGHT=33%>
            <IMG SRC="images/accueil_FRA_20.gif" WIDTH=100% HEIGHT=100%></TD>
        <TD WIDTH=33% HEIGHT=33%>
            <IMG SRC="images/accueil_FRA_21.gif" WIDTH=100% HEIGHT=100%></TD>
        <TD WIDTH=33% HEIGHT=33%>
            <IMG SRC="images/accueil_FRA_22.gif" WIDTH=100% HEIGHT=100%></TD>
        <TD WIDTH=1% HEIGHT=1%>
            <IMG SRC="images/espaceur.gif" WIDTH=100% HEIGHT=100%></TD>
    </TR>
    <TR>
        <TD WIDTH=33% HEIGHT=33%>
            <IMG SRC="images/accueil_FRA_23.gif" WIDTH=100% HEIGHT=100%></TD>
        <TD WIDTH=33% HEIGHT=33%>
            <IMG SRC="images/accueil_FRA_24.gif" WIDTH=100% HEIGHT=100%></TD>
        <TD WIDTH=33% HEIGHT=33%>
            <IMG SRC="images/accueil_FRA_25.gif" WIDTH=100% HEIGHT=100%></TD>
        <TD WIDTH=1% HEIGHT=1%>
            <IMG SRC="images/espaceur.gif" WIDTH=100% HEIGHT=100%></TD>
    </TR>
</table>
    </TD>
    </TR>
</table>
</table>
<table WIDTH="100%" BORDER=0 CELLPADDING=0 CELLSPACING=0 valign="top">
    <TR>
        <TD ROWSPAN=2 WIDTH=1% HEIGHT=1% valign="top">
            <IMG SRC="images/accueil_FRA_27.gif" WIDTH=100% HEIGHT=100%></TD>
        <TD WIDTH=33% HEIGHT=33% valign="bottom">
            <IMG SRC="images/accueil_FRA_26.gif" WIDTH=100% HEIGHT=100%></TD>
        <TD ROWSPAN=2 WIDTH=66% HEIGHT=66%  valign="top">
            <IMG SRC="images/accueil_FRA_28.gif" WIDTH=100% HEIGHT=100%></TD>
        <TD>
        <TR>
        <TD WIDTH=33% HEIGHT=33%>
            <IMG SRC="images/accueil_FRA_29.gif" WIDTH=100% HEIGHT=100%></TD>

    </TR>
</table>
0
Chocobot
 

Salut, ne pas utiliser les table pour de la mise en page, cela fait >20 ans qu'il ne faut pas faire.

Une des raisons est la complexité du truc, inchangeable et immodifiable déjà quand on voit comment vous galérez à plusieurs pour arriver à un truc qui tienne(ou pas? à tester sur d'autres résolutions).

Une autre raison plus importante est que le contenu des tables n'est simplement pas référencé en tant que contenu sauf si vous avez des données tabulaires(ex: un tableau excel, des classements ...).

Donc pour faire toute mise en page les tables sont interdites et il y a beaucoup avec mieux CSS.

Au passage HTML n'est pas un langage de programmation mais un langage de balisage.

Voilà voilà petit coup de gueule mais bon c'est aberrant de voir des tables en 2025. Je ne sais pas si c'est en production ou pour apprendre mais dans le dernier cas autant apprendre bien que faire de la m... quand au gif spacer...hmpf je m'étouffe. J'ai appris comme ça mais bon c'était à un autre millénaire!

Surtout ce n'est pas le nombre de cours de qualité qui sont accessibles en 1/2 seconde de recherche google pour faire du HTML...

1