"Utilisateur de GuppY, je suis membre de l'association freeGuppY, et vous ???"
Vous appréciez GuppY, vous souhaitez nous aider en apportant vos connaissances ou juste quelques euros, vous êtes les bienvenus!
Comme les 70 adhérents de l'asso, rejoignez nous et participez selon vos moyens, vos disponibilités à cette formidable aventure.
Les tableaux permettent la structuration des informations dans la page HTML en ligne et colonnes dans des cellules de taille adaptées.
Le tableau est encadré par les balises <TABLE> et </TABLE>.
Chaque ligne est encadrée par <TR> </TR> (Table Row, traduisez par ligne du tableau).
Les cellules d'en-tête du tableau sont encadrées par <TH> </TH> (pour Table Header : En-tête de tableau).
Enfin, les cellules de valeur sont encadrées par <TD> </TD>
La bordure des cellules peut être absente (border=0) ou présente (border=x)
<!DOCTYPE html >
<html>
<head>
<title> Tableau HTML 1 </title>
<meta charset="utf-8">
</head>
<body>
Exemple de tableau de 3 lignes et 4 colonnes (12 cellules)<br>
<table border=4>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
<tr>
<td>C5</td>
<td>C6</td>
<td>C7</td>
<td>C8</td>
</tr>
<tr>
<td>C9</td>
<td>C10</td>
<td>C11</td>
<td>C12</td>
</tr>
</table>
</body>
</html>
Le tableau peut être construit par un programme javascript
<!DOCTYPE html >
<html>
<head>
<title> Tableau HTML 2 </title>
<meta charset="utf-8">
</head>
<body>
Exemple de tableau de 3 lignes et 4 colonnes (12 cellules)<br>
<table border=4>
<script type="text/javascript">
<!--
var numcol=0;
for (l=1;l<4 ;l=l+1 ){
document.write("<tr>");
for (c=1;c<5 ;c=c+1 ){
numcol=numcol+1;
document.write("<td>"+numcol+"</td>");
}
document.write("</tr>");
}
//-->
</script>
</table>
</body>
</html>
Le programme javascript est placé dans le corps de la page HTML (body) et utilise deux itérations une pour les ligne et une pour les colonnes. La variable numcol initialisée à 0 est incrémentée dans la boucle des colonnes.
EXERCICE
Afficher dans chaque cellule le numéro de ligne et le numéro de colonne (Ex: ligne x colonne y)
Solution possible
<!DOCTYPE html >
<html>
<head>
<title> Tableau HTML 3 </title>
<meta charset="utf-8">
</head>
<body>
Exemple de tableau de 3 lignes et 4 colonnes (12 cellules)<br>
<table border=4>
<script type="text/javascript">
<!--
for (l=1;l<4 ;l=l+1 ){
document.write("<tr>");
for (c=1;c<5 ;c=c+1 ){
document.write("<td>"+"ligne "+l+" colonne "+c+"</td>");
}
document.write("</tr>");
}
//-->
</script>
</table>
</body>
</html>
Personne n'a encore laissé de commentaire.
Soyez donc le premier !
Boîte essais