Prévisualiser...  Imprimer...  Imprimer la page...
Prévisualiser...  Imprimer...  Imprimer la section...
 
MenuMobil

menu mob

 
Vous êtes ici :   Accueil » Tableau HTML
menu_deroulant_lineaire
rss Cet article est disponible en format standard RSS pour publication sur votre site web :
http://surgand.com/prog/data/fr-articles.xml

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>


Date de création : 18/05/2015 11:27
Catégorie : Boîte essais - Essais
Page lue 7060 fois
  Suivant


Réactions à cet article

Personne n'a encore laissé de commentaire.
Soyez donc le premier !

Boîte essais
Préférences

Se reconnecter :
Votre nom (ou pseudo) :
Votre mot de passe


  Nombre de membres 5 membres
Connectés :
( personne )
Snif !!!
Calendrier
Lettre d'information
Pour avoir des nouvelles de ce site, inscrivez-vous à notre Newsletter.
Abonné
( personne )
Snif !!!