Affichage en tableau : afficher des données dans un tableau

Posez votre question

Affichage en tableau : afficher des données dans un tableau



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 colonne1ligne1 colonne2ligne1 colonne3ligne1 colonne4
ligne2 colonne1ligne2 colonne2ligne2 colonne3ligne2 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 j1234 5 6 7 8 9
1 1 2 3 4 5 6 7 8 9
2 2 4 6 8 1012141618
3369121518212427
44812162024283236
551015202530354045
661218243036424854
771421283542495663
881624324048566472
991827364554637281


<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 :
elt0elt1elt2elt3
elt4elt5

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 = 12 % 4 = 23 % 4 = 34 % 4 = 0
5 % 4 = 16 % 4 = 27 % 4 = 38 % 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 :

elt0elt1elt2elt3
elt4elt5

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 :

champsvaleurs
NUM12345678910
DONNEEbananebetteraveboulepommeananasbaiebillecitronbonbonballon
TYPEfruitlegumejouetfruitfruitfruitjouetfruitdouceurjouet

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 - elt90 Mod 3 3 Mod 3 6 Mod 3 = 9 Mod 3 = 0
ligne 1 :elt1 - elt4 - elt71 Mod 3 4 Mod 3 7 Mod 3 = ... = 1
ligne 2 :elt2 - elt5 - elt82 Mod 3 5 Mod 3 8 Mod 3 = ... = 2


L'exemple ci-dessous affiche :

elt0elt3elt6elt9
elt1elt4elt7
elt2elt5elt8

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

Ajouter un commentaire

Commentaires

Commenter la réponse de oumsofiane1