input dans un tableau

**munos46** · 19/05/2009, 00h26

bonjour je souhaite créer un tableau d'input. Mon premier problème est que mon tableau est trop grand pour la page.

Ensuite je souhaiterai que mes inputs type='text'
occupent tout l'espace possible dans une cellule d'un tableau
ce serait super que quelqu'un puisse me venir en aide. Merci d'avance.

css du tableau :

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
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
/* Style des lignes de séparation */
.table-separateur {
  font-size : 12px;
  font-family : Verdana, arial, helvetica, sans-serif;
  color : #333333;
  background-color : #d6d3ce;
}
 
/* Style du titre du tableau */
.table-titre {
   font-size : 12px;
   font-family : Verdana, arial, helvetica, sans-serif;
  color : #eeeeee;
  text-align : center;
  font-weight : bold;
  background-color : #666666;
}
 
/* Style des en-têtes du tableau */
.table-entete {
  font-size : 12px;
  font-family : Verdana, arial, helvetica, sans-serif;
  color : #333333;
  background-color : #a7ada7;
}
 
/* Style des en-têtes du tableau (centré) */
.table-entete-centre {
  font-size : 12px;
   font-family : Verdana, arial, helvetica, sans-serif;
   color : #333333;
   text-align : center;
  background-color : #a7ada7;
}
 
/* Style des en-têtes du tableau (droite) */
.table-entete-droit {
  font-size : 12px;
   font-family : Verdana, arial, helvetica, sans-serif;
   color : #333333;
  text-align : right;
  background-color : #a7ada7;
}
 
/* Style 1 des cellules */
.table-ligne1 {
  font-size : 12px;
  font-family : Verdana, arial, helvetica, sans-serif;
  color : #333333;
  background-color : #c6c3bd;
}
 
/* Style 2 des cellules */
.table-ligne2 {
  font-size : 12px;
  font-family : Verdana, arial, helvetica, sans-serif;
  color : #333333;
  background-color : #cccccc;
}
 
/* Style 1 des cellules (centré) */
.table-ligne1-centre {
  font-size : 12px;
   font-family : Verdana, arial, helvetica, sans-serif;
  color : #333333;
  text-align : center;
  background-color : #c6c3bd;
}
 
/* Style 2 des cellules (centré) */
.table-ligne2-centre {
  font-size : 12px;
  font-family : Verdana, arial, helvetica, sans-serif;
  color : #333333;
  text-align : center;
  background-color : #cccccc;
}
 
/* Style 1 des cellules (droite) */
.table-ligne1-droit {
  font-size : 12px;
  font-family : Verdana, arial, helvetica, sans-serif;
  color : #333333;
  text-align : right;
  background-color : #c6c3bd;
}
 
/* Style 2 des cellules (droite) */
.table-ligne2-droit {
  font-size : 12px;
  font-family : Verdana, arial, helvetica, sans-serif;
  color : #333333;
  text-align : right;
  background-color : #cccccc;
}

code du tableau :

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
<table id="grilleSaisie" width="10%" border="0" cellspacing="1" cellpadding="2">
<tr><td class="table-titre" colspan="4">Saisie des écritures</td></tr>
<tr>
  <td width="10" class="table-entete">Compte</td>
  <td width="10" class="table-entete">Pdt / Affect</td>
  <td width="10" class="table-entete">Nature</td>
  <td width="10" class="table-entete">Débit</td>
  <td width="10" class="table-entete">Crédit</td>
  <td width="10" class="table-entete">TVA</td>
  <td width="10" class="table-entete">Mtt TVA</td>
  <td width="10" class="table-entete">Quantité</td>
  <td width="10" class="table-entete-droit">Nombre</td>
</tr>
 
<tr><td width="10"  class="table-ligne"><input type="text" id="compte"></td>
														  <td width="10"  class="table-ligne"><input type="text" id="produit"></td>
														  <td width="10"  class="table-ligne"><input type="text" id="nature"></td>
														  <td width="10"  class="table-ligne"><input type="text" id="debit"></td>
														  <td width="10"  class="table-ligne"><input type="text" id="gredit"></td>
														  <td width="10"  class="table-ligne"><input type="text" id="tva"></td>
														  <td width="10"  class="table-ligne"><input type="text" id="mttTVA"></td></tr>
														  <td width="10"  class="table-ligne"><input type="text" id="quantite"></td>
														  <td width="10"  class="table-ligne"><input type="text" id="nombre"></td></tr>
 
</table>

**Macmillenium** · 19/05/2009, 09h12

Bonjour,

Il suffit de renseigner un width:100% aux inputs.

**sibile** · 26/05/2009, 01h21

On ne peut plus utiliser de tels tableaux, ce n' est vraiment plus possible selon les normes w3c.
Puisque tu maîtrises les css alors il faut créer ta table avec des divs.

**Poulpynette** · 26/05/2009, 09h39

Envoyé par sibile

On ne peut plus utiliser de tels tableaux, ce n' est vraiment plus possible selon les normes w3c.
Puisque tu maîtrises les css alors il faut créer ta table avec des divs.

Certes sibile, mais on ne peut pas non plus imposer les normes w3c. Seulement suggérer fortement

En revanche munos46, tant qu'à coder avec des tables, autant le faire correctement : attention à mettre le même nombre de cellules dans chaque ligne de ta table !!!

**Macmillenium** · 26/05/2009, 12h14

Hello,

Envoyé par Poulpynette

attention à mettre le même nombre de cellules dans chaque ligne de ta table !!!

Pas avec un colspan

**Poulpynette** · 26/05/2009, 14h00

Envoyé par Macmillenium

Hello,

Pas avec un colspan

La première ligne a un colspan de 4, les autres lignes ont 9 cellules

**Macmillenium** · 26/05/2009, 14h20

Envoyé par Poulpynette

La première ligne a un colspan de 4, les autres lignes ont 9 cellules

Même sans colspan, les <td> ont déjà une largeur fixe, cela ne pose donc aucun problème de rendu (ni de sémantique).
Ensuite, le nombre de colpsan c'est à définir selon les besoins.

**Poulpynette** · 26/05/2009, 14h38

Je sais que cela ne posera pas de problème à l'affichage.

Mais il me semble qu'il est cependant important lorsqu'on construit une table de faire bien attention à mettre un nombre de ligne et de cellule cohérent.

http://cyberzoide.developpez.com/html/table.php3

Attention ! il faut donc mettre un même nombre de colonnes dans chaque ligne.

**Macmillenium** · 26/05/2009, 20h11

Envoyé par Poulpynette

Je sais que cela ne posera pas de problème à l'affichage.

Ni sémantique, ce qui est admis au final.

Envoyé par Poulpynette

Mais il me semble qu'il est cependant important lorsqu'on construit une table de faire bien attention à mettre un nombre de ligne et de cellule cohérent.

http://cyberzoide.developpez.com/html/table.php3

Faire attention oui, mais tout dépend du contexte d'utilisation, un développeur ne va pas mettre 10 colonnes alors qu'il a uniquement besoin de 5 dans une 1ere ligne et 3 dans une 2éme, tout en gardant les mêmes largeurs.
Ceci dit, le point auquel tu t'es référée ne peut être considéré comme étant un argument valide

**Poulpynette** · 27/05/2009, 09h28

Bonjour Macmillenium,

Je m'excuse mais je ne comprends pas bien où tu veux en venir.

Envoyé par Macmillenium

Faire attention oui, mais tout dépend du contexte d'utilisation, un développeur ne va pas mettre 10 colonnes alors qu'il a uniquement besoin de 5 dans une 1ere ligne et 3 dans une 2éme, tout en gardant les mêmes largeurs.

Il en mettra 5 selon ton exemple, non ?

Envoyé par Macmillenium

Ceci dit, le point auquel tu t'es référée ne peut être considéré comme étant un argument valide

Peux-tu m'expliquer pourquoi ?

Merci

**Macmillenium** · 27/05/2009, 09h36

Ok je reprends

Envoyé par Poulpynette

En revanche munos46, tant qu'à coder avec des tables, autant le faire correctement : attention à mettre le même nombre de cellules dans chaque ligne de ta table !!!

Structure horizontale :

Code xhtml :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
 
<style type="text/css">
table, table td, table th { 
        border:1px solid blue;
}
 
table td, table th { 
        width:500px;
}
</style>
</head>
 
<body>
 
	<table>
		<thead>
			<tr>
				<th colspan="4">Grand titre 1</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>Petit Titre</th>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
			</tr>			
			<tr>
				<th>Petit Titre</th>
				<td>Text</td>
				<td>Text</td>
			</tr>
			<tr>
				<th>Petit Titre</th>
				<td colspan="2">Text</td>
			</tr>	
			<tr>
				<th>Petit Titre</th>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
			</tr>	
			<tr>
				<th>Petit Titre</th>
				<td colspan="3">Text</td>
			</tr>				
		</tbody>
	</table>
 
</body>
 
</html>

Structure verticale :

Code xhtml :

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
65
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
 
<style type="text/css">
table, table td, table th { 
        border:1px solid blue;
}
 
table td, table th { 
        width:500px;
}
</style>
</head>
 
<body>
 
	<table>
		<thead>
			<tr>
				<th colspan="4">Grand titre 1</th>		
			</tr>
			<tr>
				<th colspan="2">Grand titre 2</th>
				<th colspan="2">Grand titre 2</th>		
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
			</tr>			
			<tr>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
			</tr>		
			<tr>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
			</tr>			
			<tr>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
			</tr>		
			<tr>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
			</tr>				
		</tbody>
	</table>
 
</body>
 
</html>

Dans ces deux exemples je n'ai pas l'obligation de mettre le même nombre de cellules, d'où mon :

Envoyé par Macmillenium

Ensuite, le nombre de colpsan c'est à définir selon les besoins.

La raison pour laquelle :

Envoyé par Macmillenium

le point auquel tu t'es référée ne peut être considéré comme étant un argument valide

**Poulpynette** · 27/05/2009, 09h57

Ok. Merci pour tes explications.

Je pensais que même si "on n'était pas obligés", on devait quand même respecter un nombre équivalent de cellules dans toutes les lignes (surtout qu'avec le colspan, c'est facile à faire).

Ça me paraissait même évident.

Je me suis trompée.
Ceci étant, je continuerai de respecter le même nombre de cellules dans chaque ligne, par souci de cohérence. Sinon j'aurais l'impression d'avoir une structure 'bancale'.

input dans un tableau

Tableau en CSS

Discussions similaires

Partager

Partager