Dans cette fiche...

<Retour ASP>

Début de page Générer un tableau HTML

Cette fois, on mélange les boucles For et les conditions If pour créer un tableau de 5x5 en couleurs.

Rappel : un tableau HTML est délimité par des balises <TABLE> et </TABLE>, chaque ligne est définie par <TR> et </TR>, et chaque colonne par <TD> et </TD>.
1 2 3 4 5
6 7 8 9 10
11 12 13 14 15
16 17 18 19 20
21 22 23 24 25

Début de page Listing de la page ASP

<%@ LANGUAGE="VBSCRIPT" %>
<HTML>

<HEAD>
<TITLE>Tableau en couleurs</TITLE>
</HEAD>

<BODY>

<!-- Construction d'un tableau HTML -->

<TABLE WIDTH="40%" BORDER="0" ALIGN="CENTER" CELLSPACING=0>

<% for i=1 to 5 %>
<TR>
	<% for j=1 to 5
	   if ((i+j) mod 2)=0 then %>
	<TD ALIGN="CENTER" BGCOLOR="#FFF2EB">
	<% else %>
	<TD ALIGN="CENTER" BGCOLOR="#FC8444">
	<% end if 
	   Response.Write((i-1)*5+j) %>
	</TD>
	<% next %>
</TR>
<% next %>
</TABLE>

</BODY>
</HTML>

Début de page Le listing en détail...

Seuls les éléments nouveaux par rapport aux listings précédents sont détaillés.

<% for i=1 to 5 %>
...
<% next %>
On démarre une 1ère "grande" boucle, qui construira les lignes du tableau (tag HTML <TR>).
  
<% for j=1 to 5
...
<% next %>
Deuxième boucle, qui construira cette fois les colonnes du tableau (tag HTML <TD>).
A noter qu'après la boucle, il n'y a pas de signe %>, car le code VBScript continue plus bas.
  
if ((i+j) mod 2)=0 then %>
	<TD ALIGN="CENTER" BGCOLOR="#FFF2EB">
<% else %>
	<TD ALIGN="CENTER" BGCOLOR="#FC8444">
<% end if
La partie principale, qui décide de la couleur des cellules du tableau.
Pour obtenir une cellule orange sur 2, on calcule i+j modulo 2, ce qui équivaut au reste de la division par 2 de i+j.
Exemples :
lorsque i vaut lorsque j vaut i+j vaut (i+j mod 2) vaut la cellule est
1 1 2 0 saumon
1 2 3 1 orange
1 3 4 0 saumon
1 4 5 1 orange
1 5 6 0 saumon
2 1 3 1 orange
  
Response.Write((i-1)*5+j) %>
Une fois la case créée, il s'agit maintenant d'écrire un chiffre de 1 à 25 dedans.
Ce chiffre est calculé en fonction de i (ligne) et j (colonne).