Fusionner des cellules de tableau html

Version imprimable

4 pièce(s) jointe(s)

Bonsoir,
Je souhaiterai créer le tableau suivant (représenté en image) en html:
Pièce jointe 626911

J'ai fais une première tentative :

1ère tentative :

Code:

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:

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 :

Pièce jointe 626917

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

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

Code:

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:
Pièce jointe 626918

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.

08/10/2022, 21h40
mathieu
en repartant de la 1re tentative, vous pouvez modifier l'alignement du contenu des cellules comme cela :
Code:

1 2 3 4 #horairetableau td { vertical-align : top; }
09/10/2022, 18h17
BigSql

1 pièce(s) jointe(s)
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:

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:

Pièce jointe 626930

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.

Bonjour,

Si vous voulez utiliser les attributs rowspan et colspan :

Code:

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:

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}

2 pièce(s) jointe(s)

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

Pièce jointe 626970

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:

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:

Pièce jointe 626971

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

Merci encore.

10/10/2022, 16h21
Toufik83

Vous devriez supprimer la propriété CSS border:4px solid black de la ligne 3 du code CSS que je vous ai montré.
10/10/2022, 17h47
BigSql

D'accord, merci beaucoup pour votre réponse.

1 pièce(s) jointe(s)

J'ai encore un petit souci..

J'ai oublié de rajouté "Accueil après-midi : 13h30 à 14h00" pour la 3ème ligne du tableau, pour la colonne "HORAIRES":

En mettant ceci avec class="apresmidi:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <td colspan="3">Accueil matin : 7h30 à 9h30 </td> <td rowspan="4">3/12 ANS </td> </tr> <tr> <td colspan="3"> Accueil midi : 11h30 à 12h00 </td> </tr> <tr> <td colspan="3"> Accueil après-midi : 13h30 à 14h00 </td> </tr> <tr> <td colspan="3"> Accueil soir : 17h00 à 18h30 </td> </tr>
J'ai le résultat suivant:

Pièce jointe 626997

Je voudrais donc replacer correctement "Accueil soir : 17h00 à 18h30" et mettre également l'ensemble des informations au milieu, aligné face aux titres du tableau.

Je sais que c'est
Code:

1 2 3 4 tr, td { text-align: center; }
Mais ça ne fonctionne pas...

Merci encore pour votre aide

10/10/2022, 22h07
Toufik83

Si vous voulez ajouter une ligne après la deuxième, il va falloir ajouter un +1 à l'attribut rowspan="4" aux <td> 1,2 et 4 de la première ligne afin qu'elles s'étendent sur 4 lignes.

Enfin ça ne sert à rien si je vous donne la solution alors que vous n'arrivez toujours pas à comprendre le fonctionnement des rowspan et colspan
11/10/2022, 10h15
BigSql

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

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:

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:

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 par des simples , qu'il était inutile dans ce cas de mettre en font-weight: bold; dans le CSS.