© 2004-2015 
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>
© 2004-2015
Document généré en 0.1 seconde