Afficher un tableau au nombre aléatoire d"éléments

Version imprimable

Bonjour,
Je souhaite afficher un tableau dans lequel chaque item possède 3 éléments:
Code:

1 2 3 4 5 6 7 <table id="tableau"> <tr id="ligne_00"> <td><img . . . /></td>  <td><text> . . . </text></td>  <td><img . . ./></td>  </tr> </table>
Je peux avoir de 1 à 100 items.

Je dois afficher chaque item sous une forme linéaire: Image / Texte / Image

? Peut-on me confirmer que c'est bien avec JavaScript que je vais construire dynamiquement la suite de mon tableau en HTML et ma CSS pour l'affichage de mes x lignes dont je ne connais pas le nombre.

D'avance, merci.

28/12/2017, 15h00
Michel

Pourquoi pas mais la question est trop vague !
d’où proviennent les images et les texte ?
cette page est-elle crée à partir d’une base de données côté serveur ?
28/12/2017, 15h21
Trebor_

Les données Images sont référencées dans la base de données mais sont physiquement dans un fichier côté serveur,
le Texte est dans la base de données.

Cette page est créée à partir des données ci-dessus.
28/12/2017, 15h30
jisig

Tu peux générer ton tableau html dynamiquement avec un langage côté serveur (php, python, ...)
ou les envoyer dans un format tel que json ou autres et le construire en javascript
28/12/2017, 15h32
Invité
Bonjour,

Tu as forcément un langage dynamique pour communiquer avec la base de données.
Certainement PHP, non ?

C'est donc en PHP que tu peux construire la <table> à partir des données issues de la base de données.
- Affichage de données dans un tableau HTML
28/12/2017, 15h53
Trebor_

1 pièce(s) jointe(s)

Bien sûr, je sais construire dynamiquement mon tableau en PHP avec ma base de données;

mais ensuite, comment faire un affichage régulier ligne par ligne à l'écran

Je vous joins un exemple:
Pièce jointe 337969
28/12/2017, 16h20
Trebor_

P.S.: Le texte peut avoir de 1 à 6 ligne et il chaque ligne doit être centrée; et le texte global centré par rapport aux images.
28/12/2017, 16h33
Invité
Ça, c'est juste un style CSS.
Code:

1 2 text-align:center; vertical-align:middle;
28/12/2017, 17h11
Trebor_

O.K. ça, je sais,

? Mais comment répéter n lignes sans en connaître exactement le nombre.

c'est un tuto qu'il faudrait :roll:

-> requête db tu obtiens tes résultats tu les tapes dans un array.
-> tu fais un foreach dessus
-> et tu fais un echo dans chaque 'tr' de ton tableau :o.

après tu fais ça en poo ? avec un framework ? ...

un 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
27
28
29
 <?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
 
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
 
$sql = "SELECT id, firstname, lastname FROM MyGuests";
$result = $conn->query($sql);
 
if ($result->num_rows > 0) {
    echo "<table>";
    // output data of each row
    while($row = $result->fetch_assoc()) {
        //ici tu remplaces par tes tr 
        echo "id: " . $row["id"]. " - Name: " . $row["firstname"]. " " . $row["lastname"]. "<br>";
    }
    echo "</table>";
} else {
    echo "0 results";
}
$conn->close();
?>

28/12/2017, 17h32
Invité

Citation:

Envoyé par Trebor_

Bien sûr, je sais construire dynamiquement mon tableau en PHP avec ma base de données;

Citation:

Envoyé par Trebor_

Mais comment répéter n lignes sans en connaître exactement le nombre.

alors ?? Tu SAIS, ou tu NE SAIS PAS ?? :weird:

Tes questions sont très... confuses.

Montres-nous le script qui génère ton tableau via PHP.
28/12/2017, 18h22
Trebor_

Je n'ai pas encore commencé à écrire ma page HTML, simplement, j'y réfléchi avant de me lancer la tête la première.

Le sujet, c'est la cohérence entre HTML et CSS.

? Comment écrire une CSS qui soit en harmonie avec HTML, étant donné que je vais afficher un nombre d'items aléatoire dont je ne connais pas, chaque fois, le nombre exact.

Je fais, exemple, une CSS pour 10 items et au final, je dois en afficher 15.

? Comment insérer ces descriptions CSS correspondant aux 5 lignes supplémentaires.

? Par Javascript.
28/12/2017, 18h45
Invité
:cfou:

Quelle différence cela fera d'avoir 10, 15, 50 ou 100 lignes ?
Il sera juste plus long...
- Lis des cours de HTML, CSS,
- recherche des tutos sur les tableaux (x)HTML,
- fais des exercices simples,...
29/12/2017, 03h30
Trebor_

! C'est bon.
Je commence mon projet et ne manquerai par de revenir si nécessaire.
31/12/2017, 07h27
Trebor_

1 pièce(s) jointe(s)

Afficher les informations d'une Base De Données

Bonjour,
Je souhaiterais savoir si c'est bien sous la forme d'un tableau ( dynamique ) que je peux constituer et afficher ma Base de Données.
Exemple:
Pièce jointe 338419
Au départ, je ne connais jamais le nombre d'items qu'il va y avoir.

Merci de vos conseils
31/12/2017, 10h04
Invité
Bonjour,

Tu as le choix :
- continuer à te poser des questions existentielles
- ou (enfin !!!) passer à la pratique
N'aies pas peur de faire des erreurs.
C'est AUSSI comme ça qu'on progresse.

Et le nombre d'items n'influe pas sur l'affichage.

Mon problème se complique:
Suivant la nature des enregistrements de la BD ( au nombre de 2 au moins ), je vais avoir soit la présentation Tableau_1 soit la présentation Tableau_2, c'est-à-dire qu'en partie droite je vais avoir soit un texte de 6 lignes soit une image
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 <table id="Tableau_1"> <tr id="Ligne0"> <td colspan=3>Titre</td> <td></td> </tr> <tr id="Ligne1"> <td rowspan=6>Image_1</td> <td >Texte_01</td> </tr> <tr id="Ligne2"> <td>Texte_02</td> </tr> <tr id="Ligne3"> <td>Texte_03</td> </tr> <tr id="Ligne4"> <td>Texte_04</td> </tr> <tr id="Ligne5"> <td>Texte_05</td> </tr> <tr id="Ligne6"> <td>Texte_06</td> </tr> </table> <table id="Tableau_2"> <tr id="Ligne0"> <td >Titre</td> <td></td> </tr> <tr id="Ligne1"> <td >Image_1</td> <td >Image_2</td> </tr> </table>
? Est-il possible de ne décrire qu'un seul tableau pour les deux cas.

30/01/2018, 17h48
popo
jreaux62,
Je crois que ce qui l'embête c'est la valeur à mettre dans le rowspan.
Car si j'ai bien compris, il peut y avoir 1 image avec 6 lignes de texte, puis 1 image avec trois lignes de texte, etc.

Si c'est bien le cas, je suppose que tu récupères les images et pour chaque image tu récupère les textes.
Ou alors tu as tout d'un coup et tu as structure interne en arbre.
Comment arrive tes données ?

Suivant le cas, tu peux certainement connaître le nombre de lignes à afficher à coté de l'image et placer le bon rowspan.
Sinon, tu peux toujours abandonner le tableau et jouer avec des div.
Code:

1 2 3 4 5 6 7 8 9 <div id="row1"> <div><img /></div> <div> <div>Texte</div> <div>Texte</div> <div>Texte</div> <div>Texte</div> </div> </div>
02/02/2018, 09h22
Trebor_

Résolu par une boucle en php