colspan et div table

**laurentSc** · 11/12/2023, 22h03

Bonsoir,
je souhaite faire de la mise en page tabulaire SANS utiliser la balise <table> sachant que le rôle de cette balise est plus d'apporter une sémantique que d'apporter une mise en page. Je me suis donc tourner vers le CSS display:table, table-row, table-cell...
Par contre je souhaite aussi avoir la fonctionnalité colspan qui est relative à la balise <table>.
En cherchant, j'ai trouvé ce code :

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
<div class="table">
    <div class="row">
        <div class="cell">cell 1</div>
        <div class="cell">cell 2</div>
    </div>
    <div class="row">
        <div class="cell colspan">
            <div><div>
                cell 3
            </div></div>
        </div>
        <div class="cell"></div>
    </div>
</div>

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
div.table {
  display: table;
  width: 100px;
  background-color: lightblue;
  border-collapse: collapse;
  border: 1px solid red;
}
 
div.row {
  display: table-row;
}
 
div.cell {
  display: table-cell;
  border: 1px solid red;
}
 
div.colspan,
div.colspan+div.cell {
  border: 0;
}
 
div.colspan>div {
  width: 1px;
  margin-right:auto;
  margin-left:auto;
}
 
div.colspan>div>div {
  position: relative;
  width: 99px;
  overflow: hidden;
}

https://codepen.io/laurentsch/pen/zYeXPMJ

Certes, il apporte ce que je cherche mais le CSS est loin d'être simple. Peut-on le simplifier, SVP ?

**NoSmoking** · 12/12/2023, 14h15

Bonjour,

Je me suis donc tourner vers le CSS display:table, table-row, table-cell...

dans ce cas passe à la vitesse supérieure avec par exemple les FLEX ou GRID layout.

**laurentSc** · 12/12/2023, 17h26

Je regarde ; j'ai déjà un peu utilisé flex mais jamais encore grid...

En faisant une recherche sur ce forum, j'ai souri car j'ai vu ce que tu dis :

Le CSS a évolué depuis certains posts et il est effectivement plus facile actuellement de faire de la mise en page sans <table>, même si dans le cas présent on peut tout à fait considérer que l'on est en présence de « données tabulaires ».

Quand j'ai démarré en 2006, la mise en page tabulaire était faite avec la balise <table> (au moins sur le site intranet que je venais de récupérer).

N'étant pas un grand connaisseur de flex ou de grid, je cherche pour apprendre du code déjà fait, style codepen mais je trouve pas. Ca existe ?

**NoSmoking** · 13/12/2023, 08h33

Petit exemple simple sur base de FLEX :
le 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
<div class="wrapper-table">
  <div class="row">
    <div class="cell">Cellule unique</div>
  </div>
  <div class="row">
    <div class="cell">Cellule #1</div>
    <div class="cell">Cellule #2</div>
  </div>
  <div class="row">
    <div class="cell">et Un</div>
    <div class="cell">et Deux</div>
    <div class="cell">et Trois</div>
  </div>
</div>

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
.wrapper-table {
  --border: 1px solid #CCC;
  max-width: 40em;
}
.row {
  display: flex;
  flex-wrap: wrap;
  gap: .25em;
  margin: .25em 0;
}
.cell {
  flex-basis: 0;
  flex-grow: 1;
  padding: .5em;
  max-width: 100%;
  border: var(--border);
}

pour être honnête on perd la notion de fusion des bordures, border-collapse: collapse, mais rien d'insurmontable si besoin.

**laurentSc** · 13/12/2023, 08h53

Je regarderai dans la matinée mais ça a l'air de répondre parfaitement à mes besoins. Si c'est le cas, je mettrai en

.

**laurentSc** · 13/12/2023, 12h34

J'ai mis beaucoup de temps pour étudier ton exemple sachant que mes connaissances en flexbox sont limitées...

Je pense avoir saisi le rôle de la plupart des propriétés CSS ; par contre, je ne trouve pas comment centrer les éléments dans les cellules. Merci de me l'indiquer.

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
.wrapper-table {
    --border: 1px solid #CCC;
    max-width: 40em; /* à quoi ça sert ? */
}
.row {
    display: flex;
    gap: .25em;
    margin: .25em 0; /* marge entre chq ligne */
    justify-content: center; /* essai infructueux de centrage */
}
.cell {
    flex-basis: 0;
    flex-grow: 1; /* chq élément va s'étirer de façon à ce qu'une ligne occupe la largeur du conteneur */
    padding: .5em; /* marge autour de chq cellule */
    max-width: 100%; /* à quoi ça sert ? */
    border: var(--border);
 
}

**unanonyme** · 13/12/2023, 14h19

Code :

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

1
2
3
4
5
6
7
8
.cell {
    flex-basis: 0;
    flex-grow: 1; /* chq élément va s'étirer de façon à ce qu'une ligne occupe la largeur du conteneur */
    padding: .5em; /* marge autour de chq cellule */
    max-width: 100%; /* à quoi ça sert ? */
    border: var(--border);
    text-align:center;
}

text-align:center;
?

**laurentSc** · 13/12/2023, 14h47

Merci, c'est extrêmement simple et je ne cherchais que du compliqué...

**unanonyme** · 13/12/2023, 15h11

Envoyé par laurentSc

Merci, c'est extrêmement simple et je ne cherchais que du compliqué...

Bonjour,

A moins de faire du responsive design, utiliser flex ou grid pour remplacer des table est,
nécessairement, une méthode compliquée.

On aime tous faire compliquer une fois de temps en temps.

J'utilise ces ressources là quand je me lance dans ces affaires,

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/...te-guide-grid/

Bonne journée

**laurentSc** · 13/12/2023, 15h31

Merci pour ces 2 liens très utiles.

**NoSmoking** · 13/12/2023, 16h44

Envoyé par unanonyme

A moins de faire du responsive design, utiliser flex ou grid pour remplacer des table est,
nécessairement, une méthode compliquée.

En quoi est-ce compliqué ?

De plus il n'est pas tant le fait de remplacer les <table> par autre chose mais de les utiliser pour ce que ce modèle est fait, la présentation de données tabulaires.

Concernant la mise en page et/ou la présentation des moyens plus performants et sémantiquement « plus juste » existent alors autant les utiliser, et ce n'est pas qu'une question de « responsive design ».

**unanonyme** · 13/12/2023, 17h12

Bonjour,

La question m'estomaque tant il suffit d'ouvrir n'importe
quel guide pour constater la différence d'investissement
nécessaire pour chacune des deux méthodes, grid ou table.

https://developer.mozilla.org/fr/docs/Learn/HTML/Tables
https://developer.mozilla.org/fr/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout

Bonne journée.

**laurentSc** · 13/12/2023, 17h34

Envoyé par unanonyme

La question m'estomaque tant il suffit d'ouvrir n'importe
quel guide pour constater la différence d'investissement
nécessaire pour chacune des deux méthodes, grid ou table.

Quelle méthode plus simple utilises-tu ?

**unanonyme** · 13/12/2023, 17h54

Bonjour,

Il n'y a pas de méthode "plus simple" sans la définition
d'un contexte et de ses contraintes.

Pour afficher des données tabulaire sans autre artifices,
la balise table fait le travail, à mon sens.

C'est, par ailleurs, moins de travail car les chances
de ne pas rencontrer des problèmes de compatibilité
inter-navigateurs est accrue.

Ce qui ne veut pas dire que grid et flex sont inutile.

Bonne journée.

**laurentSc** · 13/12/2023, 21h25

Bonsoir,
dans ce cas, il serait intéressant si tu pouvais donner un exemple de cas où la réflexion que tu fais au post #12 serait justifiée.

**unanonyme** · 13/12/2023, 21h31

Envoyé par laurentSc

Bonsoir,
je souhaite faire de la mise en page tabulaire SANS utiliser la balise <table> sachant que le rôle de cette balise est plus d'apporter une sémantique que d'apporter une mise en page. Je me suis donc tourner vers le CSS display:table, table-row, table-cell...
Par contre je souhaite aussi avoir la fonctionnalité colspan qui est relative à la balise <table>.
En cherchant, j'ai trouvé ce code :

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
<div class="table">
    <div class="row">
        <div class="cell">cell 1</div>
        <div class="cell">cell 2</div>
    </div>
    <div class="row">
        <div class="cell colspan">
            <div><div>
                cell 3
            </div></div>
        </div>
        <div class="cell"></div>
    </div>
</div>

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
div.table {
  display: table;
  width: 100px;
  background-color: lightblue;
  border-collapse: collapse;
  border: 1px solid red;
}
 
div.row {
  display: table-row;
}
 
div.cell {
  display: table-cell;
  border: 1px solid red;
}
 
div.colspan,
div.colspan+div.cell {
  border: 0;
}
 
div.colspan>div {
  width: 1px;
  margin-right:auto;
  margin-left:auto;
}
 
div.colspan>div>div {
  position: relative;
  width: 99px;
  overflow: hidden;
}

https://codepen.io/laurentsch/pen/zYeXPMJ

Certes, il apporte ce que je cherche mais le CSS est loin d'être simple. Peut-on le simplifier, SVP ?

**laurentSc** · 13/12/2023, 21h42

sauf que je partage cela :

Envoyé par NoSmoking

Concernant la mise en page et/ou la présentation des moyens plus performants et sémantiquement « plus justes » existent alors autant les utiliser, et ce n'est pas qu'une question de « responsive design ».

surtout la partie que j'ai mise en gras.