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

Profil ProSite personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Avant-Propos

On a souvent besoin, ou envie, d'afficher ses données "proprement" :
  • Données provenant d'un array() ;
  • Ou d'une base de données.

La création "à la volée" d'un tableau html (table) est une bonne solution.

On peut aussi avoir besoin 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).

Ce tutorial traite ces différents cas.

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 !

Dans tous les scripts qui suivent, vous verrez une partie :
// -------------------------
// DONNEES A AFFICHER dans la cellule
// ................
// -------------------------

C'est à cet endroit que VOUS intervenez !
Il s'agit du contenu des cellules du tableau.
Les données à afficher dépendent de VOS besoins :
- plusieurs données peuvent être affichées (textes, images, ...)
- avec votre propre mise en page.

II. Tables simples

II-A. Structure d'un tableau HTML (table)

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

II-B. 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>
<tbody>
<?php
// $NbrCol : le nombre de colonnes
// $NbrLigne : le nombre de lignes
// -------------------------------
	// 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			// -------------------------
			// DONNEES A AFFICHER dans la cellule
			echo 'ligne '. $i .', colonne '. $j; // CONTENU de la CELLULE (exemple)
			// -------------------------
?>		</td>
<?php	} // end for
?>
	</tr>
<?php
	} // end for
?>
</tbody>
</table>

</body>
</html>

II-C. 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>
</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>
	<th>
		<td style="background:#CCCCCC;">i X j</td>
<?php	for ($j=1; $j<=$NbrCol; $j++) { ?>
		<td style="background:#FFFF66;"><?php echo $j; ?></td>
<?php	} ?>
	</th>
</thead>

<tbody>
<?php
	// lignes suivantes
	for ($i=1; $i<=$NbrLigne; $i++) { 
?>
	<tr>
<?php		for ($j=1; $j<=$NbrCol; $j++) {
			// 1ere colonne (colonne 0)
			if ($j==1) { 
?>		<td style="background:#FFFF66;"><?php echo $i; ?></td>
<?php			}
			// colonnes suivantes
			if ($i==$j) {
?>		<td style="background:#FFCC66;">
<?php			} else {
?>		<td>
<?php			}
		// -------------------------
		// DONNEES A AFFICHER dans la cellule
		echo $i*$j;
		// -------------------------
?>		</td>
<?php	} 
?>
	</tr>
<?php	$j=1;
}
?>
</tbody>
</table>

</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 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".

Ex. : La table MATABLE :

ID 1 2 3 4 5 6 7 8 9 10
CHOSE banane betterave boule pomme ananas baie bille citron bonbon ballon
GENRE fruit legume jouet fruit fruit fruit jouet fruit douceur jouet

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

Image non disponible
_connexion.php
Sélectionnez

<?php
// --------------------------------------------------------------
// Connection à la Base de Données (via PDO)
	$pdo_hostname	= 'localhost'; 	// voir hébergeur ou "localhost" en local
	$pdo_database	= 'quizz'; 		// nom de la BdD
	$pdo_username	= 'root'; 		// identifiant "root" en local
	$pdo_password	= ''; 			// mot de passe (vide en local)
// ------------------------
try {
    $pdo_connect_bd = 'mysql:host='.$pdo_hostname.';dbname='.$pdo_database.'';
    $pdo_extra_params = array(
		PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"	// encodage UTF-8
		PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,		// rapport d'erreurs sous forme d'exceptions
		PDO::ATTR_PERSISTENT => true, 						// Connexions persistantes
		);
    $pdo = new PDO($pdo_connect_bd, $pdo_username, $pdo_password, $pdo_extra_params); // instancie la connexion
}
catch(PDOException $e) {
    $msg = 'ERREUR PDO dans ' . $e->getFile() . ' L.' . $e->getLine() . ' : ' . $e->getMessage();
    die($msg);
}
// --------------------------------------------------------------
?>
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
// $NbrLigne : calcul automatique a la FIN
$NbrCol = 4;	// (par exemple)
// --------------------------------
// La requete (exemple) : toutes les "CHOSE" commençant par un "b", classées par ordre alphabétique.
$query = "SELECT * FROM MATABLE WHERE CHOSE LIKE :chose ORDER BY CHOSE 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(); }
// --------------------------------
// 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['CHOSE'];
			echo '<br/>';
			echo '<i>'.$row['GENRE'].'</i>';
			// -------------------------
?>			</td>
<?php		if ($j%$NbrCol == 0) {
			$fintr = 1;
?>		</tr>
<?php		}
		$j++;
	} // fin while
	// 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.

Ex. : La table MATABLE :

ID 1 2 3 4 5 6 7 8 9 10
CHOSE banane betterave boule pomme ananas baie bille citron bonbon ballon
GENRE fruit legume jouet fruit fruit fruit jouet fruit douceur jouet

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

Image non disponible

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

_connexion.php
Sélectionnez

<?php
// --------------------------------------------------------------
// Connection à la Base de Données (via PDO)
	$pdo_hostname	= 'localhost'; 	// voir hébergeur ou "localhost" en local
	$pdo_database	= 'quizz'; 		// nom de la BdD
	$pdo_username	= 'root'; 		// identifiant "root" en local
	$pdo_password	= ''; 			// mot de passe (vide en local)
// ------------------------
try {
    $pdo_connect_bd = 'mysql:host='.$pdo_hostname.';dbname='.$pdo_database.'';
    $pdo_extra_params = array(
		PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"	// encodage UTF-8
		PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,		// rapport d'erreurs sous forme d'exceptions
		PDO::ATTR_PERSISTENT => true, 						// Connexions persistantes
		);
    $pdo = new PDO($pdo_connect_bd, $pdo_username, $pdo_password, $pdo_extra_params); // instancie la connexion
}
catch(PDOException $e) {
    $msg = 'ERREUR PDO dans ' . $e->getFile() . ' L.' . $e->getLine() . ' : ' . $e->getMessage();
    die($msg);
}
// --------------------------------------------------------------
?>
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
// $NbrCol : calcul automatique
$NbrLigne = 4;	// (pager exemple)
// --------------------------------
// La requete (exemple) : toutes les "CHOSE" commençant par un "b", classées par ordre alphabétique.
$query = "SELECT * FROM MATABLE WHERE CHOSE LIKE :chose ORDER BY CHOSE 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['CHOSE'];
	$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]['CHOSE'];
			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)
FONCTIONHtmlTable.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("FONCTIONHtmlTable.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 et 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.