Discussion :

[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 ?

[NoSmoking]

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]

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]

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]

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]

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]

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]

sauf que je partage cela :

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.

[unanonyme]

sauf que je partage cela :

surtout la partie que j'ai mise en gras.

Bonjour,

ça marche.

ou pas https://www.w3schools.com/html/html5_semantic_elements.asp mais c'est bon on s'en fou, t'inquiètes.

Bonne journée.