Catégories

 

Simple tableau

Le 4 décembre 2008

Un tableau qui n'est pas formaté se présente de la manière suivante :

Date Titre Auteur Quantité Prix Unitaire Prix Total
29/07/2007 Le Finistère Pierre Lapointe 3 15.90 € 47.70 €
15/08/2007 L'abc des bonsaïs Alain Barbier 2 29.00 € 58.00 €
10/09/2007 L'espion qui venait du froid John le Carré 5 9.90 € 49.50 €

 

 Code XHTLM  
 
<table style="margin: 20px auto 0px auto;"   width="80%"  
summary="Facture de livres" cellpadding="5" cellspacing="0" border="0">
  
<!-- Données du tableau -->
<tbody valign="top">

<tr>
 <td class="lignec">Date </td>
 <td class="lignec">Titre </td>
 <td class="lignec">Auteur</td>
 <td class="ligne10">Quantité </td>
 <td class="lignec">Prix Unitaire </td>
 <td class="lignec">Prix Total </td>
</tr>

<tr>
 <td class="ligne15">29/07/2007</td>
 <td>Le Finistère</td>
 <td>Pierre Lapointe</td>
 <td class="ligne10">3</td>
 <td class="ligner">15.90 €</td>
 <td class="ligner">47.70 €</td>
</tr>

<tr>
 <td class="ligne15">15/08/2007</td>
 <td>L'abc des bonsaïs</td>
 <td>Alain Barbier</td>
 <td class="ligne10">2</td>
 <td class="ligner">29.00 €</td>
 <td class="ligner">58.00 €</td>
</tr>

<tr>
<td class="ligne15">10/09/2007</td>
 <td>L'espion qui venait du froid</td>
 <td>John le Carré</td>
 <td class="ligne10">5</td>
 <td class="ligner">9.90 €</td>
 <td class="ligner">49.50 €</td>
</tr>

</tbody>

</table>

 

 Code CSS  
 
.ligne10 {width:10%; text-align:center;}
.ligne15 {width:15%; text-align:center;}
.lignec {text-align:center;}
.ligner {text-align:right;}

 

Le code CSS a pour but de fixer uniquement la largeur des colonnes et le format des textes.

Tableau formaté

Le 4 décembre 2008
Facture de votre commande de livres
Date Titre Auteur Quantité Prix Unitaire Prix Total
29/07/2007 Le Finistère Pierre Lapointe 3 15.90 € 47.70 €
15/08/2007 L'abc des bonsaïs Alain Barbier 2 29.00 € 58.00 €
10/09/2007 L'espion qui venait du froid John le Carré 5 9.90 € 49.50 €

 

Pour améliorer la présentation nous devons ajouter les codes suivants :

 Code CSS  
 
.ligne1n{background-color:#c6c3bd;color:maroon;text-align:left;vertical-align: top;}
.ligne2n{background-color:#cccccc;color:maroon;text-align:left;vertical-align: top;}
.ligne1r{background-color:#c6c3bd;color:maroon;text-align:right;vertical-align: top;}
.ligne2r{background-color:#cccccc;color:maroon;text-align:right;vertical-align: top;}
.ligne1c{background-color:#c6c3bd;color:maroon;text-align:center;vertical-align: top;}
.ligne2c{background-color:#cccccc;color:maroon;text-align:center;vertical-align: top;}

.ligne10 {width:10%; text-align:center;}
.ligne15 {width:15%; text-align:center;}
.lignec {text-align:center;}
.ligner {text-align:right;}

 

 Code XHTLM  
 
<table style="border-collapse:collapse; margin: 20px auto 0px auto;"   
width="80%"  summary="Facture de livres" cellpadding="5" cellspacing="0">
<caption style="font: bold 20px/40px verdana; color: blue;">
Facture de votre commande de livres</caption>
   
<thead>
 <tr>
 <th>Date </th>
 <th>Titre </th>
 <th>Auteur</th>
 <th>Quantité </th>
 <th>Prix Unitaire </th>
 <th>Prix Total </th>
</tr>
</thead>

<!-- Données du tableau -->
<tbody>
<tr>
 <td class="ligne1n">29/07/2007</td>
 <td class="ligne1n">Le Finistère</td>
 <td class="ligne1n">Pierre Lapointe</td>
 <td class="ligne1c">3</td>
 <td class="ligne1r">15.90 €</td>
 <td class="ligne1r">47.70 €</td>
</tr>
<tr>
 <td class="ligne2n">15/08/2007</td>
 <td class="ligne2n">L'abc des bonsaïs</td>
 <td class="ligne2n">Alain Barbier</td>
 <td class="ligne2c">2</td>
 <td class="ligne2r">29.00 €</td>
 <td class="ligne2r">58.00 €</td>
</tr>
<tr>
 <td class="ligne1n">10/09/2007</td>
 <td class="ligne1n">L'espion qui venait du froid</td>
 <td class="ligne1n">John le Carré</td>
 <td class="ligne1c">5</td>
 <td class="ligne1r">9.90 €</td>
 <td class="ligne1r">49.50 €</td>
</tr>
</tbody>
</table>

 

Dans cet exemple un titre a été donné au tableau et le code CSS permet de mettre en couleur les lignes et de fixer le format des textes

Tableau avec fusion des lignes et des colonnes

Le 4 décembre 2008
Fusion sur 3 lignes (rowspan="3") Fusion de 2 colonnes (colspan="2")
Alignement de la table au centre de la page Alignement du texte au centre de la cellule (align="center")
Le texte de cette cellule est aligné en haut Cellule par defaut (alignement vertical centré)
Les 3 cellules sont fusionnées (colspan="3")

 

 Code XHTLM  
 
<table border="1" 
style="background-color: silver; margin: 20px auto;" 
width="600" cellspacing="0" cellpadding="8">

<tr style="background-color: #66ff33">
 <th rowspan="3" style="background-color: #006666">
 <i>Fusion sur 3 lignes (rowspan="3")</i></th>
 <th colspan="2" align="center" style="color: #ff0000">
 Fusion de 2 colonnes (colspan="2")</th>
</tr>

<tr>
 <td>Alignement de la table au centre de la page</td>
 <td align="center">Alignement du texte au centre de la cellule (align="center")</td> 
</tr>
		
<tr>
 <td style="height: 175px" valign="top">Le texte de cette cellule est aligné en haut</td>
 <td>Cellule par defaut (alignement vertical centré)</td>
</tr> 

<tr>
 <td colspan="3" align="center">Les 3 cellules sont fusionnées (colspan="3")</td>
 </tr>
</table>

 

Tableau pour présentation de photos

Le 4 décembre 2008
Bureen Connemara Falaises de Moher
Le Burren Le Connemara Les falaises de Moher
La chaussée des géants Lac d'Irlande Le lac de killarney
La chaussée des géants Lac d'Irlande Le lac de killarney
Le parc national de glenveagh La peninsule de rosguill Le Burren
Le parc national de glenveagh La peninsule de rosguill Le Burren

 

 Code XHTLM  
 
<table id="sample" cellspacing="2">
<tr class="toprow">
 <td><img alt="" src="" height="144" width="180" /></td>
 <td><img alt="" src="" height="144" width="180" /></td>
 <td><img alt="r" src="" height="144" width="180" /></td>
</tr>

<tr>
 <td class="datacenter"></td>
 <td class="datacenter"></td>
 <td class="datacenter"></td>
</tr>

<tr class="toprow">
 <td><img alt="" src="" height="144" width="180" /></td>
 <td><img alt="" src="" height="144" width="180" /></td>
 <td><img alt="" src="" height="144" width="180" /></td>
</tr>

<tr>
 <td class="datacenter"></td>
 <td class="datacenter"></td>
 <td class="datacenter"></td>
</tr>

<tr class="toprow">
 <td><img alt="" src="" height="144" width="180" /></td>
 <td><img alt="" src="" height="144" width="180" /></td>
 <td><img alt="" src="" height="144" width="180" /></td>
</tr>

<tr>
 <td class="datacenter"></td>
 <td class="datacenter"></td>
 <td class="datacenter"></td>
</tr>

</table>

 

 Code CSS  
 
table#sample {
    background-color:#FFFFFF;
    border: solid #000 3px;
    width: 570px;
		margin: 10px auto;}

table#sample td {
    padding: 5px;
    border: solid #000 1px;}

.data {
    color: #000000;
    text-align: right;
    background-color: #CCCCCC;}

.datacenter {
    color: #000000;
    text-align: center;
    background-color: #CCCCCC;
		 width: 200px;}

.toprow {
    font-style: italic;
    text-align: center;
    background-color: #FFFFCC;}

.leftcol {
    font-weight: bold;
    text-align: left;
    width: 150px;
    background-color: #CCCCCC;}

 

© Copyright 2007, André Willemijns WebSite

Valid XHTML 1.0 Strict