Discussion :

[Zartan]

Bonjour,

Il y a-t-il un moyen de grouper les colonnes par deux dans une table, comme celle-ci par exemple:

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
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...

[copin]

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 :

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
 
<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>

[Zartan]

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 :

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
 
 
<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?

[copin]

Houlà C'est pas très clair ce que tu souhaites!

J'ai compris ca!

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
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.

:-)

[Zartan]

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 :

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
 
 
<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 :

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

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 :

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
 
<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