Discussion :

[Neelix57]

Bonjour,

Soit un tableau de 4 lignes. La première ligne comporte 5 colonnes la deuxième 2 colonnes, la troisième en
comporte 3 et la quatrième en comporte à nouveau 2.

Le problème: Comment rendre le tableau homogène ?

Voici ce que j'obtiens:


Ce que je devrais obtenir:


Le code HTML:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
42
43
44
45
46
47
48
49
50
<table id="wishesTable">
    <tr>
        <td class="firstWishesCell1">
            <img src="wishes/ima/041.gif">
        </td>
        <td class="firstWishesCell2 firstWishesCell21">
            <img src="wishes/ima/016.gif">
        </td>
        <td class="firstWishesCell3">
            <img src="wishes/ima/bannannione.jpg">
        </td>
        <td class="firstWishesCell2 firstWishesCell22">
            <img src="wishes/ima/016.gif">
        </td>
        <td class="firstWishesCell1">
            <img src="wishes/ima/041.gif">
        </td>
    </tr>
    <tr>
        <td class="secondRowCell" colspan="2">
            <img src="wishes/ima/annibouton.gif">
        </td>
        <td class="secondRowCell" colspan="3">
            <a href="voeux2005/index.html">
                <img src="wishes/ima/noel2005.gif">
            </a>
        </td>
    </tr>
    <tr>
        <td class="thirdRowCell1" colspan="2">
            <img src="wishes/ima/goofy.gif">
        </td>
        <td class="thirdRowCell2">
            <img src="wishes/ima/bdparty4.gif">
        </td>
        <td class="thirdRowCell3" colspan="2">
            <img src="wishes/ima/birthday9.gif">
        </td>
    </tr>
    <tr>
        <td class="secondRowCell" colspan="2">
            <img src="wishes/ima/annibouton2.gif">
        </td>
        <td class="secondRowCell" colspan="3">
            <a target="parent" href="noel/index.html">
                <img src="wishes/ima/boutonvoeux.gif">
            </a>
        </td>
    </tr>
</table>

Le code CSS:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
#wishesTable {
    display: block;
    position: relative;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
#wishesTable img {
    display: block;
    position: relative;
}
.firstWishesCell1 {
    width: 10%;
}
.firstWishesCell2 {
    width: 15%;
}
.firstWishesCell3 {
    width: 50%;
}
.firstWishesCell1 img {
    width: 30px;
    margin-left: auto;
    margin-right: auto;
}
.firstWishesCell21 img {
    width: 100px;
    margin-left: 10em;
}
.firstWishesCell22 img {
    width: 100px;
    margin-right: 10em;
}
.firstWishesCell3 img {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
}
.secondRowCell {
    width: 50%;
}
.secondRowCell a, .secondRowCell > a > img, .secondRowCell img {
    display: block;
    width: 169px;
    margin-left: auto;
    margin-right: auto;
}
.thirdRowCell1, .thirdRowCell3 {
    width: 25%;
}
.thirdRowCell2 {
    width: 50%;
}
.thirdRowCell1 img {
    width: 178px;
    margin-left: auto;
    margin-right: auto;
}
.thirdRowCell2 img {
    width: 220px;
    margin-left: auto;
    margin-right: auto;
}
.thirdRowCell3 img {
    width: 107px;
    margin-left: auto;
    margin-right: auto;
}