Mon tutorial original se trouve ici :
http://www.asp-php.net/tutorial/asp-php/tableaux.php
Tables simples
| Structure d'un tableau (table) : | affiche |
| <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> | | | ligne1 colonne1 | ligne1 colonne2 | ligne1 colonne3 | ligne1 colonne4 | | ligne2 colonne1 | ligne2 colonne2 | ligne2 colonne3 | ligne2 colonne4 | | ... | | | | |
a- 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> | |
b- 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 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()
A noter : le premier indice d'un array() est 0 (zéro)
a- AVEC calcul du nombre de lignes AVANT affichage
| L'exemple ci-dessous affiche : | le code généré : |
| elt0 | elt1 | elt2 | elt3 | | elt4 | elt5 | | | | | <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> | |
| <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> | |
b- 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 : | le code généré : |
| elt0 | elt1 | elt2 | elt3 | | elt4 | elt5 | | | | | <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> | |
| <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 "b- 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 : | le code généré : |
| baie
fruit | ballon
jouet | banane
fruit | betterave
legume | | bille
jouet | bonbon
douceur | boule
jouet | | | | <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> | |
| <?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;
// 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);
// -------------------------------------------------------
// 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
// deconnexion 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.
a- 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> | |
| <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> | |
b- 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 : | le code généré : |
| elt0 | elt3 | elt6 | elt9 | | elt1 | elt4 | elt7 | | | elt2 | elt5 | elt8 | | | | <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> | |
| <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> | |
c- Solution 2, 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 : | le code généré : |
| baie
fruit | bille
jouet | | ballon
jouet | bonbon
douceur | | banane
fruit | boule
jouet | | betterave
legume | | | | <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> | |
| <?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>';
// --------------------------------------
// ...
?> | |