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

Dernière mise à jour le 5 septembre 2013 à 14:58 par pijaku .

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

Description
Tables simples
Affichage "en ligne" avec array()
- AVEC calcul du nombre de lignes AVANT affichage
- SANS calcul du nombre de lignes
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

Tableau php html
Tableau html php - Meilleures réponses
Table php - Meilleures réponses
Selection ligne d'un tableau PHP/HTML ✓ - Forum - Javascript / DHTML
Checkbox tableau php/html ✓ - Forum - PHP
Afficher les données d'une base de données dans un tableau php ✓ - Forum - PHP
Supprimer un élément d'un tableau php ✓ - Forum - PHP
Remplir un tableau depuis le résultat d'une requête mysql ✓ - Forum - PHP

Ce document intitulé « Affichage en tableau : afficher des données dans un tableau » issu de CodeS SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.

Php - administrer en ligne : protection des pages

Créer un site web simple avec un template

18 Commentaires