groupes de lignes dans une table

Version imprimable

Bonjour,

Il y a-t-il un moyen de grouper les colonnes par deux dans une table, comme celle-ci par 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 <table> <th>Nom</th> <th>Prénom</th> <th>Adresse</th> <tr> <td>Nom1</td> <td>Prénom1</td> <td>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</td> </tr> <tr> <td>Interets :</td> <td>Golf</td> <td>Ski</td> <td>Piano</td> </tr> <tr> <td>Nom2</td> <td>Prénom2</td> <td>YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY</td> </tr> <tr> <td>Interets :</td> <td>Cartes</td> </tr> </table>
Comme vous pouvez le constater "Piano" part complètement à droite.
Dois-je abandonner les tabs? J'ai un peu cherché avec google je n'ai vu aucun moyen de grouper les lignes... je suis sur une piste avec tbody mais je n'ai encore rien trouvé de concluant...

Bonjour,

As tu regarder l'utilisation de rowspan et colspan? qui permet de regroupe respectivement des lignes et des collonnes.

Dans ton cas ca donnerait ca, si j'ai bien compris...
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 <table> <tr> <th>Nom</th> <th>Prénom</th> <th colspan="2">Adresse</th> <tr> <td>Nom1</td> <td>Prénom1</td> <td colspan="2">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</td> </tr> <tr> <td>Interets :</td> <td>Golf</td> <td>Ski</td> <td>Piano</td> </tr> <tr> <td>Nom2</td> <td>Prénom2</td> <td colspan="2">YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY</td> </tr> <tr> <td>Interets :</td> <td>Cartes</td> </tr> </table>
:mrgreen:

Merci, c'est intéressant, j'avais essayé ça mais sans arriver à obtenir aussi bien.

pour ma part j'ai testé avec une table dans une table ça a donné ça :
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 <table> <th>Nom</th> <th>Prénom</th> <th>Adresse</th> <tr> <td>Nom1<br/> <table> <td>Interets:</td> <td>Golf</td> <td>Ski</td> <td>Piano</td> </table></td> <td>Prénom1</td> <td>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</td> </tr> <tr> <td>Nom2<br/><table> <td>Interets :</td> <td>Cartes</td> </table> </td> <td>Prénom2</td> <td>YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY</td> </tr> </table>
Si je pouvais avoir la première ligne comme dans ta version et la deuxième comme dans la mienne ça serait parfait...

Un peu comme deux tableaux indépendants que l'on entrecroiserait, est-ce possible d'ailleurs en utilisant les css?

Houlà C'est pas très clair 8O ce que tu souhaites! :aie:

J'ai compris ca!
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 <table width="200" border="1"> <tr> <th colspan="4">Nom</th> <th>Prénom</th> <th>Adresse</th> </tr> <tr> <td colspan="4">Nom1</td> <td rowspan="2">Prénom1</td> <td rowspan="2">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</td> </tr> <tr> <td>Interets</td> <td>Golf</td> <td>ski </td> <td>piano</td> </tr> <tr> <td colspan="4">Nom2</td> <td rowspan="2">Prénom1</td> <td rowspan="2">YYYYYYYYYYYYYYYYYYYYYYYYYYY</td> </tr> <tr> <td colspan="3">Interets</td> <td>cartes</td> </tr> </table>
Mais le plus simple pour faire un tableau d'utiliser les fonctionnalités de création de tableau coffre certains éditeursHTML tu pourras en trouver ici http://xhtml.developpez.com/outils/

Tu pourra ainsi créer un tableau et ensuite fusionner , ou scinder les lignes et collonnes.

:-)

OK merci, pour résumer je voulais exactement cet affichage sauf que je voudrais passer à la ligne au niveau de Intérêts.
Donc ça sur deux 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
 
 
<table width="200" border="1">
  <tr>
    <th>Nom</th>
    <th>Prénom</th>
    <th>Adresse</th>
     <th>Intérêts</th>
     <th>Intérêt1</th>
     <th>Intérêt2</th>
     <th>Intérêt3</th>
  </tr>
  <tr>
    <td>Nom1</td>
    <td>Prénom1</td>
    <td>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</td>
    <td>Interets</td>
    <td>Golf</td>
    <td>ski </td>
    <td>piano</td>
  </tr>
  <tr>
    <td>Nom2</td>
    <td>Prénom1</td>
    <td>YYYYYYYYYYYYYYYYYYYYYYYYYYY</td>
    <td>Interets</td>
    <td>cartes</td>
  </tr>
</table>

Code:

1
2
3
4
5
6
7
8
9
10
 
********************************
* Nom     * Prénom   * Adresse 
********************************
* Nom 1   * Prénom 1 * Adresse 1
* Piscine   * Peche            * Chasse
********************************
* Nom 2   * Prénom 2 * Adresse 2
* Piano     * Tennis de Table  * 
********************************

Apparemment c'est impossible donc je vais partir sur un autre layout, merci et bonne journée.

Voilà, je l'ai fait avec des divs:

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
 
<style>
.lig1col1 {
        clear: both ;
    float: left;
    width: 200px ;
}
.lig1col2 {
    float: left;
    width: 200px ;
    text-align: left;
}
.lig1col3 {
        float: left;
    width: 200px ;
    text-align: left;
}
.lig2col1 {
        float: left;
        clear: both ;
    width: 150px ;
    text-align: left;
}
.lig2col2 {
    float: left;
    width: 150px ;
    text-align: left;
}
.lig2col3
{
        float: left ;
    width: 150px ;
    text-align: left;
}
</style>
</head>
<body>
 
 
<div class="lig1col1">Nom 1</div>
<div class="lig1col2">Prénom 1</div>
<div class="lig1col3">Adresse 1</div>
<div class="lig2col1">Intéret 1</div>
<div class="lig2col2">Intéret 2</div>
<div class="lig2col3">Intéret 3</div>
 
<div class="lig1col1">Nom 2</div>
<div class="lig1col2">Prénom 2</div>
<div class="lig1col3">Adresse 2</div>
<div class="lig2col1">Intéret 4</div>
<div class="lig2col2">Intéret 5</div>
<div class="lig2col3">Intéret 6</div>

Si quelqu'un a une meilleure méthode je suis preneur ;)