ASP/PHP : Affichage de données en tableau html - Afficher des données (BD, Array) dans un tableau

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 à la suite ligne par ligne),
- ou "en colonne" (affichage colonne par colonne)...

Ce tutorial traite ces différents cas.

Tables simples

Pour bien débuter Le p'tit cours HTML - Leçon 7 : Les tables

Structure d'un tableau html (table) :
<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)

Le code ...

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

Génération d'un tableau simple de NbrCol colonnes par NbrLigne lignes :

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

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
    <meta http-equiv="content-type"
    content="text/html; charset=iso-8859-1" />
    <title>Table de multiplication</title>
</head>
<body>
<%
' 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 final fera donc 10 x 10
' --------------------------------------------------------
response.write "<table border=""1"" width=""400"">"
' 1ere ligne (ligne 0)
   response.write "<tr>"
   response.write "<th bgcolor=""#CCCCCC"">"
   response.write "i X j</th>"
   for j=1 to NbrCol step 1
      response.write "<th bgcolor=""#FFFF66"">"
      response.write j & "</th>"
   next
   response.write "</tr>"
' --------------------------------------------------------
' lignes suivantes
for i=1 to NbrLigne step 1
   response.write "<tr>"
   for j=1 to NbrCol step 1
      ' 1ere colonne (colonne 0)
      if (j=1) then
         response.write "<td bgcolor=""#FFFF66"">"
         response.write i & "</td>"
      end if
      ' colonnes suivantes
      if (i=j) then
         response.write "<td bgcolor=""#FFCC66"">"
      else
         response.write "<td>"
      end if
      ' ------------------------------------------
      ' AFFICHAGE ligne i, colonne j
      response.write i*j
      ' ------------------------------------------
      response.write "</td>"
   next
   response.write "</tr>"
   j=1
next
response.write "</table>"
%>
</body></html>

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
    <meta http-equiv="content-type"
    content="text/html; charset=iso-8859-1" />
    <title>Table de multiplication</title>
</head>
<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 final fera donc 10 x 10
// --------------------------------------------------------
echo '<table border="1" width="400">';
// 1ere ligne (ligne 0)
echo '<tr>';
echo '<td bgcolor="#CCCCCC">';
echo 'i X j</td>';
for ($j=1; $j<=$NbrCol; $j++) {
   echo '<td bgcolor="#FFFF66">';
   echo $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">';
         echo $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>

Exercices en Javascript/VBscript, mais le principe est le même

ASP/PHP : Affichage de données en tableau html (1/6)

Afficher des données (BD, Array) dans un tableau