Exercices sur la mise en forme des tableaux en CSS

mise en forme d'un tableau simple en CSS

Écrire une page xHTML contenant un tableau simple :

le tableau occupera toute la zone horizontale d'affichage,
les cellules d'entête seront centrées et écrites en gras et en blanc sur fond noir,
les cellules du corps seront en vert clair et en texte justifié,
les cellules vides seront d'une couleur différente,
Une légende sera positionnée en bas du tableau,

Fichier à produire :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>mise en forme d'un tableau simple.</title>
  <style type="text/css">
 
    h1 {text-align:center;}
 
    table {
      border:solid 3px #F00;
      background-color:#FC9;
      width:100%;
      border-collapse:collapse;
    }
 
    td,th {
      border:solid 1px #000;
      margin:0;
      vertical-align:middle;
    }
 
    th {
      text-align:center;
      font-weight:bold;
      background-color:#000;
      color:#FFF;
      border-color:#FFF;
    }
 
    td {
      empty-cells:hide;
      text-align:justify;
      background-color:#CFC;
    }
 
    caption {
      caption-side:bottom;
      text-align:left;
      color:#060;
    }
 
  </style>
</head>
<body>
  <h1>mise en forme d'un tableau simple.</h1>
  <table>
    <caption>titre du tableau</caption>
    <tr>
      <th>entete1</th>
      <th>entete2</th>
      <th>entete3</th>
    </tr>
    <tr>
      <td>ligne1 col1</td>
      <td></td>
      <td>ligne1 col3</td>
    </tr>
    <tr>
      <td>ligne2 col1</td>
  <td>ligne2 col2</td>
      <td>ligne2 col3</td>
    </tr>
  </table>
 
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide</a> et
    <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS valide</a></p>
</body>
</html>

voir le résultat

mise en forme d'un tableau complexe en CSS

Écrire une page xHTML contenant un tableau complexe. En plus des caractéristiques précédentes il contiendra :

Une légende sera positionné en haut du tableau
un bloc d'entête thead,
un bloc de pied tfoot,
plusieurs blocs de corps tbody,
un groupe de colonnes colgroup,
des colonnes col situées dans le colgroup,
des colonnes vides,

en présentation il faudra que :

les cellules d'entête dans thead aient une mise en forme particulière,
les cellules d'entête dans tfoot aient une mise en forme particulière,
chaque bloc tbody ait une mise en forme particulière,
le groupe de colonnes ait une mise forme particulière,
une colonne située dans le groupe de colonnes ait une mise forme particulière,
les colonne vides seront visibles uniquement dans le premier bloc tbody,

Fichier à produire :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>mise en forme d'un tableau complexe.</title>
  <style type="text/css">
 
 h1 {text-align:center;}
 
 table {
   border:solid 3px #F00;
   background-color:#FC9;
   width:100%;
   border-spacing:2px;
 }
 
 tbody {
   height:9em;
   empty-cells:hide;
   overflow-x:hidden;
   overflow-y:auto;
 }
 
 tbody+tbody {
   empty-cells:show;
   background-color:#888;
 }
 
 tbody+tbody+tbody {
   background-color:#CCC;
 }
 
 tbody+tbody+tbody tr:first-child {
   background-color:#500;
   color:#FFF;
 }
 
 tr {
   margin:0;
   vertical-align:middle;
 }
 
 td,th {
   border:solid 1px #000;
   margin:0;
   vertical-align:middle;
 }
 
 th {
   text-align:center;
   font-weight:bold;
   background-color:#000;
   color:#FFF;
   border-color:#FFF;
 }
 
 thead th {
   background-color:#530;
   color:#FB8;
 }
 
 thead td {
   background-color:#FB8;
   color:#530;
 }
 
 /* CSS 3 */
 tbody:nth-of-type(2) tr:nth-child(3n) {
   background-color:#888;
   color:#530;
 }
 tbody:nth-of-type(2) tr:nth-child(3n+1) {
   background-color:#AAA;
   color:#530;
 }
 tbody:nth-of-type(2) tr:nth-child(3n+2) {
   background-color:#CCC;
   color:#530;
 }
 
 tfoot th {
   background-color:#035;
   color:#8FB;
 }
 
 tfoot td {
   color:#035;
   background-color:#8FB;
 }
 
 td {text-align:justify;}
 
 caption {
   caption-side:top;
   text-align:center;
   color:#060;
   font-weight:bold;
   background-color:#000;
   color:#FFF;
   margin:0.2em 0;
   border:solid 2px #F00;
 }
 
 .colonne2 {background-color:#F80;}
 colgroup {background-color:#8F0}
 
</style>
</head>
<body>
  <h1>mise en forme d'un tableau complexe.</h1>
  <table>
    <caption>titre du tableau</caption>
    <colgroup span="4">
      <col span="3" />
      <col class="colonne2" />
    </colgroup>
    <?php
 
$ncols = 5;
$nl    = 0;
$table_lines = array('head'  => array('thead', 2, 'tête'),
		     'foot'  => array('tfoot', 2, 'pied'),
		     'body1' => array('tbody', 95,'corps1'),
		     'body2' => array('tbody', 8, 'corps2'),
		     'body3' => array('tbody', 4, 'corps3'));
 
foreach ($table_lines as $key => $value) {
  list ($tag, $nlines, $comment) = $value;
 
  printf("<%s>\n", $tag);
  for ($l=0; $l < $nlines; $l++) {
    $nl++;
    print("<tr>\n");
    for ($c=0; $c < $ncols; $c++) {
      if ($l == 0) $cell = 'th'; else $cell = 'td';
      if (($nl + $c)%10 == 0) $text = '';
      else $text = sprintf("%s %d,%d", $comment, $nl, $c);
      printf("<%s>%s</%s>\n", $cell, $text, $cell);
    }
    print("</tr>\n");
  }
  printf("</%s>\n", $tag);
}
?>
  </table>
 
   <p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide</a> et
     <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS valide</a></p>
  </body>
</html>