Affichage en tableau : afficher des données dans un tableau
Posez votre questionAffichage en tableau : afficher des données dans un tableau
- Description
- Tables simples
- Affichage "en ligne" avec array()
- Affichage "en ligne" avec base de données
- Affichage "en Colonne"
- Astuce
Description
Création d'un tableau "à la volée" pour afficher ses données, provenant d'un array() ou d'une base de données.
Affichage "en ligne" ou "en colonne".
Tables simples
Structure d'un tableau (table)
<table>
<tr>
<td>ligne1 colonne1</td>
<td>ligne1 colonne2</td>
<td>ligne1 colonne3</td>
<td>ligne1 colonne4</td>
</tr>
<tr>
<td>ligne2 colonne1</td>
<td>ligne2 colonne2</td>
<td>ligne2 colonne3</td>
<td>ligne2 colonne4</td>
</tr>
...
</table>
affiche :
| ligne1 colonne1 | ligne1 colonne2 | ligne1 colonne3 | ligne1 colonne4 |
| ligne2 colonne1 | ligne2 colonne2 | ligne2 colonne3 | ligne2 colonne4 |
| ... |
Tableau de NbrCol colonnes par NbrLigne lignes
<html><body>
<?php
// $NbrCol : le nombre de colonnes
// $NbrLigne : le nombre de lignes
// -------------------------------------------------------
echo '<table>';
for ($i=1; $i<=$NbrLigne; $i++) {
echo '<tr>';
for ($j=1; $j<=$NbrCol; $j++) {
echo '<td>';
// ------------------------------------------
// AFFICHAGE ligne $i, colonne $j
echo $affichage;
// ------------------------------------------
echo '</td>';
}
echo '</tr>';
$j=1;
}
echo '</table>';
?>
</body></html>
Table de multiplication :
exemple amélioré
| i X j | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 1 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 2 | 2 | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 18 |
| 3 | 3 | 6 | 9 | 12 | 15 | 18 | 21 | 24 | 27 |
| 4 | 4 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 |
| 5 | 5 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 |
| 6 | 6 | 12 | 18 | 24 | 30 | 36 | 42 | 48 | 54 |
| 7 | 7 | 14 | 21 | 28 | 35 | 42 | 49 | 56 | 63 |
| 8 | 8 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 |
| 9 | 9 | 18 | 27 | 36 | 45 | 54 | 63 | 72 | 81 |
<html><body>
<?php
// $NbrCol : le nombre de colonnes
// $NbrLigne : le nombre de lignes
$NbrCol = 9;
$NbrLigne = 9;
// --------------------------------------------------------
// on affiche en plus sur les 1ere ligne et 1ere colonne
// les valeurs a multiplier (dans des cases en couleur)
// le tableau fera donc 10 x 10
// --------------------------------------------------------
echo '<table border="1" width="400">';
// 1ere ligne (ligne 0)
echo '<tr>';
echo '<td bgcolor="#CCCCCC">i X j</td>';
for ($j=1; $j<=$NbrCol; $j++) {
echo '<td bgcolor="#FFFF66">'.$j.'</td>';
}
echo '</tr>';
// -------------------------------------------------------
// lignes suivantes
for ($i=1; $i<=$NbrLigne; $i++) {
echo '<tr>';
for ($j=1; $j<=$NbrCol; $j++) {
// 1ere colonne (colonne 0)
if ($j==1) {
echo '<td bgcolor="#FFFF66">'.$i.'</td>';
}
// colonnes suivantes
if ($i==$j) {
echo '<td bgcolor="#FFCC66">';
} else {
echo '<td>';
}
// ------------------------------------------
// AFFICHAGE ligne $i, colonne $j
echo $i*$j;
// ------------------------------------------
echo '</td>';
}
echo '</tr>';
$j=1;
}
echo '</table>';
?>
</body></html>
Affichage "en ligne" avec array()
Affichage d'un certain nombre de données dans un tableau :
- On veut que le tableau fasse un nombre déterminé de colonnes.
Mais on ne connait pas à l'avance le nombre de données récupérées :
- il faut donc pouvoir afficher (automatiquement) autant de lignes que nécessaire.
Récupération des éléments d'un tableau Array()
A noter : le premier indice d'un array() est 0 (zéro)
AVEC calcul du nombre de lignes AVANT affichage
L'exemple ci-dessous affiche :
| elt0 | elt1 | elt2 | elt3 |
| elt4 | elt5 |
le code généré :
<table border="1">
<tr>
<td>elt0</td>
<td>elt1</td>
<td>elt2</td>
<td>elt3</td>
</tr>
<tr>
<td>elt4</td>
<td>elt5</td>
<td> </td>
<td> </td>
</tr>
</table>
Le code php :
<html><body>
<?php
// $NbreData : le nombre de données à afficher
// $NbrCol : le nombre de colonnes
// $NbrLigne : calcul automatique AVANT affichage
// -------------------------------------------------------
// (exemple)
$NbrCol = 4;
$tableau = array('elt0','elt1','elt2','elt3','elt4','elt5');
// -------------------------------------------------------
$NbreData = sizeof($tableau);
// -------------------------------------------------------
// calcul du nombre de lignes
if (round($NbreData/$NbrCol)!=($NbreData/$NbrCol)) {
$NbrLigne = round(($NbreData/$NbrCol)+0.5);
} else {
$NbrLigne = $NbreData/$NbrCol;
}
// -------------------------------------------------------
// affichage
if ($NbreData != 0) {
$k = 0;
echo '<table border="1">';
for ($i=1; $i<=$NbrLigne; $i++) {
echo '<tr>';
for ($j=1; $j<=$NbrCol; $j++) {
if ($k<$NbreData) {
echo '<td>';
// ------------------------------------------
// AFFICHAGE de l'element
echo $tableau[$k];
// ------------------------------------------
echo '</td>';
$k++;
} else { // case vide
echo '<td> </td>';
}
}
echo '<tr>';
$j=1;
}
echo '</table>';
} else {
echo 'pas de données à afficher';
}
?>
</body></html>
SANS calcul du nombre de lignes
C'est une façon différente d'aborder le problème :
- affichage "tant qu'il y a des données ..." (while ...)
- L'astuce : on utilise la propriété "modulo" (Mod en ASP et % en PHP )
qui renvoie le reste de la division entière du 1er chiffre par le 2ème
Exemple :
| 1 % 4 = 1 | 2 % 4 = 2 | 3 % 4 = 3 | 4 % 4 = 0 |
| 5 % 4 = 1 | 6 % 4 = 2 | 7 % 4 = 3 | 8 % 4 = 0 |
| 9 % 4 = 1 | ... |
Donc :
- quand le modulo = 1 : première colonne
- quand le modulo = 0 : dernière colonne
Le nombre de lignes (NbrLigne) est incrémenté au fur et à mesure :
- on le récupère A LA FIN. éventuellement
- ou on l'intercepte en cours de route (pour pagination)
L'exemple ci-dessous affiche :
| elt0 | elt1 | elt2 | elt3 |
| elt4 | elt5 |
le code généré :
<table border="1">
<tr>
<td>elt0</td>
<td>elt1</td>
<td>elt2</td>
<td>elt3</td>
</tr>
<tr>
<td>elt4</td>
<td>elt5</td>
</tr>
</table>
Le code php :
<html><body>
<?php
// $NbreData : le nombre de données à afficher
// $NbrCol : le nombre de colonnes
// $NbrLigne : calcul automatique a la FIN
// -------------------------------------------------------
// (exemple)
$NbrCol = 4;
$tableau = array('elt0','elt1','elt2','elt3','elt4','elt5');
// -------------------------------------------------------
$NbreData = sizeof($tableau);
// -------------------------------------------------------
// affichage
$NbrLigne = 0;
if ($NbreData != 0) {
$k = 0;
$j = 1;
echo '<table border="1">';
while ($k < $NbreData) {
if ($j%$NbrCol == 1) {
$NbrLigne++;
echo "<tr>";
$fintr = 0;
}
echo '<td>';
// ------------------------------------------
// AFFICHAGE de l'element
echo $tableau[$k];
// ------------------------------------------
echo '</td>';
$k++;
if ($j%$NbrCol == 0) {
echo "</tr>";
$fintr = 0;
}
$j++;
}
if ($fintr!=1) { echo '</tr>'; }
echo '</table>';
} else {
echo 'pas de données à afficher';
}
?>
</body></html>
Affichage "en ligne" avec base de données
Affichage de données récupérées par une requête dans une base de données.
- On veut afficher dans chaque case les données provenant d'un enregistrement
- On veut que le tableau fasse un nombre déterminé de colonnes.
Mais on ne connait pas à l'avance le nombre de données récupérées :
- il faut donc pouvoir afficher (automatiquement) autant de lignes que nécessaire.
Dans la partie "AFFICHAGE des DONNEES de la fiche" : Tout est possible !
- afficher plusieurs données,
- afficher des images,
- les organiser dans un tableau,
- ajouter des liens hypertext,
- ...
Même principe que "SANS calcul du nombre de lignes" :
- affichage "tant qu'il y a des données ..." while ...
- L'astuce : on utilise la propriété "modulo"
Exemple
La table MATABLE :
| champs | valeurs | |||||||||
| NUM | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| DONNEE | banane | betterave | boule | pomme | ananas | baie | bille | citron | bonbon | ballon |
| TYPE | fruit | legume | jouet | fruit | fruit | fruit | jouet | fruit | douceur | jouet |
La requête : toutes les données commençant par un "b", classées par ordre alphabétique.
L'exemple ci-dessous affiche :
| baie
fruit | ballon
jouet | banane
fruit | betterave
legume |
| bille
jouet | bonbon
douceur | boule
jouet |
Le code généré :
<table border="1">
<tr>
<td>baie<br><i>fruit</i></td>
<td>ballon<br><i>jouet</i></td>
<td>banane<br><i>fruit</i></td>
<td>betterave<br><i>legume</i></td>
</tr>
<tr>
<td>bille<br><i>jouet</i></td>
<td>bonbon<br><i>douceur</i></td>
<td>boule<br><i>jouet</i></td>
</tr>
</table>
Le code php
<?php include("_connexion.php") ; ?>
<html><body>
<?php
// $NbreData : le nombre de données à afficher
// $NbrCol : le nombre de colonnes
// $NbrLigne : calcul automatique a la FIN
// -------------------------------------------------------
// (exemple)
$NbrCol = 4;
// requête
$table = 'MATABLE';
$condition = ' WHERE DONNEE LIKE 'b%' ORDER BY DONNEE ASC';
$query = 'SELECT * FROM '.$table.$condition;
$result = mysql_query($query);
// -------------------------------------------------------
$NbreData = mysql_num_rows($result);
// -------------------------------------------------------
// affichage
$NbrLigne = 0;
if ($NbreData != 0) {
$j = 1;
echo '<table border="1">';
while ($val = mysql_fetch_array($result)) {
if ($j%$NbrCol == 1) {
$NbrLigne++;
echo "<tr>";
$fintr = 0;
}
echo '<td>';
// ------------------------------------------
// AFFICHAGE des DONNEES de la fiche
echo $val['DONNEE'];
echo '<br>';
echo '<i>'.$val['TYPE'].'</i>';
// ------------------------------------------
echo '</td>';
if ($j%$NbrCol == 0) {
echo "</tr>";
$fintr = 1;
}
$j++;
}
if ($fintr!=1) { echo '</tr>'; }
echo '</table>';
} else {
echo 'pas de données à afficher';
}
?>
</body></html>
<?php
// déconnexion de la base
mysql_close();
?>
Affichage "en Colonne"
Les scripts précédents affichent les données "en ligne".
Affichage des résultats "en colonne" :
- pour un nombre de lignes (NbreLigne) défini,
- il faut pouvoir afficher (automatiquement) autant de colonnes que nécessaire.
Solution 1
(la plus simple)
Exemple avec Array() (même principe avec Base de données)
Principe :
- une table d'une ligne (invisible),
- dans chaque cellule : création d'une table d'1 colonne et NbreLigne lignes,
- ajout de cellules supplémentaires "tant qu'on a des données ..."
L'exemple ci-dessous affiche :
le code généré :
<table><tr>
<td valign="top">
<table border="1">
<tr><td>elt0</td></tr>
<tr><td>elt1</td></tr>
<tr><td>elt2</td></tr>
</table>
</td>
<td valign="top">
<table border="1">
<tr><td>elt3</td></tr>
<tr><td>elt4</td></tr>
<tr><td>elt5</td></tr>
</table>
</td>
<td valign="top">
<table border="1">
<tr><td>elt6</td></tr>
<tr><td>elt7</td></tr>
<tr><td>elt8</td></tr>
</table>
</td>
<td valign="top">
<table border="1">
<tr><td>elt9</td></tr>
</table>
</td>
</tr></table>
Le code php :
<html><body>
<?php
// $NbreData : le nombre de données à afficher
// $NbrLigne : le nombre de lignes
// $NbrCol : le nombre de colonnes : calcul automatique
// -------------------------------------------------------
// (exemple)
$NbrLigne = 3;
$tableau = array('elt0','elt1','elt2','elt3','elt4','elt5','elt6','elt7','elt8','elt9');
// -------------------------------------------------------
$NbreData = sizeof($tableau);
// -------------------------------------------------------
$NbrCol = 0;
// affichage
if ($NbreData != 0) {
$k = 0;
echo '<table><tr>';
while ($k < $NbreData) {
echo '<td valign="top">';
echo '<table border="1">';
for ($i=1; $i<=$NbrLigne; $i++) {
if ($k < $NbreData) {
echo '<tr><td>';
// --------------------------------------
// AFFICHAGE de l'element
echo $tableau[$k];
// --------------------------------------
echo '</td></tr>';
$k++;
}
if ($i == $NbrLigne) {
echo '</table>';
echo '</td>';
}
}
$NbrCol++;
}
echo '</tr></table>';
} else {
echo 'pas de données à afficher';
}
?>
</body></html>
Solution 2, avec Array()
La solution 1 est efficace, mais pas satisfaisante si on souhaite bien aligner toutes les cellules.
Principe :
- une seule table,
- le remplissage se fait ligne par ligne en testant le "modulo" :
Exemple
10 éléments (elt0 à elt9) sur 3 lignes.
On doit les afficher dans cet ordre : (voir le code généré)
| ligne 0 : | elt0 - elt3 - elt6 - elt9 | 0 Mod 3 3 Mod 3 6 Mod 3 = 9 Mod 3 = 0 |
| ligne 1 : | elt1 - elt4 - elt7 | 1 Mod 3 4 Mod 3 7 Mod 3 = ... = 1 |
| ligne 2 : | elt2 - elt5 - elt8 | 2 Mod 3 5 Mod 3 8 Mod 3 = ... = 2 |
L'exemple ci-dessous affiche :
| elt0 | elt3 | elt6 | elt9 |
| elt1 | elt4 | elt7 | |
| elt2 | elt5 | elt8 |
Le code généré :
<table border="1">
<tr>
<td>elt0</td>
<td>elt3</td>
<td>elt6</td>
<td>elt9</td>
</tr>
<tr>
<td>elt1</td>
<td>elt4</td>
<td>elt7</td>
</tr>
<tr>
<td>elt2</td>
<td>elt5</td>
<td>elt8</td>
</tr>
</table>
Le code php
<html><body>
<?php
// $NbreData : le nombre de données à afficher
// $NbrLigne : le nombre de lignes
// $NbrCol : le nombre de colonnes : calcul automatique
// -------------------------------------------------------
// (exemple)
$NbrLigne = 3;
$tableau = array('elt0','elt1','elt2','elt3','elt4','elt5'
,'elt6','elt7','elt8','elt9');
// -------------------------------------------------------
$NbreData = sizeof($tableau);
// -------------------------------------------------------
// affichage
if ($NbreData != 0) {
$i = 0;
$NbrCol = 0;
echo '<table border="1">';
for ($i=0; $i<$NbrLigne; $i++) {
echo '<tr>';
$j = 0;
while (($i+($j*$NbrLigne))%$NbrLigne==$i && ($i+($j*$NbrLigne))<$NbreData) {
echo '<td>';
// --------------------------------------
// AFFICHAGE de l'element
$k = ($i+($j*$NbrLigne));
echo $tableau[$k];
// --------------------------------------
echo '</td>';
$j++;
if ($NbrCol<$j) { $NbrCol=$j; }
}
echo '</tr>';
}
echo '</table>';
} else {
echo 'pas de données à afficher';
}
?>
</body></html>
Solution 3, avec base de données
Le script utilisant les indices de tableau :
- création d'un tableau array() contenant les données récupérées.
L'exemple ci-dessous affiche :
| baie
fruit | bille
jouet |
| ballon
jouet | bonbon
douceur |
| banane
fruit | boule
jouet |
| betterave
legume |
Le code généré
<table border="1">
<tr>
<td>baie<br><i>fruit</i></td>
<td>bille<br><i>jouet</i></td>
</tr>
<tr>
<td>ballon<br><i>jouet</i></td>
<td>bonbon<br><i>douceur</i></td>
</tr>
<tr>
<td>banane<br><i>fruit</i></td>
<td>boule<br><i>jouet</i></td>
</tr>
<tr>
<td>betterave<br><i>legume</i></td>
</tr>
</table>
Le code php
<?php include("_connexion.php") ; ?>
<html><body>
<?php
// $NbreData : le nombre de données à afficher
// $NbrLigne : le nombre de lignes
// $NbrCol : calcul automatique
// -------------------------------------------------------
// (exemple)
$NbrLigne = 4;
// requete
$table = 'MATABLE';
$condition =
' WHERE DONNEE LIKE 'b%' ORDER BY DONNEE ASC';
$query = 'SELECT * FROM '.$table.$condition;
$result = mysql_query($query);
// -------------------------------------------------------
$NbreData = mysql_num_rows($result);
// -------------------------------------------------------
// creation d'un tableau array() par donnees
$k=0;
while ($val = mysql_fetch_array($result)) {
$tableau1[$k] = $val['DONNEE'];
$tableau2[$k] = $val['TYPE'];
$k++;
}
// -------------------------------------------------------
// affichage
if ($NbreData != 0) {
$i = 0;
$NbrCol = 0;
echo '<table border="1">';
for ($i=0; $i<$NbrLigne; $i++) {
echo '<tr>';
$j = 0;
while (($i+($j*$NbrLigne))%$NbrLigne==$i && ($i+($j*$NbrLigne))<$NbreData) {
echo '<td>';
// --------------------------------------
// AFFICHAGE de l'element
$k = ($i+($j*$NbrLigne));
echo $tableau1[$k];
echo '<br>';
echo '<i>'.$tableau2[$k].'</i>';
// --------------------------------------
echo '</td>';
$j++;
if ($NbrCol<$j) { $NbrCol=$j; }
}
echo '</tr>';
}
echo '</table>';
} else {
echo 'pas de données à afficher';
}
?>
</body></html>
<?php
mysql_close();
?>
Astuce
Au lieu de créer un tableau array() pour chaque donnée récupérée (tableau1, tableau2, ...),
il est possible de créer un seul tableau array(), en PHP, c'est très simple et très pratique.
<?php
// ...
// -------------------------------------------------------
// creation d'un seul array avec toutes les donnees
$k=0;
while ($val = mysql_fetch_array($result)) {
$tableau[$k] = $val;
$k++;
}
// -------------------------------------------------------
// affichage
// ...
// --------------------------------------
// AFFICHAGE de l'element
$k = ($i+($j*$NbrLigne));
echo $tableau[$k]['DONNEE'];
echo '<br>';
echo '<i>'.$tableau[$k]['TYPE'].'</i>';
// --------------------------------------
// ...
?> A voir également
- Affichage en tableau : afficher des données dans un tableau
- Afficher des données mysql en php dans un tableau html
- Tableau php html
- Afficher les données d'un tableau (Résolu) » Forum - Visual Basic
- Affichage données MySQL dans JTable Java à partir d'un JButton » Forum - Java
- Afficher les données de la base de donnée dans un tableau » Forum - Java
- Afficher les données dans un tableau ? » Forum - PHP
- Afficher des données de types blob sur un tableau avec génération de miniatures » Forum - PHP