Alignement des éléments d'un tableau

Version imprimable

1 pièce(s) jointe(s)

Bonjour,

Je suis en train de creer un site internet et je souhaite afficher les elements de ma base de données sous forme de tableau.
Voici 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
39
40
41
42
43
44
45
46
47
48
<?php
			try
 
            {
 
            // On se connecte à MySQL
 
            $bdd = new PDO('mysql:host=localhost;dbname=alcool_pas_cher;charset=utf8', 'root', '');
			}
 
            catch(Exception $e)
 
            {
 
            // En cas d'erreur, on affiche un message et on arrête tout
 
            die('Erreur : '.$e->getMessage());
 
            }
            // On récupère tout le contenu de la table whisky
            $reponse = $bdd->query('SELECT * FROM spiritieux');
 
			?>
 
			<table>
 
 
			<?php
			//On affiche les lignes du tableau une à une à l'aide d'une boucle
            while ($donnees = $reponse->fetch())
            {
            ?>
 
 
 
					<td>
					<tr><img src="<?php echo $donnees['Photo']; ?>" alt="image" /></tr>
					<tr><?php echo $donnees['nom']; ?></tr>
					</td>
 
 
 
 
            <?php
            } //fin de la boucle, le tableau contient toute la BDD
            $reponse->closeCursor(); // Termine le traitement de la requête
            ?>
            </table>

J'obtiens les elements du tableau mais ma Photo et mon nom n'ont pas le meme alignement(voir pièce jointe)
Pièce jointe 402809

09/08/2018, 18h45
Invité
Bonjour,

c'est un problème d'affichage, donc certainement de style CSS.
Pas de PHP.

Je te redirige vers le forum CSS.

Par contre, il faut que tu montres :
- le code HTML généré ("Ctrl" + "U") de la <table> créee
- le code CSS concerné
N.B. "A consommer avec modération". :P
(ou "avec un modérateur")

Voici le code html de la table:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table>
 
 
 
 
 
					<td>
					<tr><img src="images/old_nick_40_70_cl.jpg" alt="image" /></tr>
					<tr><div>OLD NICK 40° 70 CL </div></tr>
					</td>
 
 
 
 
 </table>

et le code CSS concerné:

Code:

1
2
3
4
5
6
7
table.div
 
{
	margin: auto;
    text-align: center;
 
}

Bonjour,

1- il faut apprendre la structure des <tables> HTML : Les tableaux (XHTML & CSS)

2- à lire aussi : Affichage de données dans un tableau HTML

3- alignement : supprime le <div>, ajoute les <td> manquants, et mets :
Code:

1 2 3 4 <tr> <td><img src="images/old_nick_40_70_cl.jpg" alt="image" /></td> <td>OLD NICK 40° 70 CL </td> </tr>
et en CSS :
Code:

1 2 3 4 table td { text-align:center; /* centrage horizontal */ vertical-align:middle; /* centrage vertical*/ }

10/08/2018, 14h01
aurelien.moutymbo

Bonjour jreaux62,

Le problème c'est que je souhaite afficher le nom en dessous de l'image.
Tandis que ta méthode affiche le nom à droite de l'image.

Merci d'avance de ta disponibilité.
10/08/2018, 14h46
Invité
Alors, il faut écrire :
Code:

1 2 3 4 5 6 7 <tr> <td> <img src="images/old_nick_40_70_cl.jpg" alt="image" /> <br /> OLD NICK 40° 70 CL </td> </tr>
avec :

Code:

table td { text-align:center; }

Cela dit : les <table> ne servent pas à la mise en page.
A moins d'afficher des données tabulaires, ce qui semble être le cas.

Si tu veux en mettre sur plusieurs par lignes / colonnes : regarde mon tuto ( = lien fourni précédemment).

Bonjour jreaux62,

Le code que tu m'as donné fonctionne avec un seul élément dans ma base de données.
Mais quand j'ai plusieurs éléments, les éléments s'affichent de la manière suivante:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
image
OLD NICK 40° 70 CL
 
7,18 € HT
image
POLIAKOV / SOBIESKI 37.5° 70 CL
 
8,12 € HT
image
SAINT JAMES 40° 70 CL
 
8,09 € HT

Le code html est le suivant:

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
<table>
 
 
 
 
                    <tr>
                    <td>
 
					<img src="images/old_nick_40_70_cl.jpg" alt="image" />
					<br/>
					OLD NICK 40° 70 CL 					<br/>
					<br/>
					<strong>7,18 € HT</strong>
 
					</td>
					</tr>
 
 
 
 
 
 
                    <tr>
                    <td>
 
					<img src="images/poliakov_sobieski_375_70_cl.jpg" alt="image" />
					<br/>
					POLIAKOV / SOBIESKI 37.5° 70 CL 					<br/>
					<br/>
					<strong>8,12 € HT</strong>
 
					</td>
					</tr>
 
 
 
 
 
 
                    <tr>
                    <td>
 
					<img src="images/saint_james_40_70_cl.jpg" alt="image" />
					<br/>
					SAINT JAMES 40° 70 CL 					<br/>
					<br/>
					<strong>8,09 € HT</strong>
 
					</td>
					</tr>
 
 
 
 
                        </table>

J'ai regardé le tuto mais j'ai du mal.

11/08/2018, 13h57
Invité
Bonjour,
- IV. Affichage "en ligne" avec Base de Données
Pour la mise en forme (style), regarde les cours CSS.

D'ailleurs, je t'invite aussi à lire les cours sur le HTML.
Tu sembles ne pas maitriser les bases...