Exercice HTML : Tableaux

Thème

Réalisation de tableaux HTML.

Utilisés sans bordure (bordure invisible), les tableaux sont aussi souvent utilisés pour :

Remarque : les tableaux HTML sont correctement supportés à partir des versions de navigateurs Netscape 2 à 3 et IExplorer 2 à 3

Balises

Références

Bordures fines

Quel que soit le navigateur utilisé, on peut créer des tableaux avec des bordures fines en utilisant les attributs BORDER="1" (ombrage bordure) et CELLSPACING="0" (largeur bordure).

Par exemple le code suivant : 
      <TABLE BORDER="1" CELLSPACING="0" CELLPADDING="10"
             ALIGN="CENTER">
        <TR>
          <TD>Bonjour</TD><TD>tout le monde !</TD>
        </TR>
      </TABLE>
donne :

Bonjourtout le monde !

Couleur des bordures

Pour IE ≥ 3.0 et Mozilla ≥ 1.0 (mais hélas pas pour Netscape < 6), l'attribut BGCOLOR=... affecte non seulement la couleur de fond des cellules mais aussi la couleur des bordures. On peut ainsi par exemple définir un tableau ayant une bordure fine (de 1 pixel) rouge par le code suivant :

Par exemple le code suivant : 
      <TABLE BORDER="0" CELLPADDING="10" CELLSPACING="1"
             BGCOLOR="red" ALIGN="CENTER">
        <TR BGCOLOR="white">
          <TD>Bonjour</TD><TD>tout le monde !</TD>
        </TR>
      </TABLE>
donne :

Bonjourtout le monde !

Cependant pour faire les choses tout-à-fait proprement, ce qui n'est possible qu'avec des navigateurs supportant complètement les feuilles de style, il faudrait plutôt utiliser les propriétés CSS border-color: couleur; border-style: solid; border-collapse: collapse; associées aux règles TABLE, TR, TH ou TD (voir ci-dessous).

Usage de propriétés CSS

Le tableau ci-dessous s'affichera avec une bordure relief habituelle de 1 pixel dans les navigateurs Web ne supportant pas les feuilles de style CSS, et avec une bordure rouge de 1px dans les navigateurs supportant CSS. Les propriétés utilisées (border-collapse, border, etc...) peuvent être appliquées aux règles TABLE, TR, TH ou TD.

Blabla blabla blabla bla blabla blabla blabla bla blabla blabla 

<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=2
       STYLE="border-collapse: collapse;
              border: 1px solid #ff0000;">
  <TR BGCOLOR="white"><TD>
    Blabla blabla blabla...
  </TD></TR>
</TABLE>
Comme le montre l'exemple ci-dessous, des effets d'encadrement, de couleur, etc... peuvent être obtenus dans de simples paragraphes (donc sans recourir aux tableaux) à l'aide de propriétés de feuilles de style CSS. Cela ne fonctionne bien évidemment qu'avec les navigateurs de dernière génération (i.e. supportant complètement CSS).

Blabla blabla blabla bla blabla blabla blabla bla blabla blabla blabla bla blabla blabla blabla bla blabla blabla blabla bla blabla blabla blabla blabla bla blabla blabla blabla bla blabla blabla blabla bla blabla. 

<P STYLE="
    margin-left: 30px;
    width: 75%;
    color: blue;
    text-align: justify;
    background-color: #f5f5ff;
    border-style: solid;
    border-color: #00aaaa;
    border-left-color: #000088;
    border-width: 1px;
    border-left-width: 10px;
    padding: 2px;
    padding-left: 35px;
    ">
  Blabla blabla blabla...
</P>
Et l'exemple ci-dessous montre comment changer dynamiquement la couleur d'arrière-plan de lignes ou de cellules d'un tableau lorsque le curseur les survole.

  un     deux  
  trois     quatre  

Une autre technique, basée sur les feuilles de styles CSS, permettrait de faire la même chose, pour toutes les lignes d'un tableau, simplement avec :

  <STYLE TYPE="text/css">
    <!--
      tr:hover { background-color: lightblue; }
    -->
  </STYLE>
  
<TABLE ALIGN=center BORDER=1 CELLSPACING=0>
<TR onMouseOver="this.bgColor='yellow'"
    onMouseOut="this.bgColor='white'">
  <TD>un</TD>
  <TD>deux</TD>
</TR>
<TR>
  <TD onMouseOver="this.bgColor='lime'"
      onMouseOut="this.bgColor='white'">
    trois</TD>
  <TD onMouseOver="this.bgColor='aqua'"
      onMouseOut="this.bgColor='white'">
    quatre</TD>
</TR>
</TABLE>

Donnée de l'exercice

Réaliser le tableau ci-dessous :

Tableau 1 : abc def ghi jkl mno pqr stu vwx yz.
Nnnnnn Aaaaaaaaaaaaa
Bbbbbbbb Cccccccc
Un Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla Xxxxx
Deux Yyyyy Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla

Corrigé de l'exercice

<CENTER><TABLE BGCOLOR="SILVER" WIDTH="80%" CELLSPACING="10" BORDER="3" CELLPADDING="5">
<CAPTION ALIGN="BOTTOM"><B>Tableau 1</B> : abc def ghi jkl mno pqr stu vwx yz.</CAPTION>
<TR BGCOLOR="RED" >
    <TH ROWSPAN="2" WIDTH="80">Nnnnnn</TH>
    <TH COLSPAN="2">Aaaaaaaaaaaaa</TH>
</TR>
<TR BGCOLOR="GRAY">
    <TH WIDTH="40%">Bbbbbbbb</TH>
    <TH WIDTH="40%">Cccccccc</TH>
</TR>
<TR>
    <TH BGCOLOR="GRAY">Un</TH>
    <TD>Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
	blabla blabla blabla blabla blabla</TD>
    <TD VALIGN="TOP">Xxxxx</TD>
</TR>
<TR>
    <TH BGCOLOR="GRAY">Deux</TH>
    <TD VALIGN="BOTTOM">Yyyyy</TD>
    <TD>Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
	blabla blabla blabla</TD>
</TR>
</TABLE></CENTER>

Exercices HTML © J.-D. Bonjour / ENAC-IT1, EPFL / Révision 13.4.2006