Fusionner des cellules de tableau html

**BigSql** · 08/10/2022, 20h32

Bonsoir,
Je souhaiterai créer le tableau suivant (représenté en image) en html:
Nom : Horaires.JPG
Affichages : 537
Taille : 73,6 Ko

J'ai fais une première tentative :

1ère tentative :

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
 
<head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/infos.css">
  </head>
 
<header>
  <h1> Les informations importantes de notre centre :  <h1> 
 
    </header>
 
  <body>
 
 
<h2 class="horairetitre">Les 8 ALSH en détail  </h2> 
 
<table id="horairetableau" border="1">
    <tr>
 
        <td class="PremiereCase"> ALSH </td>
        <td class="DeuxiemeCase"> LIEU D'ACCUEIL </td>
        <td class="TroisiemeCase">HORAIRES</td>
        <td class="QuatriemeCase">PUBLIC </td>
 
    </tr>
 
 
 
    <tr>
 
        <td > BETON BAZOCHES </td>
        <td > Rue de l'Hôtel de Ville <br> 77320 BETON BAZOCHES </td>
        <td><strong class="matin">Accueil matin :</strong> <br> 7h30 à 9h30 <br> <strong class="midi"> Accueil midi :</strong> <br> 11h30 à 12h00<br> puis 13h30 à<br>1 4h00 <br><strong class="soir"> Acccueil soir : </strong><br>17h00 à 18h30 
        </td>
        <td>3/12 ANS </td>
 
    </tr>
 
        <td> JOUY LE CHATEL  </td>
        <td> 11, rue des Provins <br> 77970 JOUY-LE-CHÂTEL <br> 77320 BETON BAZOCHES </td>
        <td><strong  class="matin">Accueil matin :</strong> <br> 7h30 à 9h30 <br> <strong class="midi"> Accueil midi :</strong> <br> 11h30 à 12h00<br><strong class="après-midi"> Accueil après-midi :</strong> <br> 13h30 à 14h00 <br><strong class="soir"> Acccueil soir : </strong> <br>17h00 à 18h30</td>
        <td>3/12 ANS </td>
 
    <tr>
 
    </tr>
</table>   
 
<section class="groupe_tarifs">
 
<h2 class="TitreTableauTarif">TARIFS ACCUEIL DE LOISIRS</h2>
 
<h2>Sur justificatif - avis d'imposition</h2>
<p class="tariftitre"> tarifs appliqués:  </p>
<img src="images/tarifs.png">
 
<p>Sport Loisirs Vacances, les inscriptions se font à la semaine. Les sorties proposées à la journée nécessitent une inscription le matin en plus de l'après-midi.</p>
 
</section>
  </body>
 
</html>

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
body{
background-color : #b5a789;
font-family: Georgia; /* police d'écriture */
color: purple;
padding-left: 11em;
}
 
h1,h3
{
	color: blue;
	text-align: center;
}
 
h2{
border: 3px green dashed;}
 
.TitreTableauTarif{
 
	font-weight: bold;
	text-decoration: underline;
	color: black;
}
p{
	color: white;
}
 
.PremiereCase, .DeuxiemeCase, .TroisiemeCase, .QuatriemeCase  
{
	background-color: #d8bc2c;
	font-weight: bold;
}
 
.matin, .midi, .soir
{
	font-weight: bold;
}
#horairetableau
{
background-color: white;
color: black;
}
 
table{
 
border-collapse: collapse;
 
}

Résultat visuel :

Nom : 1ère tentative.png
Affichages : 546
Taille : 92,4 Ko

Malheureusement il n'y a pas de fusion de case .

J'ai donc essayé avec une 2ème tentative :

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
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
 
<head>
<h1> Les informations importantes de notre centre :  <h1> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/infos.css">
 
 
</head>
<body>
 
<div>
 
<p class="horairetitre">horaires d’ouverture du centre :  </p>
<table id="horairetableau" border="1" >
 
 
 <table id="horairetableau" border="1">
    <tr>
 
        <td rowspan="4" class="PremiereLigne"> ALSH LIEU D'ACCUEIL HORAIRES PUBLIC</td>
 
    </tr>
 
 
 
    <tr>
 
<td rowspan="4" class="PremiereLigne">BETON BAZOCHES Rue de l'Hôtel de Ville <br> 77320 BETON BAZOCHES Accueil matin :</strong> <br> 7h30 à 9h30 <br> <strong class="midi"> Accueil midi :</strong> <br> 11h30 à 12h00<br> puis 13h30 à<br>1 4h00 <br><strong class="soir"> Acccueil soir : </strong><br>17h00 à 18h30 3/12 ANS    </td>
 
 
    </tr>
</table>   
 
 
 
        <td rowspan="4" class="PremiereLigne"> JOUY LE CHATEL
11, rue des Provins <br> 77970 JOUY-LE-CHÂTEL <br> 77320 BETON BAZOCHES
<strong  class="matin">Accueil matin :</strong> <br> 7h30 à 9h30 <br> <strong class="midi"> Accueil midi :</strong> <br> 11h30 à 12h00<br><strong> Accueil après-midi :</strong class="soir"><br> 13h30 à 14h00 <br><strong> Acccueil soir : </strong> <br>17h00 à 18h30
3/12 ANS </td>
 
    </tr>
 
 
</table>
 
 
</div>
 
 
 
</body>
 
<footer>
	<a  href="file:///E:/Lyc%C3%A9e%20L%C3%A9onard%20de%20Vinci/BTS%20SIO%201er%20semestre/DEV/HTML&CSS/site_BTS_SIO/index.html">
       Cliquez ici pour revenir à la page principale
    </a>
 
</footer>
</html>

Ayant le résultat catastrophique suivant:
Nom : tableau 2.png
Affichages : 507
Taille : 40,2 Ko

Pouvez-vous m'expliquer en détails les rôles et les fonctionnements de rowspan et de colspan ?
Merci d'avance pour votre aide, bonne soirée.

**mathieu** · 08/10/2022, 21h40

en repartant de la 1re tentative, vous pouvez modifier l'alignement du contenu des cellules comme cela :

Code css :

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

1
2
3
4
#horairetableau td
{
	vertical-align : top;
}

**BigSql** · 09/10/2022, 18h17

Bonjour,

Merci beaucoup pour votre réponse, puis désolé de ne répondre que maintenant.

En faisant ce que vous m'avez proposé,

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
#horairetableau
{
background-color : white;
color: black;
 
}
 
table{
 
border-collapse: collapse;
 
}
 
#horairetableau td
{
vertical-align: top;
}

Le tableau ne change pas du tout:

Nom : 20221009_180710.jpg
Affichages : 470
Taille : 316,8 Ko

Dois-je changer la position de certaines balises ? Dois-je ajouter du css supplémentaire pour <table>, <tr> et <td> ?

Merci encore, bonne fin de journée à vous.

**Toufik83** · 10/10/2022, 14h45

Bonjour,

Si vous voulez utiliser les attributs rowspan et colspan :

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
<table id="horairetableau" border="1">
  <tr>
    <td class="PremiereCase"> ALSH </td>
    <td class="DeuxiemeCase"> LIEU D'ACCUEIL </td>
    <td class="TroisiemeCase" colspan="3">HORAIRES</td>
    <td class="QuatriemeCase">PUBLIC </td>
  </tr>
  <tr>
    <td rowspan="3"> BETON BAZOCHES </td>
    <td rowspan="3"> Rue de l'Hôtel de Ville <br> 77320 BETON BAZOCHES </td>
    <td colspan="3"><b class="matin">Accueil matin :</b> <br> 7h30 à 9h30 <br></td>
    <td rowspan="3">3/12 ANS </td>
  </tr>
  <tr>
    <td colspan="3"> <b class="midi"> Accueil midi :</b> <br> 11h30 à 12h00<br> puis 13h30 à<br>14h00</td>
  </tr>
  <tr>
    <td colspan="3"><b class="soir"> Acccueil soir : </b><br>17h00 à 18h30</td>
  </tr>
  <tr>
    <td rowspan="3"> JOUY LE CHATEL </td>
    <td rowspan="3"> 11, rue des Provins <br> 77970 JOUY-LE-CHÂTEL <br> 77320 BETON BAZOCHES </td>
    <td colspan="3"><b class="matin">Accueil matin :</b> <br> 7h30 à 9h30 </td>
    <td rowspan="3">3/12 ANS </td>
  </tr>
  <tr>
    <td colspan="3"><br> <b class="midi"> Accueil midi :</b> <br> 11h30 à 12h00<br> <br></td>
  </tr>
  <tr>
    <td colspan="3"><b class="soir"> Acccueil soir : </b> <br>17h00 à 18h30</td>
  </tr>
</table>

Puis un peu de CSS :

Code css :

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

1
2
3
4
5
table,tr{width:100%;border-collapse:collapse;}
table tr td{vertical-align:top;text-align:left;border:none;padding:10px 3px }
tr:nth-child(1) td{padding:20px;text-align:center;font-weight:bold;color:white;background-color:goldenrod;border:4px solid black}
tr:nth-child(3n+2) td:last-child{text-align:center}
tr:nth-child(5){border-top:1px solid black}

**BigSql** · 10/10/2022, 15h49

Bonjour,
Je vous remercie beaucoup pour votre réponse détaillée, ceci me donne le résultat visuel suivant :

Nom : chrome_l8QE4P8oDH.png
Affichages : 457
Taille : 43,9 Ko

Nom : chrome_l8QE4P8oDH.png
Affichages : 457
Taille : 43,9 Ko

C'est pratiquement ce que je veux, mais je voulais savoir s'il était possible de retirer aussi les traits de limitation de la première ligne (ALSH, LIEU D'ACCUEIL etc...) ?

J'ai essayé en mettant ceci:

Code html :

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

1
2
3
4
5
6
 <tr>
    <td rowspan="3" class="PremiereCase"> ALSH </td>
    <td rowspan="3" class="DeuxiemeCase"> LIEU D'ACCUEIL </td>
    <td rowspan="3" class="TroisiemeCase" >HORAIRES</td>
    <td rowspan="3" class="QuatriemeCase">PUBLIC </td>
  </tr>

ça me donne le résultat suivant:

Nom : plmk.png
Affichages : 457
Taille : 45,1 Ko

Il est impossible de retirer les traits de limitation de la première ligne du tableau ?

Merci encore.

**Toufik83** · 10/10/2022, 16h21

Vous devriez supprimer la propriété CSS border:4px solid black de la ligne 3 du code CSS que je vous ai montré.

**BigSql** · 11/10/2022, 10h15

Bonjour, d'accord, vous avez raison, si je suis pas encore capable de comprendre ceci ça vaut pas la peine de m'expliquer ceci pour l'instant...

Bonne journée à vous

**NoSmoking** · 12/10/2022, 11h25

Bonjour,
ta première tentative est ma mon sens la plus aboutie chaque ligne, <tr>, se rapportant à un même événement.

Tu n'as pas besoin de rowspan ou autre colspan dans ton cas mais juste d'un bon formatage HTML/CSS de tes données.

Exemple :

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
<table id="horairetableau">
  <thead>
  <tr>
    <th>ALSH</th>
    <th>LIEU D'ACCUEIL</th>
    <th>HORAIRES</th>
    <th>PUBLIC</th>
  </tr>
  </thead>
  <tbody>
    <tr>
      <td>BETON BAZOCHES</td>
      <td>Rue de l'Hôtel de Ville<br>77320 BETON BAZOCHES</td>
      <td>
        <p><span class="matin">Accueil matin :</span><br>7h30 à 9h30
        <p><span class="midi"> Accueil midi :</span><br>11h30 à 12h00
        <p><span class="apres-midi"> Accueil après-midi :</span><br>13h30 à 14h00
        <p><span class="soir"> Acccueil soir :</span><br>17h00 à 18h30
      </td>
      <td>3/12 ans</td>
    </tr>
    <tr>
      <td>JOUY LE CHATEL</td>
      <td>11, rue des Provins<br>77970 JOUY-LE-CHÂTEL<br>77320 BETON BAZOCHES </td>
      <td>
        <p><span class="matin">Accueil matin :</span><br>7h30 à 9h30
        <p><span class="midi"> Accueil midi :</span><br>11h30 à 12h00
        <p><span class="apres-midi"> Accueil après-midi :</span><br>13h30 à 14h00
        <p><span class="soir"> Acccueil soir :</span><br>17h00 à 18h30
      </td>
      <td>3/12 ans</td>
    </tr>
  <tbody>
</table>

et le CSS minimum 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
22
table {
  border: 1px solid #888;
  border-collapse: collapse;
}
table thead {
  background-color: #D8BC2C;
}
th, td {
  padding: .25em .5em;
}
tr {
  border-bottom: 1px solid #888;
}
td {
  vertical-align: top;
}
td p {
  margin: 0 0 .5em;
}
.matin, .midi, .apres-midi, .soir {
  font-weight: bold;
}

... tu obtiens le résultat, ou proche, de ce que tu souhaites sur ta première image.

Nota : j'ai remplacé tes éléments <strong> par des simples <span>, qu'il était inutile dans ce cas de mettre en font-weight: bold; dans le CSS.

Fusionner des cellules de tableau html

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager