Alignement de données dans un tableau

Version imprimable

1 pièce(s) jointe(s)

Bonjour,

Dans les cellules d'un tableau, je peux avoir plusieurs éléments que je mets en ligne. J'aimerais rajouter en face, dans une seconde colonne, du texte qui doit être aligné avec un des éléments de la 1ère colonne.

Mon code :

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
<style>.bout {border: 1px solid #00b3cd;width:30px;height:30px;text-align:center;float:left;margin-right:5px;border-radius:10px;background-color:#CEF6F5;}.bout:hover {background-color:#2E64FE}.corx {display:none;border: 1px solid #00b3cd;clear:both;max-width:630px;}.td1 {text-align:center;font-family:arial;font-size:1.2em;font-weight:bold;border: 1px solid black;line-height:1.2;}.td2 {border: 1px solid black;font-size:1.2em;text-align:center;line-height:1.5em;}.td3 {border: 1px solid black;font-size:1.1em;text-align:center;line-height:1.5em;}.td4 {border: 1px solid black;font-size:1.1em;text-align:center;line-height:1.5em;font-weight:bold;}</style>
 
<center>
 
</div>
 
 
 
<table>
<tbody>
<tr>
<td colspan="2" class="td1" style="width:530px;background-color:#CEF6F5;">Poule A-1</td>
</tr>
<tr>
<td class="td2" style="width:50%;color:blue;font-weight:bold;">Club</td>
<td class="td2" style="width:50%;color:blue;font-weight:bold;">Nom équipe</td>
 
</tr>
<tr>
<td class="td3">
Club A
Club B
Club C
Club D
</td>
<td class="td3">
Les joyeux drilles
 
les joyeux lurons
</td>
 
 
</tr>
 
 
 
</tbody>
</table>

Le visuel obtenu :
Pièce jointe 647451

Alors que j'aimerais que "les joyeux drilles" soit sur la 1ère ligne (en face du club A) et "les joyeux lurons" en face de club C

Existe-t-il une solution autre que celle qui consiste à enchainer les <tr> et <td> sachant que souvent la 2ème colonne est vide (comme dans le code ci-dessous) et que j'ai beaucoup de lignes ?

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
<style>.bout {border: 1px solid #00b3cd;width:30px;height:30px;text-align:center;float:left;margin-right:5px;border-radius:10px;background-color:#CEF6F5;}.bout:hover {background-color:#2E64FE}.corx {display:none;border: 1px solid #00b3cd;clear:both;max-width:630px;}.td1 {text-align:center;font-family:arial;font-size:1.2em;font-weight:bold;border: 1px solid black;line-height:1.2;}.td2 {border: 1px solid black;font-size:1.2em;text-align:center;line-height:1.5em;}.td3 {border: 1px solid black;font-size:1.1em;text-align:center;line-height:1.5em;}.td4 {border: 1px solid black;font-size:1.1em;text-align:center;line-height:1.5em;font-weight:bold;}</style>
 
<center>
 
</div>
 
 
 
<table>
<tbody>
<tr>
<td colspan="2" class="td1" style="width:530px;background-color:#CEF6F5;">Poule A-1</td>
</tr>
<tr>
<td class="td2" style="width:50%;color:blue;font-weight:bold;">Club</td>
<td class="td2" style="width:50%;color:blue;font-weight:bold;">Nom équipe</td>
 
</tr>
<tr>
<td class="td3">
Club A
</td>
<td class="td3">
Les joyeux drilles
</td>
</tr>
<tr>
<td class="td3">
Club B
</td>
<td class="td3"></td>
</tr>
<tr>
<td class="td3">
Club C
</td>
<td class="td3">
Les joyeux lurons
</td>
</tr>
 
 
</tbody>
</table>

Bonjour,

Citation:

J'aimerais rajouter en face, dans une seconde colonne, du texte qui doit être aligné avec un des éléments de la 1ère colonne.

dans ce cas les informations sont liées et doivent appartenir à la même ligne <tr>. Ta première façon de faire n'est donc pas cohérente.

Citation:

Existe-t-il une solution autre que celle qui consiste à enchainer les <tr> et <td> sachant que souvent la 2ème colonne est vide

hormis la construction dynamique qui t'éviterait d'écrire des éléments pour rien, cette solution reste la mieux adaptée.

On pourra quand même noter que tu peux alléger ton code de plusieurs façons et en particulier en séparant les CSS du HTML.

On notera également que les codes suivants généreront le même rendu, avec le bon CSS bien sûr :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <tr> <td>Club A</td> <td>Les joyeux drilles</td> <tr> <td>Club B</td> <td></td> </tr>  <tr> <td>Club A</td> <td>Les joyeux drilles</td> <tr> <td>Club B</td> <td> </tr>  <tr> <td>Club A</td> <td>Les joyeux drilles</td> <tr> <td>Club B</td> </tr>
Important à signaler : La balise de fin des <td> peut être omise si l'élément est suivi par un élément <th> ou <td>.

On ne note rien de bien complexe à mettre en oeuvre, quelque soit la méthode retenue, et cela rend la maintenance aisée et cohérente.

Exemple simple de mise en forme d'une <table> :
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 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mise en forme d'une table</title> <style> .table-poule { --border-coul: #CCC; width: 28em; margin: auto; border: 1px solid var(--border-coul); border-collapse: collapse; text-align: center; font-family: arial; font-size: 1.2em; line-height: 2; } .table-poule caption { border: 1px solid var(--border-coul); border-bottom: none; font-weight: 700; line-height: 2; color: #FFF; background-color: #27C; } .table-poule thead { background-color: #DEF; color: #069; } .table-poule tbody { font-size: .9em; } .table-poule thead th { width: 50%; } .table-poule tr { border: 1px solid var(--border-coul); /* si l'on veut une sépartion des lignes */ } .table-poule tr :first-child { border-right: 1px solid var(--border-coul); } .table-poule thead tr { border-bottom: 1px solid var(--border-coul); } .table-poule tbody tr:nth-child(even) { background-color: #F6F6F6; /* ne fonctionne pas si TD vide omise */ } </style> </head> <body> <table class="table-poule"> <caption>Poule A-1</caption> <thead> <tr> <th>Club</th> <th>Nom équipe</th> </tr> </thead> <tbody> <tr> <td>Club A</td> <td>Les joyeux drilles</td> <tr> <td>Club B</td> <td> </tr> <tr> <td>Club C</td> <td>Les joyeux lurons</td> </tr> <tr> <td>Club D</td> <td>Les joyeux tout court</td> </tr> </tbody> </table> </body> </html>
Voilà on ne devrait pas être bien loin de ton besoin.

06/12/2023, 22h56
nlbmoi

Bonsoir,

Merci pour ce retour.
J'ai quelques questions sur ta proposition :
- que signifie les "- -" qui apparaissent dans le style --border-coul ?
- est-ce que l'on peut mettre des sous-titres (un intermédiaire entre thead et tbody) ?
07/12/2023, 17h33
NoSmoking
Citation:

- que signifie les "- -" qui apparaissent dans le style --border-coul ?

Il s'agit de Propriétés personnalisées permettant de réutiliser une valeur dans le CSS, cela facilite la modificaton/maintenance.
Dans le cas présent la couleur des bordures est définie à #CCC et si tu modifies cette valeurs toutes les bordures déclarées avec la fonction var(--border-coul) de la table changeront de couleur.

Ressources :
- Propriétés personnalisées (--*)
- La fonction var()
Citation:

- est-ce que l'on peut mettre des sous-titres (un intermédiaire entre thead et tbody) ?

Tu peux avoir plusieurs <tbody> dans une <table> mais pas plusieurs <caption>.

Tu peux néanmoins jouer avec des attributs colspan pour insérer/formater tes lignes ce que tu veux.

Il existe également d'autres façons de présenter des données dites « tabulaires ».