Tableau et css

Version imprimable

31/05/2006, 13h17
exorus

Tableau et css

Bonjour à tous,

J'espere que vous allez pouvoir m'aider.

Je cherche une solution pour pouvoir afficher des données dans un tableau comme celui ci:
http://mediaplan.ovh.net/~exadys/lisa/tab.jpg

l'image en plus grand ici : http://mediaplan.ovh.net/~exadys/lisa/tab.jpg

Mais aucune solution me viens à l'esprit, soit les données sont pas aligné en colone correctement, soit j'ai pas l'espace entre les deux bordures...

Serais ce impossible?

SVP, j'ai besoin de vous alors si vous connaissez la réponse, ...
Merci bcp & Bonne journée à vous
31/05/2006, 14h20
10-nice

:salut:

très faisable ton tableau, ou plutot, tes tableaux :)

La solution à ton problème est toute simple, plutot que de vouloir faire un seul tableau tu en fait un pour chaque voiture. C'est d'autant plus facile si tu passe par une base de données, une boucle te permet de créer à chaque fois un tableau contenant toutes les informations du véhicule.
31/05/2006, 14h40
exorus

Merci de ta réponse ca fait tjs plaisir de voir des gens qui prennent du temps pour te répondre.

En faite non, ce tableau a l'air tout con mais il ne l'est pas.... enfin moi je viens de découvrir que c'etait pas facile... lol

Si je fais ta solution le pb viendra que chaque données seront pas organisé correctment, voici une image ca sera plus simple::mouarf:

http://mediaplan.ovh.net/~exadys/lisa/tab2.jpg
31/05/2006, 14h46
psychoBob

Pourquoi tu donnes pas une largeur fixe à chacune des cases de ton tableau ?

Elles se déformeront en hauteur mais auront toutes la même largeur, tableau après tableau.
31/05/2006, 14h53
1tsiMat

Oui fixe la largeur de tes cases comme ca tu verras tout sera bien aligné ;)
Fixe aussi la hauteur de ton tableau pour éviter que certains tableaux soient plus grand que les autres du fait des différentes tailles des photos ;)
31/05/2006, 14h58
exorus

Lol j'ai failli y croire et te gratifier du titre de génie mais non, apres quelques test ca fonctionne pas quand par exemple une des données est plus grande que la largeur.

Je suis en dynamique, en php, ac BDD MySQL.

Car les largeurs que l'on donne le tableaux les interprete comme une largeur minimum et quand le texte est plus grand et bien il ecarte les colone.
31/05/2006, 15h01
1tsiMat
??? Si t'as fixé
Code:

1 2 3 4 5 6 7 8 <table> <tr> <td width="80"> (largeur en pixel) Le résultat de ta requete </td> </tr> </table>
normalement y pas de soucis ca fait une largeur fixe 8O

edit :

Fixe peut-être une hauteur assez grande pour pouvoir gérer plusieurs lignes?

Voila ce que ca peut donner:

http://mediaplan.ovh.net/~exadys/lisa/tab3.jpg

Donc c'est pas encore ca. et encore je parle meme pas de IE qui me fait encore pire.

voici le 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
39
40
echo "<table border=\"1\" id=\"box_result1\"><tr>
						<td width=\"50px\">A</td>
						<td width=\"50px\">A</td>
						<td width=\"200px\">M</td>
						<td width=\"50px\">P</td>
						<td width=\"50px\">M</td>
						<td width=\"50px\">K</td>
						<td width=\"50px\">D</td>
						</tr></table>";
						echo "<table border=\"1\" id=\"box_result1\"><tr>
						<td width=\"50px\">photos1</td>
						<td width=\"50px\">1985</td>
						<td width=\"200px\">une petite description pas aussi grosse que les autres</td>
						<td width=\"50px\">15</td>
						<td width=\"50px\">42</td>
						<td width=\"50px\">23</td>
						<td width=\"50px\">4</td>
						</tr></table>";
 
				while ($db = mysql_fetch_array($requete) )
				{
					echo "<table border=\"1\" id=\"box_result1\"><tr>
					<td width=\"50px\">";
					if (file_exists("img/photos/".$db['v_id']."-1.jpg")){
						echo '			<img src="img/photos/',$db['v_id'],'-1.jpg"/>';
					}
					else {
						echo '			<img src="img/photos/defaut.gif"/>';
					}
					echo '</td>
							<td width=\"50px\">',substr($db['v_mise_en_circulation'],0,4),'</td>
							<td width=\"200px\"> l hrelkre kljghrekjghrehg qelkhg qlkjhgkjre hg kjqhrkjgqhrekjgh qrkjhgkjrehqkjghreqkjghqekjrhgkjrheqkjgjkhrklqjfhre kjgheqrkjg qlerkjg eqrkjlg',$db['v_marque'],$db['v_modele'],$db['v_version'],'</td>
							<td width=\"50px\">',$db['vl_paiement_mensuel_actuel'],'</td>
							<td width=\"50px\">',$db['vl_mois_restant'],'</td>
							<td width=\"50px\">',$db['vl_tt_km_autorise'],'</td>
							<td width=\"50px\">',$db['u_cp'],'</td>';
 
					echo "</tr></table>";
 
				}

et le css :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
table#box_result1 /* Le tableau en lui-même */
{
   border-collapse: collapse; /* Colle les bordures entre elles */
   border: 1px dashed #c0c0c0; 
   margin-bottom: 6px;
 
}
 
 
table#box_result1 td /* Les cellules normales */
{
   font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
   font-size: 12px;
   color: #000000; 
   height: 100px;
}
 
table#box_result1 td img
{
	border: 1px solid #eaeaea;
	width: 50px;
}

31/05/2006, 15h20
1tsiMat

Citation:

Envoyé par exorus

while ($db = mysql_fetch_array($requete) )
{
echo "<table border=\"1\" id=\"box_result1\"><tr>
<td width=\"50px\">";
if (file_exists("img/photos/".$db['v_id']."-1.jpg")){
echo ' <img src="img/photos/',$db['v_id'],'-1.jpg"/>';
}
else {
echo ' <img src="img/photos/defaut.gif"/>';
}
echo '</td>
<td width=\"50px\">',substr($db['v_mise_en_circulation'],0,4),'</td>
<td width=\"200px\"> l hrelkre kljghrekjghrehg qelkhg qlkjhgkjre hg kjqhrkjgqhrekjgh qrkjhgkjrehqkjghreqkjghqekjrhgkjrheqkjgjkhrklqjfhre kjgheqrkjg qlerkjg eqrkjlg',$db['v_marque'],$db['v_modele'],$db['v_version'],'</td>
<td width=\"50px\">',$db['vl_paiement_mensuel_actuel'],'</td>
<td width=\"50px\">',$db['vl_mois_restant'],'</td>
<td width=\"50px\">',$db['vl_tt_km_autorise'],'</td>
<td width=\"50px\">',$db['u_cp'],'</td>';

echo "</tr></table>";

}[/CODE]

Beaucoup de charabia lol mais bon t'as raison de test, si y a un bavard ;)
Fixe la largeur de ton tableau et ton problème en sera je pense réglé
31/05/2006, 15h26
exorus

oui je test on c jamais .. lol

Et bien non j'ai bo fixer la largeur du tableau il continue a modifier la largeur de la case si le contenu est plus important. Il rogne sur les autres qui ont plus de place

Je presume donc que cette affichage est impossible
31/05/2006, 15h35
1tsiMat

Bah c'est possible mais faut trouver le p'tit truc qui fait que php nous fait un caca ;)
31/05/2006, 15h37
exorus

a mon avis c'est pas php mais belle et bien HTML et CSS, les tableaux sont con et s'adapte au contenu, qd on veut donc afficher plusieurs données il faut impérativement qu'elle soit tous dans le meme tableau et donc la plus question d'avoir des cadres.

Même si c'est un peu inutile ... tes tableaux dans un tableau avec les <td> limité???

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
 
<table>
   <tr>
      <td>
         <table>
            <tr>
               <td>
                  <img ...>
               </td>
               <td>
                  donnée1
               </td>
            </tr>
         </table>
      </td>
   </tr>
   <tr>
      <td>
         <table>
            <tr>
               <td>
                  <img ...>
               </td>
               <td>
                  donnée1
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>

edit :
un tableau par case pour bien le délimiter ce tableau :lol:

31/05/2006, 16h15
10-nice

:salut:

tiens j'ai eu le même soucis je crois, j'ai pas tout compris et la solution me prait loin d'être la meilleure mais j'ai mis mon texte dans un bloc <div> dans les cellules avec beaucoup de texte, en fixant la largeur de ce dernier, plus de soucis ...
31/05/2006, 16h40
exorus

merci icimat mais bon la solution de barbar koi !! :lol: On va se contenter d'un affichage tout simple ... car sinon c'est surchargé le code pour pas grand chose.

Je vais tester ta solution 10-nice, en esperant que ca fonctionne.
31/05/2006, 16h43
1tsiMat

J'avais prévenu que c'était inutile :lol: en espérant que tu trouves la solution :D

Finallement meme pas eu besoin de tester ta solution qui me semblait correct mais un peu lourde...

Voici donc une solution avec seulement des tableaux:

Le fichier php qui va chercher les donés a afficher:

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
echo "<table><tr>
<td class=\"gauche\">Photo</td>
<td class=\"milieu\">Annee</td>
<td class=\"milieu\">Modele version marque</td>
<td class=\"milieu\">Prix</td>
<td class=\"milieu\">Mois restant</td>
<td class=\"milieu\">Km par mois</td>
<td class=\"droite\">Departement</td>
</tr>
";
 
while ($db = mysql_fetch_array($requete) )
{
echo "<tr>
<td class=\"gauche\">";
if (file_exists("img/photos/".$db['v_id']."-1.jpg")){
echo ' <img width=\"50px\" src="img/photos/',$db['v_id'],'-1.jpg"/>';
}
else {
echo ' <img width=\"50px\" src="img/photos/defaut.gif"/>';
}
echo '</td>
<td class="milieu">',substr($db['v_mise_en_circulation'],0,4),'</td>
<td class="milieu"> l hrelkre kljghrekjghrehg qelkhg qlkjhgkjre hg kjqhrkjgqhrekjgh qrkjhgkjrehqkjghreqkjghqekjrhgkjrheqkjgjkhrklqjfhre kjgheqrkjg qlerkjg eqrkjlg',$db['v_marque'],$db['v_modele'],$db['v_version'],'</td>
<td class="milieu">',$db['vl_paiement_mensuel_actuel'],'</td>
<td class="milieu">',$db['vl_mois_restant'],'</td>
<td class="milieu">',$db['vl_tt_km_autorise'],'</td>
<td class="droite">',$db['u_cp'],'</td>';
 
echo "</tr>";
 
}
echo '</table>';

Et enfin le fichier css, qui va avec:

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
td .gauche{
margin-top:5px;
margin-bottom:5px;
margin-left: 5px;
border-top: 1px dashed #c0c0c0;
border-bottom: 1px dashed #c0c0c0;
border-left: 1px dashed #c0c0c0;
}
 
td .milieu{
margin-top:5px;
margin-bottom:5px;
border-top: 1px dashed #c0c0c0;
border-bottom: 1px dashed #c0c0c0;
}
 
td .droite{
margin-top:5px;
margin-bottom:5px;
margin-right: 5px;
border-top: 1px dashed #c0c0c0;
border-bottom: 1px dashed #c0c0c0;
border-right: 1px dashed #c0c0c0;
}

31/05/2006, 17h55
1tsiMat

Ben voilà, suffisait d'y penser!!! Bon allé je me replonge dans mes problèmes sur Access :mouarf:
31/05/2006, 18h57
exorus

Ouep, allez bonne chance à toi

Et merci pour les cours et tutoriels CSS et la FAQ CSS, merci au forum CSS !