Créée le, 19/06/2015

 Mise à jour le, 29/06/2020

Visiteurs N°  




Accueil
Site en Français Site en Anglais Nos Promotions Nouveau Blog Nouveautés Moteur de Recherche Votre Caddie Pour Vos Achats Votre Espace Membre Vos Signets et Vos Jeux Préférés Page de Bienvenue Statique
Sommaires
Électronique Fondamentale Technologie Fondamentale Testez vos Connaissances Électronique Théorique Digitale Électronique Pratique Digitale Lexique Électronique Numérique Data book TTL Data book CMOS Dépannage TVC Mathématique
Micro-ordinateurs
Théorique des Micro-ordinateurs Testez vos Connaissances Pratique des Micro-ordinateurs Glossaires sur les Ordinateurs
Physique
La lumière Champ d'action Rayonnement Électromagnétique
Technologies
Classification des Résistances Identification des Résistances Classification des Condensateurs Identification des Condensateurs
Formulaires Mathématiques
Géométrie Physique 1. - Électronique 1. 2. - Électronique 1. 3. - Électrotechnique 1. 4. - Électromagnétisme
Accès à tous nos Produits
E. T. F. - Tome I - 257 Pages E. T. F. - Tome II - 451 Pages E. T. F. - Tome III - 611 Pages E. T. D. - Tome I - 610 Pages N. B. M. - Tome I - 201 Pages E. T. M. - Tome I - 554 Pages Business à Domicile Ouvrages 34 pages gratuits Nos E-books Logiciel Géométrie Logiciel Composants Électroniques
Aperçu de tous nos Produits
E. T. F. - Tome I - 257 Pages E. T. F. - Tome II - 451 Pages E. T. F. - Tome III - 611 Pages E. T. D. - Tome I - 610 Pages E. T. M. - Tome I - 554 Pages Logiciel Géométrie Logiciel Composants Électroniques
Nos Leçons aux Formats PDF
Électronique Fondamentale Technologie Fondamentale Électronique Théorique Digitale Électronique Pratique Digitale Théorique des Micro-ordinateurs Mathématiques
Informatique
Dépannage Win98 et WinXP et autres Dépannage PC Glossaire HTML et Programmes PHP et Programmes JavaScript (en cours de travaux) Création de plusieurs Sites
Forums
Forum Électronique et Infos Forum Électronique et Poésie
Divers et autres
Formulaire des pages perso News XML Statistiques CountUs Éditeur JavaScript Nos Partenaires et nos Liens Utiles Gestionnaire de Partenariat Nos Partenaires MyCircle Sondages 1er Livre d'Or 2ème livre d'Or Annuaires Sites

Signets :
  Leçons suivantes        Leçons précédentes     Bas de page
  Cliquez ici pour la leçon suivante ou dans le sommaire prévu à cet effet


Les Tableaux HTML :


Les Tableaux HTML :


HTML permet de réaliser des tableaux avec réglage de l'encadrement, de la taille et de l'espacement des cellules. Cette leçon décrit les principales balises permettant de présenter un tableau.

La définition de la structure d'un tableau est tout à fait comparable à celle des listes que nous avons vu jusqu'à présent. On définit une balise de début de tableau, puis on décrit le tableau ligne par ligne et enfin, on indique la balise de fin de tableau. Cette structure est suffisamment simple pour que le tableau soit facile à maintenir (modification du nombre de lignes et de colonnes).

Une cellule peut contenir les éléments suivants :

<TABLE> :

La balise <TABLE> permet l'ouverture d'un tableau et la balise de fin de tableau est spécifiée par </TABLE>. On peut indiquer les attributs suivants : BORDER, CELLPADDING, CELLSPACING, la valeur de ces attributs est spécifiée en point (pixels). Leur spécification est indiquée à la figure 1 ci-dessus.

Un attribut supplémentaire permet de contraindre le tableau à occuper un certain pourcentage de la largeur de la fenêtre du browser. Il s'agit de l'attribut WIDTH.

Exemple d'utilisation d'un tableau N° 1 :

<HTML>

           <HEAD>

               <TITLE> Exemple d'un tableau </TITLE>

           </HEAD>

       <BODY>

            <CENTER> <BR> <BR> <BR>

            <TABLE BORDER="6" CELLSPACING="6" CELLPADDING="10">

            <H1> <font color="#005500"> Sans attribut WIDTH </font> </H1>

            <TD> <H2> A </H2> </TD> <TD> <H2> B </H2> </TD> <TD> <H2> C </H2> </TD> <TR> <TD> <H2> D </H2> </TD> <TD> <H2> E </H2> </TD> <TD> <H2> F </H2> </TD> </TR>

            <TABLE BORDER="6" WIDTH = "65%" CELLSPACING="6" CELLPADDING="10"> <BR> <BR> <BR> <TR VALIGN="CENTER" ALIGN="CENTER">

            <H1> <font color="#005500"> Avec attribut WIDTH &agrave; 65% </font> </H1>

            <TD> <H2> A </H2> </TD> <TD> <H2> B </H2> </TD> <TD> <H2> C </H2> </TD>

            <TR VALIGN="CENTER" ALIGN="CENTER"> <TD> <H2> D </H2> </TD> <TD> <H2> E </H2> </TD> <TD> <H2> F </H2> </TD> </TR>

            </TABLE>

            </CENTER>

       </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 1].

<TR> :

La balise <TR> débute une ligne du tableau qui sera terminée par une balise de fin </TR>. Elle admet l'attribut VALIGN, pour obtenir un alignement du texte dans le sens vertical de la cellule, ALIGN pour l'alignement horizontal. Ces attributs d'alignement s'appliquent pour toutes les cellules de la ligne, sauf si un attribut de <TD> vient contredire l'alignement.

Les valeurs prises par les attributs d'alignement peuvent être : TOP (haut), BOTTOM (bas), MIDDLE (centrage vertical), RIGHT (droite), CENTER (centré horizontalement), LEFT (gauche). Ceci est valable pour l'ensemble des balises.

<TR VALIGN="center" ALIGN="left"> <TD> 1 </TD> <TD> 10 </TD> <TD> 100 </TD> <TD> 1 000 </TD> <TD> 10 000 </TD> <TD> 100 000 </TD>

Exemple d'utilisation d'un tableau N° 2 :

<HTML>

           <HEAD>

               <TITLE> Exemple d'un tableau N&deg; 2 </TITLE>

           </HEAD>

       <BODY>

            <CENTER> <BR> <BR> <BR>

            <TABLE BORDER="6" CELLSPACING="6" CELLPADDING="10">

            <H1> <font color="#005500"> Sans attribut WIDTH </font> </H1>

            <TR VALIGN="center" ALIGN="left"> <TD> 1 </TD> <TD> 10 </TD> <TD> 100 </TD> <TD> 1 000 </TD> <TD> 10 000 </TD> <TD> 100 000 </TD>

            </TABLE>

            </CENTER>

       </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 2].

<TD> :

La balise <TD> délimite le début d'une cellule. Elle admet l'attribut VALIGN, pour obtenir un alignement du texte dans le sens vertical de la cellule, ALIGN pour l'alignement horizontal, COLSPAN pour définir une cellule dont la largeur est un multiple de la colonne de base, et ROWSPAN pour définir une cellule dont la hauteur est un multiple de la ligne (voir illustration de l'utilisation de rowspan et colspan, ci-dessous figure 2.

<TR ALIGN="LEFT"> <TD> 10 </TD> <TD ALIGN="CENTER"> 100 </TD> <TD ALIGN="RIGHT"> 1 000 </TD> </TR>

Exemple d'utilisation d'un tableau N° 3 :

<HTML>

           <HEAD>

               <TITLE> Exemple d'un tableau N&deg; 3 </TITLE>

           </HEAD>

       <BODY>

            <CENTER> <BR> <BR> <BR>

            <TABLE BORDER = "6" WIDTH = "50%" CELLSPACING = "6" CELLPADDING = "10">

            <H1> <font color="#005500"> Avec attribut WIDTH &agrave; 50% </font> </H1>

            <TR ALIGN="LEFT"> <TD> 10 </TD> <TD ALIGN="CENTER"> 100 </TD> <TD ALIGN="RIGHT"> 1 000 </TD> </TR>

            </TABLE>

            </CENTER>

       </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 3].

Dans les tableaux, l'ajustement de la taille des cellules est automatique, la largeur d'une cellule dépend du plus long texte inscrit dans une des cellules de la colonne.

Par défaut, si la ligne est trop longue (> 64 caractères) très dépendant du browser mais ce dernier, la coupe en plusieurs lignes selon les navigateurs.

L'attribut NOWRAP de la balise <TD> force le browser à inscrire tout le texte de la cellule sur une seule ligne.

Exemple d'utilisation d'un tableau N° 4 :

<HTML>

           <HEAD>

               <TITLE> Exemple d'un tableau N&deg; 4 </TITLE>

           </HEAD>

       <BODY>

            <CENTER> <BR> <BR> <BR>

            <TABLE BORDER = "6" WIDTH = "50%" CELLSPACING = "6" CELLPADDING = "10">

            <H1> <font color="#005500"> Avec attribut WIDTH &agrave; 50% Sans NOWRAP</font> </H1>

            <TR> <TD align="CENTER"> <i> Cahier &agrave; spirales de couleur verte, au format de 21 cm par 29,7 cm.

            150 Pages, petits carreaux papier 100 grammes et couverture tr&egraves jolie. </i> </TD> <TD ALIGN="CENTER"> 100 </TD> <TD ALIGN="RIGHT"> 1000 </TD> </TR>

            </TABLE>

            </CENTER>

       </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 4].

Exemple d'utilisation d'un tableau N° 5 :

<HTML>

           <HEAD>

               <TITLE> Exemple d'un tableau N&deg; 5 </TITLE>

           </HEAD>

       <BODY>

            <CENTER> <BR> <BR> <BR>

            <TABLE BORDER = "6" WIDTH = "50%" CELLSPACING = "6" CELLPADDING = "10">

            <H1> <font color="#005500"> Avec attribut WIDTH &agrave; 50% AVEC NOWRAP</font> </H1>

            <TR> <TD align="CENTER" NOWRAP> <i> Cahier &agrave; spirales de couleur verte, au format de 21 cm par 29,7 cm.

            150 Pages, petits carreaux papier 100 grammes et couverture tr&egraves jolie. </i> </TD> <TD ALIGN="CENTER"> 100 </TD> <TD ALIGN="RIGHT"> 1000 </TD> </TR>

            </TABLE>

            </CENTER>

       </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 5].

Illustration de l'utilisation de ROWSPAN et COLSPAN :

<TR ALIGN="CENTER"> <TD> </TD> <TD> </TD> <TD> <H1> A </H1> </TD> <TD> <H1> B </H1> </TD> <TD> <H1> C </H1> </TD> </TR>

<TR ALIGN="CENTER"> <TD ROWSPAN="2" COLSPAN="2"> <H1> 1 </H1> </TD> <TD> <H1> D </H1> </TD> <TD> <H1> E </H1> </TD> <TD> <H1> F </H1> </TD> </TR>

<TR ALIGN="CENTER"> <TD> <H1> G </H1> </TD> <TD> <H1> H </H1> </TD> <TD> <H1> I </H1> </TD>

Exemple d'utilisation d'un tableau N° 6 :

<HTML>

           <HEAD>

               <TITLE> Exemple d'un tableau N&deg; 6 </TITLE>

           </HEAD>

       <BODY>

            <CENTER> <BR> <BR> <BR>

            <TABLE BORDER = "6" WIDTH = "50%" CELLSPACING = "6" CELLPADDING = "10">

            <H1> <font color="#005500"> Avec attribut WIDTH &agrave; 50% </font> </H1>

            <TR ALIGN="CENTER"> <TD> </TD> <TD> </TD> <TD> <H1> A </H1> </TD> <TD> <H1> B </H1> </TD> <TD> <H1> C </H1> </TD> </TR>

            <TR ALIGN="CENTER"> <TD ROWSPAN="2" COLSPAN="2"> <H1> 1 </H1> </TD> <TD> <H1> D </H1> </TD> <TD> <H1> E </H1> </TD> <TD> <H1> F </H1> </TD> </TR>

            <TR ALIGN="CENTER"> <TD> <H1> G </H1> </TD> <TD> <H1> H </H1> </TD> <TD> <H1> I </H1> </TD>

            </TABLE>

            </CENTER>

       </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 6].

Remarquez bien que le tableau est construit sur une matrice de 5 par 3, et que l'on obtient des cases vides, en faisant suivre deux balises <TD> <TD>

<TH> :

La balise <TH> est identique à <TD>, mais le texte des cellules est considéré comme du texte d'en-tête. Il est automatiquement centré et est mis en caractères gras. Cette balise admet les mêmes paramètres que la balise <TD> (valign, align, colspan, rowspan, nowrap).

<TR> <TH> <font size="6" color="#800008"> Article </font> </TH> <TH> <font size="6" color="#800008"> R&eacute;f&eacute;rence </font> </TH> <TH> <font size="6" color="#800008"> Prix </font> </TH> <TH> <font size="6" color="#800008"> Quantit&eacute; </font> </TH> </TR>

<TR> <TD ALIGN="CENTER"> <font size="6" color="#0000FF"> <i> Cahier </i> </font> </TD> <TD ALIGN="CENTER"> <font size="6" color="#0000FF"> 17 </font> </TD> <TD ALIGN="CENTER"> <font size="6" color="#0000FF"> 12,54 &euro; </font> </TD> <TD ALIGN="CENTER"> <font size="6" color="#0000FF"> 3 </font> </TD> </TR>

Exemple d'utilisation d'un tableau N° 7 :

<HTML>

           <HEAD>

               <TITLE> Exemple d'un tableau N&deg; 7 </TITLE>

           </HEAD>

       <BODY>

            <CENTER> <BR> <BR> <BR>

            <TABLE BORDER = "6" WIDTH = "60%" CELLSPACING = "6" CELLPADDING = "10">

            <H1> <font color="#005500"> Avec attribut WIDTH &agrave; 60% </font> </H1>

            <TR> <TH> <font size="6" color="#800008"> Article </font> </TH> <TH> <font size="6" color="#800008"> R&eacute;f&eacute;rence </font> </TH> <TH> <font size="6" color="#800008"> Prix </font> </TH> <TH> <font size="6" color="#800008"> Quantit&eacute; </font> </TH> </TR>

            <TR> <TD ALIGN="CENTER"> <font size="6" color="#0000FF"> <i> Cahier </i> </font> </TD> <TD ALIGN="CENTER"> <font size="6" color="#0000FF"> 17 </font> </TD> <TD ALIGN="CENTER"> <font size="6" color="#0000FF"> 12,54 &euro; </font> </TD> <TD ALIGN="CENTER"> <font size="6" color="#0000FF"> 3 </font> </TD> </TR>

            </TABLE>

            </CENTER>

       </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 7].

<CAPTION> :

Cette balise permet de placer un titre au-dessus (attribut ALIGN="TOP") ou au-dessous (attribut ALIGN="BOTTOM") du tableau.

<CAPTION ALIGN="BOTTOM">

<b> Fournitures </b>

</CAPTION>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 8].

L'attribut BGCOLOR :

Cet attribut, selon qu'il est appliqué à la balise <TABLE>, à la balise <TR> ou à la balise <TD>, permet de donner une couleur de fond à un tableau, une ligne, ou à une cellule d'un tableau. La couleur est codée selon le modèle RGB.

Exemple de tableau intégrant divers éléments :

Exemple d'utilisation d'un tableau intégrant divers éléments N° 9 :

<HTML>

           <HEAD>

               <TITLE> Tableau Int&eacute;grant divers &Eacute;l&eacute;ments N&deg; 9 </TITLE>

           </HEAD>

       <BODY BGCOLOR="#E2E2E2" LINK="#FF0000" ALINK="#005500" VLINK="#800008">

            <CENTER> <BR> <BR> <BR>

            <font Face="Arial" size="6" color="#005500"> Bienvenue !!! </font>

            <BR> <BR> <BR>

            <TABLE BORDER="4" CELLSPACING="2" CELLPADDING="10" BGCOLOR="#CCCCCC">

                  <CAPTION ALIGN="BOTTOM">

                  <font face="Arial"> <b> Tableaux &agrave; &eacute;l&eacute;ments multiples ! </b> </font>

                  </CAPTION>

            <TR ALIGN="CENTER">

            <TD> <A HREF ="http://www.electronique-et-informatique.fr/sommaire_electronique_fondamentale.html"> <font face="Arial"> Sommaire &eacute;lectronique</A> </font> </TD>

            <TD> <IMG SRC="images/PDF.gif"> </TD>

            <TD> <font face="Arial"> <a href="Page_Tableaux.html"> <b>Retour</b></a> </font> </TD>

            </TR>

            <TR>

            <TD ALIGN="CENTER"> <IMG SRC="images/W.gif"> </TD>

            <TD>

                <UL>

                    <LI> UN </LI>

                    <LI> DEUX </LI>

                    <LI> TROIS </LI>

                    <LI> QUATRE </LI>

                    <LI> CINQ </LI>

                </UL>

            </TD>

            <TD ALIGN="CENTER">

            <A HREF="Page_Tableaux.html"> <button type="submit"> <img src="images/Fleche_Gauche.PNG"> </A> </button>

            </TD>

            </TR>

            <TR>

            <TD ALIGN="CENTER"> <font face="Arial"> <i> Entrez votre Pr&eacute;nom et votre Nom </i> </font> </TD>

            <TD ALIGN="LEFT">

            <FORM METHOD="POST" ACTION="mailto:daniel.robe@orange.fr">

            <font face="Arial"> Nom </font>&nbsp;&nbsp;&nbsp;&nbsp; <INPUT NAME="Votre_Nom"> <BR>

            <font face="Arial"> Pr&eacute;nom </font> <INPUT NAME="Votre_Prenom">

            <TD ALIGN="CENTER">

            <INPUT TYPE="SUBMIT" VALUE="CLIC !">

            </FORM>

            </TD>

         </TD>

       </TR>

       </TABLE>

       <BR> <BR> <BR>

       <font face="Arial" size="4" color="#000000"> <a href="Sommaire_HTML_Programmes.php">Retour au sommaire</a> </font>

       </CENTER>

       </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 9].

Ce dernier exemple N° 9, nous avons créé deux pages HTML identiques, les codes restent les mêmes mis à part, le <TITLE> et <A HREF> qu'il faudra changer vos URL et selon vos besoins car, ce ne sont uniquement que des exemples.

Et enfin, nous allons résumer nos leçons des tableaux comme ci-après :

Résumé :

Un tableau quelconque se définit entre les balises <TABLE> et </TABLE>.

A l'intérieur de la première balise, on règle la présentation générale du tableau à l'aide de trois attributs :

  • BORDER définit l'épaisseur du cadre extérieur,

  • CELLPADDING définit l'espace autour du texte d'une cellule,

  • CELLSPACING définit l'espace entre les cellules,

  • WIDTH définit la largeur du tableau relativement à la largeur de la fenêtre du browser.

Le tableau est ensuite décrit ligne par ligne. L'élément définissant une nouvelle ligne est <TR>, qui admet les attributs d'alignement du texte à l'intérieur de toutes les cellules de la ligne :

       VALIGN (Alignement vertical) peut prendre les valeurs suivantes :

  • TOP place le texte en haut de la cellule,

  • BOTTOM place le texte en bas de la cellule,

  • MIDDLE place le texte au centre de la cellule,

       ALIGN (Alignement horizontal) peut prendre les valeurs suivantes :

  • RIGHT place le texte à droite de la cellule,

  • LEFT place le texte à gauche de la cellule,

  • CENTER place le texte au centre de la cellule,

  • </TR> termine la définition d'une ligne,

<TD> est l'élément de départ d'une colonne. Il peut être complété par des attributs VALIGN et ALIGN, qui seront alors prioritaires sur les mêmes valeurs définies dans la balise <TR>.

Deux attributs supplémentaires , COLSPAN et ROWSPAN, permettent de générer des cellules dont la surface est un multiple de la cellule élémentaire. La matrice du tableau définissant le nombre de cellules élémentaires est calculée par le nombre de lignes du tableau (nombre d'instructions <TR>), multiplié par le nombre de cellules (nombre d'instructions <TD> de la ligne définissant le plus de cellules (plus grand nombre de <TD>).

Le nombre de cellules par ligne du tableau est calculé sur la ligne définissant le plus de cellules.

Le dernier attribut de <TD> est NOWRAP, qui empêche de diviser le texte de la cellule en plusieurs lignes.

Enfin, la balise <TH> est une balise fonctionnant de façon similaire à la balise <TD> ; elle admet les mêmes attributs, mais est considérée comme balise de titre d'une cellule. Le centrage du texte et l'utilisation de caractères gras sont automatiques.

Un tableau peut recevoir un titre défini entre les balises <CAPTION> et </CAPTION>. Ce titre peut se situer au-dessus (attribut ALIGN avec la valeur TOP) ou en dessous (ALIGN avec la valeur BOTTOM).

On peut affecter une couleur à un tableau, une ligne ou une colonne à l'aide de l'attribut BGCOLOR.

Fin de cette douzième leçon, la prochaine sera consacrée aux frames concernant le langage HTML.










Nombre de pages vues, à partir de cette date : le 23 MAI 2019

compteur de visite

    




Envoyez un courrier électronique à Administrateur Web Société pour toute question ou remarque concernant ce site Web. 

Version du site : 10. 5. 14 - Site optimisation 1280 x 1024 pixels - Faculté de Nanterre - Dernière modification : 29 JUIN 2020.   

Ce site Web a été Créé le, 14 Mars 1999 et ayant Rénové, en JUIN 2020.