Designed by Derf !
85 en ligne   Boutique | Sites | Bar | Forum | PhpBB | Actu | Glossaire | Codes | Tips | Liens | Livres | Lettre  


 Recherche

 NewsLetter





   

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

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





jreaux62

Création d'un tableau "à la volée"
pour afficher ses données.

Affichage "en ligne" ou "en colonne".


Tables simples - en ligne Array() - en ligne BD - en Colonne Array() - en Colonne BD - Compléments


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 :
<!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>Tableau html simple</title>
</head>
<body>
<%
' NbrCol : le nombre de colonnes
' NbrLigne : le nombre de lignes
' --------------------------------------------------------
response.write "<table>"
for i=1 to NbrLigne step 1
   response.write "<tr>"
   for j=1 to NbrCol step 1
         response.write "<td>"
         ' ------------------------------------------
         ' AFFICHAGE ligne i, colonne j
         response.write affichage
         ' ------------------------------------------
         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>Tableau html simple</title>
</head>
<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

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


jreaux62 le 18/09/2008 (9 734 hits)
Didier Réservez votre place gratuite pour les Microsoft TechDays 2009 !!!
Un serveur dédié Dedibox avec la licence Windows Server 2008 gratuite !!!

MSDN fête ses 10 ans ! Gagnez 1 Nabaztag, 1 montre binaire, 1 console Xbox, 1 ordinateur ultra-portable EeePC, 1 HTC Diamond et bien d’autres cadeaux… !!!
Au fil des news  
[MAJ] [PHP] Un calendrier très complet -
Remplacement de balises pour le PHP5 et modifications du script pour l'affichage des jours afin ...
Magazines - Le n°113 de Programmez est disponible
PHP - Compteur de visites (hit) paramétrable
Amélioration du Search MOSS : Recherche avancée - Modification de la page de recherche avancée
Dans la série des optimisations potentielles sur le moteur de recherche de MOSS, nous verrons cette ...
Dreamweaver CS3 + Php + Mysql - Ajout-Modif-Suppression. Les fondamentaux Part-1
Suite à de nombreuses questions sur le forum, je pense que ce sujet sur les comportements d'ajout, ...
SharePoint et Silverlight - Premiers pas - Lecture de données SharePoint et intégration
Silverlight et SharePoint sont deux technologies récentes et connaissant un essor significant. En ...
Développement d'applications SharePoint - depuis une Workstation XP ou Vista
Lorsque que l'on développe pour SharePoint, on se retrouve dans un dilemme auquel nous avons tous ...
JavaScript - sudoky - jeux du sudoku en javascript
Adobe - Creative Suite 4 en Français
PHP - La 8ème édition du Forum PHP est lancée !
Magazines - Le n°112 de Programmez est disponible
PHP - Interpreteur de commande SQL en PHP
Listes liées (dépendantes) : avec ou sans XMLHTTPR - Les délires «Ajax or not Ajax»
Comme toujours, c'est à la suite d'un coup de pouce que je me suis décidé à faire ce tuto. Merci à ...
Amélioration du Search MOSS : Les scopes - Quelques possibilités d'amélioration du Search
Lorsqu'on installe le moteur de recherche de MOSS et qu'on le configure basiquement, on veut ...
SharePoint - Lister les templates utilisés - Identifier les définitions utilisées par vos sites
Un site SharePoint est créé à partir d'un modèle ou définition de site. Mais comment savoir après ...
PowerShell - Profile avec la participation de mon ami Tigrou :)
Adobe - Lancement de la CS4, tous à vos agendas !
[MAJ] PHP - Fonctions de redimensionnement d'images - BD : redimensionner image + picto après upload
Ajout de FONCTIONS de redimensionnement.
PHP - Afficher une date mysql yyyy-mm-dd en dd-mm-yyyy
PHP - Tchat PHP V2.1 sans base de donnée
SharePoint et les statistiques d'utilisation - Comment obtenir des statistiques depuis SharePoint
La mise en place de ferme SharePoint doit s'accompagner d'une notion de gouvernance. Cette notion ...
Adobe - Nouvelles annonces Adobe sur le salon IBC 2008
PHP - PHP TV emission 2 (septembre 2008)
PHP - PDO ADMIN
[MAJ] Inscription contrôlée à une NewsLetter ou Service - Abonnement avec confirmation et désabonnement
Correction d'un point-virgule manquant (merci de m'avoir obligé à chercher JPierre) dans le module ...
PHP - Premier lundi d'une semaine et d'une année
JavaScript - Premier lundi d'une semaine et d'une année
ASP - Premier lundi d'une semaine et d'une année
Alphabet Radio et Code Morse - Alpha Zulu appelle Tango Charlie !
Encoder-Décoder en "Alphabet Radio" ... "Alpha Zulu appelle Tango Charlie !" ou en Code Morse ... ...
Filtrer les modèles de site SharePoint - Filtrer l'affichage des modèles de site SharePoint
Je vous propose de découvrir à l'aide de cet article quels mécanismes peuvent vous permettent de ...
ASP/PHP - Méthode de cryptage - par table de correspondance
(ASP/PHP) Une méthode de cryptage de données par l'utilisation d'une "table de correspondance ...
PHP - Listes liées (1 table) - version2
JavaScript - Rendre Visible ou Invisible des éléments d'un form
PHP - Listes liées (1 table) - version1
JavaScript - Intercepter le click sur vidéo WMP ou flash SWF
Jeux de l'été (et de 5) - Un jeu de Motus (mots de 8 lettres)
C'est reparti pour un tour... Comme je venais de proposer un jeu de Mastermind, je me suis dit que, ...
PowerShell - Extraire toutes les collections SharePoint en CSV
PowerShell - Lister les collections pour une WebApp SharePoint
PowerShell - Lister les utilisateurs d'un site SharePoint
PowerShell - Connaître le code version de votre SharePoint
Tutorial : HTML | Scripting | ASP-PHP | ASP.net | SQL Server | XML
Sharepoint | XAML | Pocket | Dreamweaver | VML | Divers
  Scripts : Scripting | ASP-PHP | ASP.net | Divers
  Boutique | Annuaire | Bannières | Météo | Tribune | Partenariats
v3 © Didier 2003   
 

Corpo Sciences de Reims Partitions gratuites Carte, météo, annonces
 DotNet Project Groupes Utilisateurs Microsoft The Inquirer FR CodePPC TechNet ASP-magazine Codes Sources El Roubio MVP Wygwam