Remplir un tableau HTML avec les même données sur plusieurs colonnes
Quand on affiche des données provenant d’un array ou d’une BDD dans un tableau html généralement chaque donnée à une place bien précise ce qui est très simple à faire.
Par exemple le pseudo sera toujours dans la même colonne, l’âge dans la colonne suivante… et on affiche tout avec une boucle.
Mais comment faire pour remplir un tableau html ou par exemple on à une seule et même donnée sur plusieurs colonnes et un nombre infini de lignes ? Afficher des données de cette manière peut être assez pratique, mais encore faut-il savoir comment faire^^.
Voiçi un Exemple
Pour cet exemple on va afficher cet array de 10 lignes sur 3 colonnes. Donc combien de ligne va t’on avoir dans notre tableau html ? Vous avez une heure^^.
$donnees = array( array( 'titre' => 'Titre N°1', 'texte' => 'élément du tableau N°1', ), array( 'titre' => 'Titre N°2', 'texte' => 'élément du tableau N°2', ), array( 'titre' => 'Titre N°3', 'texte' => 'élément du tableau N°3', ), array( 'titre' => 'Titre N°4', 'texte' => 'élément du tableau N°4', ), array( 'titre' => 'Titre N°5', 'texte' => 'élément du tableau N°5', ), array( 'titre' => 'Titre N°6', 'texte' => 'élément du tableau N°6', ), array( 'titre' => 'Titre N°7', 'texte' => 'élément du tableau N°7', ), array( 'titre' => 'Titre N°8', 'texte' => 'élément du tableau N°8', ), array( 'titre' => 'Titre N°9', 'texte' => 'élément du tableau N°9', ), array( 'titre' => 'Titre N°10', 'texte' => 'élément du tableau N°10', ) );
Notre tableau fera donc 3 colonnes sur 4 lignes.
Pour calculer le nombre de lignes dont on va avoir besoin, on doit faire une simple division qui est le nombre d’éléments dans notre tableau HTML par le nombre de colonnes:
$nombre_colonne = 3; $nombre_ligne = count($donnees)/$nombre_colonne;
Mais il arrive qu’on est pas un nombre correct dans la mesure que l’ont peut avoir un nombre a virgule qui est: 3.3333333333333. Il va donc nous manquer le dernier élément de notre array et nous on veut l’afficher!!!
On va donc arrondir notre résultat avec la fonction php ceil:
$nombre_colonne = 3; $nombre_ligne = ceil(count($donnees)/$nombre_colonne);
On obtient maintenant: 4, ce qui va nous rajouter une ligne supplémentaire pour qu’on puisse afficher le dernier élément, on va donc avoir: deux cases vides dans le tableau.
C’est parfait.
Voila le code final:
<?php $nombre_colonne = 3; $nombre_ligne = ceil(count($donnees)/$nombre_colonne); ?> <table> <tr> <td class="table-center" colspan="<?=$nombre_colonne;?>"> Nombre d'éléments: <?=count($donnees);?> | nombre_ligne: <?=$nombre_ligne;?> | nombre_colonne: <?=$nombre_colonne;?> </td> </tr> <?php $i_count = 0; // Sert à afficher les données de notre array. Après chaque affichage, on l'augmente de 1 pour afficher l'élément suivant for ($i_ligne=1; $i_ligne<=$nombre_ligne; $i_ligne++) // Pour chaque ligne du tableau { ?> <tr class=""> <?php for ($i_colonne=1; $i_colonne<=$nombre_colonne; $i_colonne++) // Pour chaque colonne de ligne { ?> <td class="<?=($i_ligne%2) ? 'table-4eph' : '';?> table-center"> <?php if(!empty($donnees[$i_count])) // Si l'élément existe, car un élément du tableau peut être vide comme dans l'exemple. { echo 'Ligne '. $i_ligne .', colonne '. $i_colonne.'<br>'; echo 'Donnée: '.$donnees[$i_count]; } else { } ?> </td> <?php $i_count++; // On augmente de 1 } ?> </tr> <?php } ?> </table>
Tous les codes sont testés et sont fonctionnels, si il arrive qu'un de ces codes ne fonctionne pas chez vous, merci de me le signaler.