Tableaux: Rendre les cellules homogènes

**Neelix57** · 02/10/2023, 07h23

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:
Nom : Capture d’écran_2023-10-02_07-20-19.jpg
Affichages : 126
Taille : 86,8 Ko

Nom : Capture d’écran_2023-10-02_07-20-19.jpg
Affichages : 126
Taille : 86,8 Ko

Ce que je devrais obtenir:
Nom : Capture d’écran_2023-10-02_07-21-06.png
Affichages : 128
Taille : 1,77 Mo

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;
}

**NoSmoking** · 02/10/2023, 19h29

Bonjour,

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

tu as plusieurs solutions, la première qui est de structurer correctement ta <table>, mais on ne fait pas de la mise en page avec un élément <table>, ça c’était avant, il y a longtemps même

La deuxième est d’utiliser les méthodes modernes qui sont à ta disposition, Grid layout, Flex layout, par exemple.

Prenons l'exemple du code HTML suivant :

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
<div class="grid-3x4">
  <div>
    <img src="https://placehold.co/250x75/DEF/069?text=Header+left" alt="">
  </div>
  <div>
    <a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout">
      <img src="https://placehold.co/300x100/EFD/690?text=Concepts+de+base+des+grilles+CSS" alt="">
    </a>
  </div>
  <div>
    <img src="https://placehold.co/250x75/FDE/906?text=Header+right" alt="">
  </div>
  <div>
    <img src="https://placehold.co/300x50/FFD/996" alt="">
  </div>
  <div>
    <img src="https://placehold.co/300x50/FFD/996?text=Line+2+center" alt="">
  </div>
  <div>
    <img src="https://placehold.co/300x50/FFD/996" alt="">
  </div>
  <div>
    <img src="https://via.placeholder.com/200x150.png/efd/690" alt="">
  </div>
  <div>
    <img src="https://via.placeholder.com/300x400.png/def/069" alt="">
  </div>
  <div>
    <img src="https://via.placeholder.com/300x200.png/fde/906" alt="">
  </div>
  <div>
    <img src="https://placehold.co/250x75/DEF/069?text=Footer+left" alt="">
  </div>
  <div>
    <img src="https://placehold.co/250x75/EFD/690?text=Footer+center" alt="">
  </div>
  <div>
    <img src="https://placehold.co/250x75/FDE/906?text=Footer+right" alt="">
  </div>
</div>

j'ai volontairement rempli les cases avec des images.

Il suffit de lui associé le CSS suivant :

Code :

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
.grid-3x4 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: .5em;
  justify-content: center;
  width: 80vw;
  margin: auto;
}
.grid-3x4 > div {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid #CCC;
}
.grid-3x4 > div > * {
  margin: auto;
}
.grid-3x4 img {
  margin: auto;
  max-width: 100%;
}

... pour que cela ressemble rapidement à quelque chose s'approchant de ton besoin.

Ressource pour commencer :

↪ Les concepts de base des grilles CSS

**Neelix57** · 03/10/2023, 09h47

Bonjour et merci pour ton aide, mais je ne m'en sors pas. J'ai beau suivre le tuto, l'affichage deviens n'importe quoi.

Voici mon 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
<div id="wishesTable">
    <div class="wishesRow1">
        <img src="wishes/ima/041.gif">
        <img src="wishes/ima/016.gif">
        <img src="wishes/ima/bannannione.jpg">
        <img src="wishes/ima/016.gif">
        <img src="wishes/ima/041.gif">
    </div>
    <div class="wishesRow2">
        <img src="wishes/ima/annibouton.gif">
        <a href="voeux2005/index.html">
            <img src="wishes/ima/noel2005.gif">
        </a>
    </div>
    <div class="wishesRow3">
        <img src="wishes/ima/goofy.gif">
        <img src="wishes/ima/bdparty4.gif">
        <img src="wishes/ima/birthday9.gif">
    </div>
    <div class="wishesRow4">
        <img src="wishes/ima/annibouton2.gif">
        <a target="parent" href="noel/index.html">
            <img src="wishes/ima/boutonvoeux.gif">
        </a>
    </div>
</div>

Et le 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
#wishesTable {
    display: grid;
    grid-template-columns: 10% 15% 50% 15% 10%;
    border: 2px solid #fff;
    grid-auto-rows: 100px;
}
.wishesRow1 {
    grid-column: 1 / 6;
    grid-row: 1;
    border: 2px solid #fff;
}
.wishesRow2 {
    grid-column: 1 / 3;
    grid-row: 1;
    border: 2px solid #fff;
}
.wishesRow3 {
    grid-column: 1 / 4;
    grid-row: 1;
}
.wishesRow4 {
    grid-column: 1 / 3;
    grid-row: 1;
}
#wishesTable img {
    display: block;
    position: relative;
}
.wishesRow1 img:nth-of-type(1), .wishesRow1 img:nth-of-type(5) {
    width: 30px;
    margin-left: auto;
    margin-right: auto;
}
.wishesRow1 img:nth-of-type(2) {
    width: 100px;
    margin-left: 10em;
}
.wishesRow1 img:nth-of-type(4) {
    width: 100px;
    margin-right: 10em;
}
.wishesRow1 img:nth-of-type(3) {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
}
.wishesRow2 a, .wishesRow2 > a > img, .wishesRow2 img, .wishesRow4 a, .wishesRow4 > a > img, .wishesRow4 img {
    display: block;
    width: 169px;
    margin-left: auto;
    margin-right: auto;
}
.wishesRow3 img:nth-of-type(1) {
    width: 178px;
    margin-left: auto;
    margin-right: auto;
}
.wishesRow3 img:nth-of-type(2) {
    width: 220px;
    margin-left: auto;
    margin-right: auto;
}
.wishesRow3 img:nth-of-type(3) {
    width: 107px;
    margin-left: auto;
    margin-right: auto;
}

**NoSmoking** · 03/10/2023, 18h41

D'entrée de jeu tu t'es compliqué inutilement la vie

Souvent il faut rester le plus simple possible et dans ton cas le code HTML devrait être le suivant, je parle de la structure

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
<div class="grille">
  <!-- ligne 1 -->
  <img src="https://placehold.co/30x250/DEF/069?text=ballon" alt="">
  <img src="https://placehold.co/110x100/FDE/906?text=gâteau" alt="">
  <img src="https://placehold.co/200x100/FFD/996?text=bannannione.jpg" alt="">
  <img src="https://placehold.co/110x100/FDE/906?text=gâteau" alt="">
  <img src="https://placehold.co/30x250/DEF/069?text=ballon" alt="">
<!-- ligne 2 -->
  <img src="https://placehold.co/170x70/EFD/690?text=Anniversaire" alt="">
  <span class="vide"></span>
  <a href="voeux2005/index.html">
    <img src="https://placehold.co/170x70/FFD/996?text=Noël+2005" alt="">
  </a>
<!-- ligne 3 -->
  <img src="https://via.placeholder.com/180x180.png/def/069?text=goofy.gif" alt="">
  <img src="https://via.placeholder.com/220x200.png/def/069?text=bdparty4.gif" alt="">
  <img src="https://via.placeholder.com/110x110.png/def/069?text=birthday9.gif" alt="">
  <!-- ligne 4 -->
  <img src="https://placehold.co/170x70/EFD/690?text=Anniversaire+2" alt="">
  <span class="vide"></span>
  <a target="parent" href="noel/index.html">
    <img src="https://placehold.co/170x70/FFD/996?text=Voeux 2004" alt="">
  </a>
</div>

il te faut remplacer par tes images bien sûr !

Le CSS associé à cela est

Code :

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
.grille {
  display: grid;
  grid-template-columns: 10% 15% 50% 15% 10%;
  gap: .5em;
  justify-content: center;
  width: 80vw;
  margin: auto;
}
.grille img {
  display: block;
  margin: auto;
  max-width: 100%;
}
/*--
on force les première et dernière colonne
à occuper la hauteur de la grille 
--*/
.grille:nth-child(1) ,
.grille:nth-child(5) {
  margin-top: 0;
  grid-row-start: 1;
  grid-row-end: 5;
}
.grille:nth-child(5) {
  grid-column-start: 5;
}

c'est plus light que ce que tu as mis en place.

J'ai ajouté pour bien visualiser l'ensemble le CSS suivant qui peut être supprimé :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.grille > * {
  border: 1px solid #CCC;
}
.grille span.vide {
  display: flex;
  border: 1px dotted #CCC;
  font-size: .75em;
  color: #CCC;
}
span.vide:before {
  content: "Élément vide";
  margin: auto;
}

Une explication quand même concernant les éléments vides, ceux ci permettent aux autres éléments d'occuper les bonnes places sans avoir recours à de multiples déclarations d'occupations via des grid-column-start et autre grid-column-end.

**Neelix57** · 08/10/2023, 08h51

Je te remercie beaucoup NoSmoking.

Tableaux: Rendre les cellules homogènes

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager