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>