Affichage de données dans un tableau HTML

Affichage en Ligne ou en Colonne, provenant d'un array ou d'une Base de Données

Image non disponible

PHP - Création "à la volée" d'un tableau html :

Afficher "proprement" des données tabulaires provenant
- d'un array(),
- ou d'une base de données.

Affichage
- "en LIGNE" (les données sont affichées horizontalement ligne après ligne),
- ou "en COLONNE" (affichage vertical colonne après colonne).

Article lu   fois.

L'auteur

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Avant-Propos

I-A. Choisir l'affichage de ses données tabulaires

Les tableaux (<table>) permettent d'afficher des données tabulaires :
  • données provenant d'un array() ;
  • Ou d'une base de données.
On peut aussi avoir besoin, ou envie d'un affichage :
  • -> "En ligne" (les données sont affichées horizontalement ligne après ligne),
  • -> Ou "en colonne" (affichage vertical colonne après colonne).

I-B. Structure d'un tableau HTML (table)

Balises d'un tableau HTML
<table> balises de début et fin d'une table html
<tr> (table row) rangée, ou ligne.
<th> (table head) cellules d'en-tête
(cellules servant de titre aux colonnes)
autant de fois qu'il y a de colonnes
<td> (table data) cellules de données
(afficher du texte, des images, une table...)
autant de fois qu'il y a de colonnes
<thead>
<tbody>
autres balises...
Se référer au tutoriel : Les tableaux (XHTML et CSS)

I-C. Tutoriels en rapport avec le sujet

I-D. Exemple avec base de données (connexion, table SQL)

1- Dans la suite du tutoriel, j'utiliserai la table SQL ma_table suivante :

id 1 2 3 4 5 6 7 8 9 10
objet banane betterave boule pomme ananas baie bille citron bonbon ballon
genre fruit legume jouet fruit fruit fruit jouet fruit douceur jouet
table SQL ma_table
Sélectionnez

-- Structure de la table `ma_table`
CREATE TABLE `ma_table` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `objet` varchar(100) NOT NULL,
  `genre` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

-- Contenu de la table `ma_table`
INSERT INTO `ma_table` (`id`, `objet`, `genre`) VALUES
(1, 'banane', 'fruit'),
(2, 'betterave', 'legume'),
(3, 'boule', 'jouet'),
(4, 'pomme', 'fruit'),
(5, 'ananas', 'fruit'),
(6, 'baie', 'fruit'),
(7, 'bille', 'jouet'),
(8, 'citron', 'fruit'),
(9, 'bonbon', 'douceur'),
(10, 'ballon', 'jouet');

2- Pour les interactions avec la base de données, on utilisera PDO.
Le script de connexion sera dans un fichier _connexion.php.

_connexion.php
Sélectionnez
<?php
// ------------------------------------------------------------
// Connection à la Base de Données
// ------------------------------------------------------------
if( !function_exists('my_pdo_connexxion') )
{
	function my_pdo_connexxion()
	{
		// ---------
		$hostname	= 'localhost'; 		// voir hébergeur ou "localhost" en local
		$database	= 'ma_base_test'; 	// nom de la BdD
		$username	= 'root'; 			// identifiant "root" en local
		$password	= ''; 				// mot de passe (vide en local)
		// ---------
		// connexion à la Base de Données
		try {
			// chaine de connexion (DSN)
			$strConn 	= 'mysql:host='.$hostname.';dbname='.$database.';charset=utf8';	// UTF-8
			$extraParam	= array(
				PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,		// rapport d'erreurs sous forme d'exceptions
				PDO::ATTR_PERSISTENT => true, 						// Connexions persistantes
				PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC, 	// fetch mode par defaut
				PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"	// encodage UTF-8
				);
			// Instancie la connexion
			$pdo = new PDO($strConn, $username, $password, $extraParam);
			return $pdo;
		}
		// ---------
		catch(PDOException $e){
			$msg = 'ERREUR PDO connexion...'; die($msg);
			return false;
		}
		// ---------
	}
}
// --------------------------------
$pdo	= my_pdo_connexxion();
// --------------------------------------------------------------

3- Il sera inclus en début de script dans le fichier ma-page-test.php.

ma-page-test.php
Sélectionnez
<?php require('_connexion.php'); ?>

II. Tables simples, affichage classique

II-A. Tableau HTML simple de NbrCol colonnes par NbrLigne lignes

Image non disponible
Tableau html simple
Sélectionnez

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Tableau html simple</title>
</head>
<body>

<table border="1">
<?php
// $NbrLigne : le nombre de lignes
$NbrLigne = 3;
// $NbrCol : le nombre de colonnes
$NbrCol = 4;
// -------------------------------
?>
   <thead>
	<tr>
<?php
	// ENTETE pour chaque colonne
	for ($j=1; $j<=$NbrCol; $j++) 
	{ 
?>
		<th><?php echo 'colonne '. $j; ?></th>
<?php
	} // end for
?>
	</tr>
   </thead>

   <tbody>
<?php
	// pour chaque ligne
	for ($i=1; $i<=$NbrLigne; $i++) 
	{ 
?>
	<tr>
<?php
		// pour chaque colonne (de la ligne)
		for ($j=1; $j<=$NbrCol; $j++) 
		{ 
?>
		<td><?php echo 'lig '. $i .' - col '. $j; // CONTENU de la CELLULE i x j ?></td>
<?php
		} // end for
?>
	</tr>
<?php
	} // end for
?>
   </tbody>
</table>

</body>
</html>

II-B. Table de multiplication : exemple amélioré

Image non disponible
Table de multiplication
Sélectionnez

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Table de multiplication</title>
    <style>
    table thead tr th { background:#FFFF66;/*jaune*/ } /* thead : 1ere ligne */
    table thead tr th:first-child { background:#ccc; /*gris*/ } /* thead : 1ere ligne, 1ere colonne */
    table tbody tr td { background:#fff; } /* tbody : cellules courantes */
    table tbody tr td:first-child { background:#FFFF66;/*jaune*/ } /* tbody : 1ere colonne */
    table tbody tr td.tdij { background:#FFCC66;/*orange*/ } /* tbody : colonne et ligne identique */
    </style>
</head>
<body>

<table border="1" width="400">
<?php
$NbrCol 	= 9; // nombre de colonnes
$NbrLigne 	= 9; // nombre de lignes
// --------------------------------------------------------
// on affiche en plus sur les 1ere ligne et 1ere colonne 
// les valeurs a multiplier (dans des cases en couleur)
// le tableau final fera donc 10 x 10
// --------------------------------------------------------
	// 1ere ligne (ligne 0) 
?>
<thead>
	<tr>
		<th>i X j</th>
<?php
	for ($j=1; $j<=$NbrCol; $j++) // index de colonne
	{ 
?>
		<th><?php echo $j; ?></th>
<?php
	} 
?>
	</tr>
</thead>

<tbody>
<?php
	// lignes suivantes
	for ($i=1; $i<=$NbrLigne; $i++) // index de ligne
	{ 
?>
	<tr>
<?php
		for ($j=1; $j<=$NbrCol; $j++) // index de colonne
		{
			// 1ere colonne (colonne 0)
			if ($j==1) 
			{ 
?>
		<td><?php echo $i; ?></td>
<?php
			}
			// colonnes suivantes
?>
		<td <?php if ($i==$j) echo ' class="tdij"'; // on ajoute une classe pour les cellules  $i==$j ?>>
<?php
			// -------------------------
			// DONNEES A AFFICHER dans la cellule
			echo $i*$j; // ici : table de multiplication
			// -------------------------
?>
		</td>
<?php
		} 
?>
	</tr>
<?php
		$j = 1; // on ré-initialise le numéro de colonne
	}
?>
</tbody>
</table>

</body>
</html>

II-C. Affichage "classique" avec Base de Données (cas le plus courant)

Affichage de données récupérées par une requête dans une base de données
  • C'est l'affichage "classique", le cas le plus courant ;
  • On veut afficher sur chaque ligne les données provenant d'un seul enregistrement ;
  • Chaque cellule contient UNE donnée de l'enregistrement.

Avec PDO, il est possible d'utiliser 2 méthodes distincts pour récupérer le résultat de la requête.

1- Avec fetchAll() : on récupère un tableau contenant toutes les lignes du jeu de résultats.

 
Sélectionnez
<?php
	 $rowAll = $pdo_select->fetchAll(); // on récupère TOUTES les lignes (en une seule fois)
	 foreach ( $rowAll as $row ) 
	 {
...

2- Avec fetch() : on récupère la ligne suivante d'un jeu de résultats.
Cette méthode est à privilégier si on a un (très) grand nombre de résultats, puisqu'on ne récupère qu'une ligne à la fois.

 
Sélectionnez
<?php
	 while ( $row = $pdo_select->fetch() ) // on récupère une ligne à la fois
	 {
...



La requête (exemple) : tous les "objet", classés par "id".

Image non disponible
Affichage classique avec Base de Donnees
Sélectionnez

<?php require('_connexion.php'); ?>
<!DOCTYPE html>
<html>
<head>
	 <meta charset="utf-8" />
	 <title>Affichage simple avec Base de Donnees</title>
</head>
<body>

<?php
// --------------------------------
// La requete (exemple) : tous les "objet", classés par "id".
$query = "SELECT * FROM ma_table ORDER BY id ASC;";
  try {
	$pdo_select = $pdo->prepare($query);
	$pdo_select->execute();
	$NbreData = $pdo_select->rowCount();	// nombre d'enregistrements (lignes)
	$rowAll = $pdo_select->fetchAll();
  } catch (PDOException $e){ echo 'Erreur SQL : '. $e->getMessage().'<br/>'; die(); }
// --------------------------------
// affichage
if ($NbreData != 0) 
{
?>
	<table border="1">
	<thead>
		<tr>
			<th>id</th>
			<th>objet</th>
			<th>genre</th>
		</tr>
	</thead>
	<tbody>
<?php
	// pour chaque ligne (chaque enregistrement)
	foreach ( $rowAll as $row ) 
	{
		// DONNEES A AFFICHER dans chaque cellule de la ligne
?>
		<tr>
			<td><?php echo $row['id']; ?></td>
			<td><?php echo $row['objet']; ?></td>
			<td><?php echo $row['genre']; ?></td>
		</tr>
<?php
	} // fin foreach
?>
	</tbody>
	</table>
<?php
} else { ?>
	pas de données à afficher
<?php
}
?>

</body>
</html>

III. Affichage "en ligne" avec array()

Affichage d'un certains nombres 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() :
  • Le premier indice d'un array() est 0 (zéro)
  • Le dernier indice est : count($tableau)-1

III-A. Affichage "en ligne" avec array() - AVEC calcul du nombre de lignes nécessaires

Première méthode :
  • On détermine le nombre de données à afficher : count($tableau),
  • et on en déduit le nombre de cellules nécessaire.
  • les cellules vides sont remplies avec un espace &nbsp;.
Image non disponible
Affichage en ligne avec array() a- AVEC calcul du nombre de lignes
Sélectionnez

<!DOCTYPE html>
<html>
<head>
	 <meta charset="utf-8" />
	 <title>Affichage en ligne avec Array - AVEC calcul du Nbreligne</title>
</head>
<body>

<?php
// $NbrCol : le nombre de colonnes
// $NbrLigne : calcul automatique AVANT affichage
// -------------------------------------------------------
// (exemple)
$NbrCol = 4;
$tableau = array('elt0','elt1','elt2','elt3','elt4','elt5');
// -------------------------------------------------------
// nombre de cellules à remplir
$NbreData = count($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; // indice du tableau
?>
	<table border="1">
	<tbody>
<?php
	for ($i=1; $i<=$NbrLigne; $i++) 
	{
		// ligne $i
?>
		<tr>
<?php		for ($j=1; $j<=$NbrCol; $j++) 
		{ // colonne $j
			if ($k<$NbreData) {
?>
			<td>
<?php			// -------------------------
			// DONNEES A AFFICHER dans la cellule
			echo $tableau[$k];
			// -------------------------
?>
			</td>
<?php
				$k++;
			} else { // cellule vide
?>
			<td>&nbsp;</td>
<?php
			}
		}
?>
		</tr>
<?php	}
?>
	</tbody>
	</table>
<?php
} else { ?>
	pas de données à afficher
<?php
}
?>

</body>
</html>

III-B. Affichage "en ligne" avec array() - SANS calcul du nombre de lignes nécessaires

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" (X % Y) qui renvoie le reste de la division entière de X par Y
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 10 % 4 = 2 11 % 4 = 3 ...
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 peut (éventuellement) le récupèrer A LA FIN,
  • ou l'intercepter en cours de route (pour PAGINATION)
Image non disponible
Affichage en ligne avec array() b- SANS calcul du nombre de lignes
Sélectionnez

<!DOCTYPE html>
<html>
<head>
	 <meta charset="utf-8" />
	 <title>Affichage en ligne avec Array - SANS calcul du Nbreligne</title>
</head>
<body>

<?php
// $NbrCol : le nombre de colonnes
// $NbrLigne : calcul automatique a la FIN
// -------------------------------------------------------
// (exemple)
$NbrCol = 4;
$tableau = array('elt0','elt1','elt2','elt3','elt4','elt5');
// -------------------------------------------------------
// nombre de cellules à remplir
$NbreData = count($tableau);
// -------------------------------------------------------
// affichage
$NbrLigne = 0;
if ($NbreData != 0) 
{
	$k = 0; // indice du tableau
?>
	<table border="1">
	<tbody>
<?php
	while ($k < $NbreData) 
	{
		if (($k+1)%$NbrCol == 1) 
		{
			$NbrLigne++;
			$fintr = 0;
?>
		<tr>
<?php
		}
?>
			<td>
<?php
			// -------------------------
			// DONNEES A AFFICHER dans la cellule
			echo $tableau[$k];
			// -------------------------
?>
			</td>
<?php
		if (($k+1)%$NbrCol == 0) {
			$fintr = 1;
?>		</tr>
<?php
		}
		$k++;
	}
	// fermeture derniere balise /tr
	if ($fintr!=1) {
?>		</tr>
<?php
 } 
?>
	</tbody>
	</table>
<?php
} else { ?>
	pas de données à afficher
<?php
}
?>

</body>
</html>

IV. 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 cellule les données provenant d'UN SEUL enregistrement ;
  • Chaque cellule contient TOUTES les données provenant d'UN SEUL 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 "// DONNEES A AFFICHER dans la cellule" : vous affichez ce que vous voulez !
  • Afficher plusieurs données,
  • Afficher des images,
  • Ajouter des liens hypertexte,
  • Les organiser selon votre mise en page, dans un tableau,
  • ...
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".

La requête (exemple) : tous les "objet" commençant par un "b", classés par ordre alphabétique.

Image non disponible
Affichage en ligne avec Base de Donnees
Sélectionnez

<?php require('_connexion.php'); ?>
<!DOCTYPE html>
<html>
<head>
	 <meta charset="utf-8" />
	 <title>Affichage en ligne avec Base de Donnees</title>
</head>
<body>

<?php
// --------------------------------
// $NbrCol : le nombre de colonnes
$NbrCol = 4;	// (par exemple)

// $NbrLigne : calcul automatique a la FIN
// --------------------------------
// La requete (exemple) : tous les "objet" commençant par un "b", classés par ordre alphabétique.
$query = "SELECT * FROM ma_table WHERE objet LIKE :chose ORDER BY objet ASC;";
  try {
	$pdo_select = $pdo->prepare($query);
	$pdo_select->bindValue(	':chose', 'b%', PDO::PARAM_STR);
	$pdo_select->execute();

	$NbreData = $pdo_select->rowCount();	// nombre d'enregistrements (= nombre de cellules à remplir)
	$rowAll = $pdo_select->fetchAll();	// on récupère tous les enregistrements dans un array
  } catch (PDOException $e){ echo 'Erreur SQL : '. $e->getMessage().'<br/>'; die(); }
// --------------------------------
// affichage
$NbrLigne = 0;
if ($NbreData != 0) 
{
	$j = 1;
?>
	<table border="1">
	<tbody>
<?php
	foreach ( $rowAll as $row ) 
	{
		if ($j%$NbrCol == 1) {
			$NbrLigne++;
			$fintr = 0;
?>
		<tr>
<?php
		}
?>
			<td>
<?php
			// -------------------------
			// DONNEES A AFFICHER dans la cellule
			echo $row['objet'];
			echo '<br/>';
			echo '<i>'.$row['genre'].'</i>';
			// -------------------------
?>
			</td>
<?php
		if ($j%$NbrCol == 0) 
		{
			$fintr = 1;
?>
		</tr>
<?php
		}
		$j++;
	} // fin foreach

	// fermeture derniere balise /tr
	if ($fintr!=1) 
	{
?>
		</tr>
<?php
	} 
?>
	</tbody>
	</table>
<?php
} else { 
?>
	pas de données à afficher
<?php
}
?>

</body>
</html>

V. Affichage "en colonne" avec array()

Les scripts précédents affichent les données "en ligne".

Avec les écrans 16/9e (portable, ...), il devient intéressant d'envisager d'afficher "en colonne" (hauteur fixe)
--> scroll horizontal (ça change du scroll vertical conventionnel !), donc original !

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.

V-A. Affichage "en Colonne" - Solution 1 avec Array()

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..."
Image non disponible
Affichage en colonne avec array() - solution 1
Sélectionnez

<!DOCTYPE html>
<html>
<head>
	 <meta charset="utf-8" />
	 <title>Affichage en colonne avec array - solution 1</title>
</head>
<body>

<?php
// $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 : le nombre de données à afficher
$NbreData = count($tableau);
// --------------------------------
$NbrCol = 0;
// affichage
if ($NbreData != 0) {
	$k = 0; // indice du tableau
?>
	<table>
	<tbody>
		<tr>
<?php
	while ($k < $NbreData) 
	{
?>			<td valign="top">
				<table border="1">
<?php
		for ($i=1; $i<=$NbrLigne; $i++) 
		{
			if ($k < $NbreData) 
			{
?>
					<tr>
						<td>
<?php					// -------------------------
						// DONNEES A AFFICHER dans la cellule
						echo $tableau[$k];
						// -------------------------
?>
						</td>
					</tr>
<?php
				$k++;
			}
			if ($i == $NbrLigne) 
			{
?>
				</table>
			</td>
<?php
			}
		}
		$NbrCol++;
	}
?>
		</tr>
	<tbody>
	</table>
<?php
} else {
?>	pas de données à afficher
<?php
}
?>

</body>
</html>

V-B. Affichage "en Colonne" - Solution 2, avec Array()

La solution 1 est efficace, mais pas satisfaisante si on souhaite aligner "proprement" toutes les cellules.
Cas des cellules dont la hauteur du contenu peut varier (par ex. : avec des images de hauteur variable)

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 :

ligne 0 : elt0 - elt3 - elt6 - elt9 0 % 3 = 3 % 3 = 6 % 3 = 9 % 3 = 0
ligne 1 : elt1 - elt4 - elt7 1 % 3 = 4 % 3 = 7 % 3 = ... = 1
ligne 2 : elt2 - elt5 - elt8 2 % 3 = 5 % 3 = 8 % 3 = ... = 2
Image non disponible
Affichage en colonne avec array() - solution 2
Sélectionnez

<!DOCTYPE html>
<html>
<head>
	 <meta charset="utf-8" />
	 <title>Affichage en colonne avec array - solution 2</title>
</head>
<body>

<?php
// $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');
// --------------------------------
// nombre de cellules à remplir
$NbreData = count($tableau);
// --------------------------------
// affichage
if ($NbreData != 0) 
{
	$i = 0;
	$NbrCol = 0;
?>
	<table border="1">
	<tbody>
<?php
	for ($i=0; $i<$NbrLigne; $i++) 
	{
?>
		<tr>
<?php
		$j = 0;
		while (($i+($j*$NbrLigne))%$NbrLigne==$i && ($i+($j*$NbrLigne))<$NbreData) 
		{
?>
			<td>
<?php
			// -------------------------
			// DONNEES A AFFICHER dans la cellule
			$k = ($i+($j*$NbrLigne));
			echo $tableau[$k];
			// -------------------------
?>
			</td>
<?php
			$j++;
			// nombre de colonnes
			$NbrCol = max($NbrCol,$j);
		}
		// ajout cellule vide (derniere colonne)
		if ($j!=$NbrCol) 
		{ 
?>
			<td>&nbsp;</td>
<?php
		}
?>
		</tr>
<?php
	}
?>
	</tbody>
	</table>
<?php
} else {
?>	pas de données à afficher
<?php
}
?>

</body>
</html>

VI. Affichage "en colonne" 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.

La requête (exemple) : tous les "objet" commençant par un "b", classées par ordre alphabétique.

Image non disponible

VI-A. Affichage "en Colonne" avec BD - Solution 1

Affichage en colonne avec Base de Donnees - solution 1
Sélectionnez

<?php require('_connexion.php'); ?>
<!DOCTYPE html>
<html>
<head>
	 <meta charset="utf-8" />
	 <title>Affichage en colonne avec BD - solution 2</title>
</head>
<body>

<?php
// --------------------------------
// $NbrLigne : le nombre de lignes
$NbrLigne = 3;	// (par exemple)

// $NbrCol : calcul automatique
// --------------------------------
// La requete (exemple) : tous les "objet" commençant par un "b", classées par ordre alphabétique.
$query = "SELECT * FROM ma_table WHERE objet LIKE :chose ORDER BY objet ASC;";
  try {
	$pdo_select = $pdo->prepare($query);
	$pdo_select->bindValue(	':chose', 'b%', PDO::PARAM_STR);
	$pdo_select->execute();

	$NbreData = $pdo_select->rowCount();	// nombre de cellules à remplir
	$rowAll = $pdo_select->fetchAll();
  } catch (PDOException $e){ echo 'Erreur SQL : '. $e->getMessage().'<br/>'; die(); }
// -------------------------------- 
// creation d'un tableau array() par donnees
$k=0;
foreach ( $rowAll as $row ) {
	$tableau1[$k] = $row['objet'];
	$tableau2[$k] = $row['genre'];
	$k++;
}
// --------------------------------
// affichage
if ($NbreData != 0) 
{
	$i = 0;
	$NbrCol = 0;
?>
	<table border="1">
	<tbody>
<?php
	for ($i=0; $i<$NbrLigne; $i++) 
	{
?>
		<tr>
<?php
		$j = 0;
		while (($i+($j*$NbrLigne))%$NbrLigne==$i && ($i+($j*$NbrLigne))<$NbreData) 
		{
?>
			<td>
<?php			// -------------------------
			// DONNEES A AFFICHER dans la cellule
			$k = ($i+($j*$NbrLigne));
			echo $tableau1[$k];
			echo '<br/>';
			echo '<i>'.$tableau2[$k].'</i>';
			// -------------------------
?>
			</td>
<?php
			$j++;
			// nombre de colonnes
			$NbrCol = max($NbrCol,$j);
		}
		// ajout cellule vide (derniere colonne)
		if ($j!=$NbrCol) 
		{ 
?>
			<td>&nbsp;</td>
<?php
		}
?>
		</tr>
<?php
	}
?>
	</tbody>
	</table>
<?php
} else {
?>
	pas de données à afficher
<?php
}
?>

</body>
</html>

VI-C. Affichage "en Colonne" avec BD - 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.

Affichage en colonne avec array() - solution 2
Sélectionnez

<?php
// ...
// ------------------------------------------------------- 
// creation d'un seul array avec toutes les donnees
$k=0;
foreach ( $rowAll as $row ) 
{
	$tableau[$k] = $row;
	$k++;
}
// -------------------------------------------------------
// affichage
// ...
			// -------------------------
			// DONNEES A AFFICHER dans la cellule
			$k = ($i+($j*$NbrLigne));
			echo $tableau[$k]['objet'];
			echo '<br/>';
			echo '<i>'.$tableau[$k]['genre'].'</i>';
			// -------------------------
// ...
?>

VII. Pour aller plus loin : fonctions

Les codes proposés ici sont rédigés "en dur" dans la page à afficher.

Mais si vous êtes amené à faire des tableaux, de manière répétitives, d'après des besoins spécifiques :
- nombre, type de données à afficher,
- mise en page à appliquer à l'intérieur de la cellule, ...
il est possible d'écrire des fonctions ou procédures externes.

il est possible d'écrire des fonctions ou procédures externes.
  • CreateHtmlTable(NbrCol,............) : définir les bons paramètres à transmettre à la fonction,
  • ' ......... : le code dépend du type d'affichage choisi (cf paragraphes précédents)
  • ...affichage... : dépend des critères (cf ci-dessus)
fct_table_html.php
Sélectionnez

<?php
// -------------------------------------------------------
function HtmlTable($NbrCol,............)
{
?>
	<table>
	<tbody>
		<tr>
<?php
 // .........
?>
			<td>
<?php
			// -------------------------
			// DONNEES A AFFICHER dans la cellule
			echo '...$affichage...';
			// -------------------------
?>
		</td>
<?php
 // .........
?>
		</tr>
	</tbody>
	</table>
<?php
} // (fin fonction)
// -------------------------------------------------------
?>

Et appel de la fonction dans la page :

page.php
Sélectionnez

<?php include('fct_table_html.php'); ?>
<!DOCTYPE html>
<html>
<head>
	 <meta charset="utf-8" />
	 <title>page</title>
</head>
<body>

<?php
	// -------------------------
	// criteres et donnees a afficher
		$NbrCol = .....;
		$monarray = array(.....);
	// -------------------------
	// tableau html
		HtmlTable($NbrCol,............);
	// -------------------------
?>

</body>
</html>

VIII. Pagination

Quand la liste est longue, il est souvent préférable de l'afficher sur plusieurs page.
C'est le principe de la "pagination" : Cours : Créer un système de pagination automatique

IX. Conclusion

Il ne vous reste plus qu'à choisir le mode d'affichage qui vous convient !

Toutes remarques, corrections, ajouts, permettant d'améliorer ou d'étoffer ce tutoriel seront les bienvenus.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2008 Jérôme Réaux. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Droits de diffusion permanents accordés à Developpez LLC.