Les Tutos de Gabriel

Faire un tableau en HTML5

Quelques exemples

Transparence

Avant-propos

Cette page est destinée aux personnes connaissant le Html5, le Css3 et le Php.

Il peut arriver que certains tableaux ne nécessitent pas de mise à jour, parce que les données de varieront pas, exemple des distances kilométriques.

Pour d'autres tableaux, vous pourrez avoir de nombreuses données, et à l'aide des fonctions Php et des variables, vous saurez alors en créer avec un nombre important de lignes, et des opérations mathématiques ou comptables.

Si on n'a pas beaucoup de données on aura alors intérêt à faire directement le tableau.

Tableaux fixes :

1 - Commencez en créant votre page dans votre table "sommaire" de votre base de données

Comme nous allons utiliser, dans notre page, plusieurs fois le même tableau fixe, nous en écrivons le contenu sous forme d'une variable "$tableau1"

2 - Au début de votre page, écrivez ceci :
<?php
$tableau1 = ' /*Début de notre tableau, ne pas oublier le signe "'" */
<caption>Distances en kilomètres</caption>
<thead>
<tr>
<th></th>
<th>Lille</th>
<th>Strasbourg</th>
<th>Paris</th>
<th>Orléans</th>
<th>Tours</th>
<th>Marseille</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lille</td>
<td>0</td>
<td>524</td>
<td>225</td>
<td>348</td>
<td>455</td>
<td>1000</td>
</tr>
<tr>
<td>Strasbourg</td>
<td>524</td>
<td>0</td>
<td>491</td>
<td>587</td>
<td>694</td>
<td>801</td>
</tr>
<tr>
<td>Paris</td>
<td>225</td>
<td>491</td>
<td>0</td>
<td>132</td>
<td>239</td>
<td>775</td>
</tr>
<tr>
<td>Orléans</td>
<td>348</td>
<td>587</td>
<td>132</td>
<td>0</td>
<td>118</td>
<td>758</td>
</tr>
<tr>
<td>Tours</td>
<td>455</td>
<td>694</td>
<td>239</td>
<td>118</td>
<td>0</td>
<td>798</td>
</tr>
<tr>
<td>Marseille</td>
<td>1000</td>
<td>801</td>
<td>775</td>
<td>758</td>
<td>798</td>
<td>0</td>
</tr>
</tbody>
?>

3 - Ensuite écrivez ceci :
<h3>Exemple 1:</h3>
<table>
<?php echo $tableau1; ?>
</table>

Résultat : Exemple 1

Distances en kilomètres par autoroutes
Lille Strasbourg Paris Orléans Tours Marseille
Lille 0 524 225 348 455 1000
Strasbourg 524 0 491 587 694 801
Paris 225 491 0 132 239 775
Orléans 348 587 132 0 118 758
Tours 455 694 239 118 0 798
Marseille 1000 801 775 758 798 0

Cet exemple n°1 manque un peu de mise en forme. Il faut donc la régler avec le CSS.

4 - Ouvrez votre page "vues/standard.php"

5 - Changez et enregistrez le fichier sous le nom : "vues/tableau.php"

6 - Dans le "head" de cette page, ajoutez la ligne colorée pour le css spécifique aux tableaux :
...........
<link rel="stylesheet" media="screen" type="text/css" title="Gabarit de pages" href="css/gabarit.css">
<link rel="stylesheet" media="screen" type="text/css" title="Gabarit de pages" href="css/tableau.css">
<?php
if ((isset($couleur))......

7 - Sauvegardez le fichier.

8 - Dans votre table "sommaire", modifiez éventuellement le champ "vue" pour lui donner la valeur "tableau"

9 - Créez maintenant un fichier "css/tableau.css"

Dans ce fichier, nous allons maintenant créer des balises "id" qui seront spécifiques à nos tableaux.

Pour cet exemple, nous reprenons le même tableau1 auquel nous allons attribuer une id = "tablekmr2" (pour table kilométrique route 2).

10 - Ecrivez :
#tablekmr2 { border-collapse: collapse;} /* Les bordures du tableau seront collées*/
#tablekmr2 td, #tablekmr2 th { border: 1px solid #000; text-align: right; font-size: 0.8em;} /*Nous attribuons une bordure de 1px trait coloris noir à chaque cellule, et le texte sera aligné à droite, taille 0.8em.*/

11 - Dans votre page, écrivez :
<h3>Exemple 2 :</h3>
<table id="tablekmr2">
<?php echo $tableau1; ?>
</table>

Résultat : Exemple 2

Distances en kilomètres par autoroutes
Lille Strasbourg Paris Orléans Tours Marseille
Lille 0 524 225 348 455 1000
Strasbourg 524 0 491 587 694 801
Paris 225 491 0 132 239 775
Orléans 348 587 132 0 118 758
Tours 455 694 239 118 0 798
Marseille 1000 801 775 758 798 0

Nous gardons toujours le même tableau pour continuer avec notre troisième exemple et nous allons créer une deuxième id = "tablekmr3".
Cet "id" aura les mêmes premières lignes css qui seront communes. Il suffit donc de reprendre les premières lignes et d'y ajouter :

12 - Ecrivez :
#tablekmr2, #tablekmr3 { border-collapse: collapse;} /* Les bordures du tableau seront collées*/
#tablekmr2 td, #tablekmr2 th, #tablekmr3 td, #tablekmr3 th { border: 1px solid #000; text-align: right; font-size: 0.8em;} /*Nous attribuons une bordure de 1px trait coloris noir à chaque cellule, et le texte sera aligné à droite, taille 0.8em.*/

13 - Ajoutez à la suite de votre css :
#tablekmr2, #tablekmr3 { border-collapse: collapse; /* Les bordures du tableau seront collées*/}
#tablekmr2 td, #tablekmr2 th, #tablekmr3 td, #tablekmr3 th { border: 1px solid #000; text-align: right; font-size: 0.8em;} /*Nous attribuons une bordure de 1px trait coloris noir à chaque cellule, et le texte sera aligné à droite, taille 0.8em.*/
#tablekmr3 caption { border: 2px solid #000; background-color: #0000ff; color: #fff;} /*réglage du titre*/

14 - Et dans la page, écrivez :
<h3>Exemple 3 :</h3>
<table id="tablekmr3">
<?php echo $tableau1; ?>
</table>

Résultat : Exemple 3

Distances en kilomètres par autoroutes
Lille Strasbourg Paris Orléans Tours Marseille
Lille 0 524 225 348 455 1000
Strasbourg 524 0 491 587 694 801
Paris 225 491 0 132 239 775
Orléans 348 587 132 0 118 758
Tours 455 694 239 118 0 798
Marseille 1000 801 775 758 798 0

On continue de la même façon pour mettre des cadres rouges au thead et au tbody :

15 - Ecrivez :
#tablekmr2, #tablekmr3, #tablekmr4 { border-collapse: collapse;} /* Les bordures du tableau seront collées*/
#tablekmr2 td, #tablekmr2 th,
#tablekmr3 td, #tablekmr3 th,
#tablekmr4 td, #tablekmr4 th
{ border: 1px solid #000; text-align: right; font-size: 0.8em;} /*Nous attribuons une bordure de 1px trait coloris noir à chaque cellule, et le texte sera aligné à droite, taille 0.8em.*/

16 - Ajoutez à la suite de votre css :
#tablekmr2, #tablekmr3, #tablekmr4 { border-collapse: collapse; /* Les bordures du tableau seront collées*/}
#tablekmr2 td, #tablekmr2 th,
#tablekmr3 td, #tablekmr3 th,
#tablekmr4 td, #tablekmr4 th { border: 1px solid #000; text-align: right; font-size: 0.8em;} /*Nous attribuons une bordure de 1px trait coloris noir à chaque cellule, et le texte sera aligné à droite, taille 0.8em.*/
#tablekmr3 caption, #tablekmr4 caption { border: 2px solid #000; background-color: #0000ff; color: #fff;} /*réglage du titre*/
#tablekmr4 thead, #tablekmr4 tbody { border: 2px solid #f00; background-color: #82aefb;}/*Place une bordure rouge et un fond bleu clair*/

17 - Et dans la page, écrivez :
<h3>Exemple 4 :</h3>
<table id="tablekmr4">
<?php echo $tableau1; ?>
</table>

Résultat : Exemple 4

Distances en kilomètres par autoroutes
Lille Strasbourg Paris Orléans Tours Marseille
Lille 0 524 225 348 455 1000
Strasbourg 524 0 491 587 694 801
Paris 225 491 0 132 239 775
Orléans 348 587 132 0 118 758
Tours 455 694 239 118 0 798
Marseille 1000 801 775 758 798 0

Nous voyons qu'il manque une bordure rouge à droite de la première colonne qui liste les villes.
Nous allons donc encore continuer de la même façon, en ajoutant une id="tablekm5"

18 - Ecrivez :
#tablekmr2, #tablekmr3, #tablekmr4, #tablekmr5 { border-collapse: collapse;} /* Les bordures du tableau seront collées*/
#tablekmr2 td, #tablekmr2 th,
#tablekmr3 td, #tablekmr3 th,
#tablekmr4 td, #tablekmr4 th,
#tablekmr5 td, #tablekmr5 th
{ border: 1px solid #000; text-align: right; font-size: 0.8em;} /*Nous attribuons une bordure de 1px trait coloris noir à chaque cellule, et le texte sera aligné à droite, taille 0.8em.*/

19 - Ajoutez à la suite de votre css :
#tablekmr2, #tablekmr3, #tablekmr4, #tablekmr5 { border-collapse: collapse; /* Les bordures du tableau seront collées*/}
#tablekmr2 td, #tablekmr2 th,
#tablekmr3 td, #tablekmr3 th,
#tablekmr4 td, #tablekmr4 th,
#tablekmr5 td, #tablekmr5 th { border: 1px solid #000; text-align: right; font-size: 0.8em;} /*Nous attribuons une bordure de 1px trait coloris noir à chaque cellule, et le texte sera aligné à droite, taille 0.8em.*/
#tablekmr3 caption, #tablekmr4 caption, #tablekmr5 caption { border: 2px solid #000; background-color: #0000ff; color: #fff;} /*réglage du titre*/
#tablekmr4 thead, #tablekmr4 tbody,
#tablekmr5 thead, #tablekmr5 tbody
{ border: 2px solid #f00; background-color: #82aefb;}/*Place une bordure rouge et un fond bleu clair*/
#tablekmr5 td:first-child, #tablekmr5 th:first-child { border-right: 2px solid #f00; font-weight: bold; background-color: #82aefb;} /*Place la bordure rouge à droite de la première colonne et un fonc bleu plus foncé*/
#tablekmr5 thead {background-color: #82aefb;} /*Rectifie la couleur bleu plus foncé*/

20 - Et dans la page, écrivez :
<h3>Exemple 5 :</h3>
<table id="tablekmr5">
<?php echo $tableau1; ?>
</table>

Résultat : Exemple 5

Distances en kilomètres par autoroutes
Lille Strasbourg Paris Orléans Tours Marseille
Lille 0 524 225 348 455 1000
Strasbourg 524 0 491 587 694 801
Paris 225 491 0 132 239 775
Orléans 348 587 132 0 118 758
Tours 455 694 239 118 0 798
Marseille 1000 801 775 758 798 0

Commentaires :

Dans tous ces exemples, vous avez organisé le "CSS" à petits pas, en ajoutant à chaque exemple de nouveaux attributs, et en regroupant les attributs par les "id" successifs.
En examinant bien votre feuille css, vous constaterez que seule l'id="tablekmr5" possède tous les attributs.

Dans la pratique, il suffira donc de créer une seule id="tablekmr6" comme ci-dessous pour ce tableau.

21 - Ecrivez dans le css :
#tablekmr6 { border-collapse: collapse;} /* Les bordures du tableau seront collées*/
#tablekmr6 td, #tablekmr6 th { border: 1px solid #000; text-align: right; font-size: 0.8em;} /*Nous attribuons une bordure de 1px trait coloris noir à chaque cellule, et le texte sera aligné à droite, taille 0.8em.*/
#tablekmr6 caption { border: 2px solid #000; background-color: #00f; color: #fff; text-shadow:none;} /*réglage du titre*/
#tablekmr6 thead, #tablekmr6 tbody { border: 2px solid #f00; background-color: #93dbea;} /*Place une bordure rouge et un fond bleu clair*/
#tablekmr6 td:first-child, #tablekmr6 th:first-child { border-right: 2px solid #f00; font-weight: bold; background-color: #82aefb;} /*Place la bordure rouge à droite de la première colonne*/
#tablekmr6 thead {background-color: #82aefb;}

22 - Et dans la page, écrivez :
<h3>Exemple 6 :</h3>
<table id="tablekmr6">
<?php echo $tableau1; ?>
</table>

Résultat : Exemple 6

Distances en kilomètres par autoroutes
Lille Strasbourg Paris Orléans Tours Marseille
Lille 0 524 225 348 455 1000
Strasbourg 524 0 491 587 694 801
Paris 225 491 0 132 239 775
Orléans 348 587 132 0 118 758
Tours 455 694 239 118 0 798
Marseille 1000 801 775 758 798 0

Continuons avec rowspan :

23 - Dans votre page écrivez :
<table id="tablekmt1">
<caption>Distances en kilomètres par autoroutes <br /><span class="rg">Distances en kilomètres par train</span></caption>
<thead>
<tr>
<th class="bordrouge"></th>
<th>Lille</th>
<th>Strasbourg</th>
<th>Paris</th>
<th>Orléans</th>
<th>Tours</th>
<th>Marseille</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2" class="bordrouge">Lille</td>
<td>0</td>
<td>524</td>
<td>225</td>
<td>348</td>
<td>455</td>
<td>1000</td>
</tr>
<tr>
<td>0</td>
<td>3h25</td>
<td>1h03</td>
<td>2h09</td>
<td>2h08</td>
<td>4h26</td>
</tr>
<tr>
<td rowspan="2" class="bordrouge">Strasbourg</td>
<td>524</td>
<td>0</td>
<td>491</td>
<td>587</td>
<td>694</td>
<td>801</td>
</tr>
<tr>
<td>3h25</td>
<td>0</td>
<td>2h19</td>
<td>3h25</td>
<td>3h24</td>
<td>5h18</td>
</tr>
<tr>
<td rowspan="2" class="bordrouge">Paris</td>
<td>225</td>
<td>491</td>
<td>0</td>
<td>132</td>
<td>239</td>
<td>775</td>
</tr>
<tr>
<td>1h03</td>
<td>2h19</td>
<td>0</td>
<td>1h06</td>
<td>1h05</td>
<td>3h23</td>
</tr>
<tr>
<td rowspan="2" class="bordrouge">Orléans</td>
<td>348</td>
<td>587</td>
<td>132</td>
<td>0</td>
<td>118</td>
<td>758</td>
</tr>
<tr>
<td>2h09</td>
<td>3h25</td>
<td>1h06</td>
<td>0</td>
<td>0h55</td>
<td>4h29</td>
</tr>
<tr>
<td rowspan="2" class="bordrouge">Tours</td>
<td>455</td>
<td>694</td>
<td>239</td>
<td>118</td>
<td>0</td>
<td>798</td>
</tr>
<tr>
<td>2h08</td>
<td>3h24</td>
<td>1h05</td>
<td>0h55</td>
<td>0</td>
<td>4h29</td>
</tr>
<tr>
<td rowspan="2" class="bordrouge">Marseille</td>
<td>1000</td>
<td>801</td>
<td>775</td>
<td>758</td>
<td>798</td>
<td>0</td>
</tr>
<tr>
<td>4h26</td>
<td>5h18</td>
<td>3h23</td>
<td>4h29</td>
<td>4h29</td>
<td>0</td>
</tr>
</tbody>
</table>

24 - Et dans le css, recopiez le code suivant :
#tablekmt1 { border-collapse: collapse;} /* Les bordures du tableau seront collées*/
#tablekmt1 td, #tablekmt1 th
{ border: 1px solid #000; text-align: right; font-size: 0.8em;} /*Nous attribuons une bordure de 1px trait coloris noir à chaque cellule, et le texte sera aligné à droite, taille 0.8em.*/
#tablekmt1 caption { border: 2px solid #000; background-color: #00f; color: #fff; text-shadow: none;} /*réglage du titre*/
#tablekmt1 thead, #tablekmt1 tbody
{ border: 2px solid #f00; background-color: #93dbea;} /*Place une bordure rouge et un fond bleu clair*/
#tablekmt1 thead {background-color: #82aefb;}
#tablekmt1 tr:nth-child(2n) { color: #f00;border-bottom: 2px solid #f00;}
#tablekmt1 td.bordrouge {border: 2px solid #f00; background-color: #82aefb;}
#tablekmt1 th.bordrouge {border: 2px solid #f00;}

Ceci vous donnera le résultat suivant :

Exemple avec rowspan :

Distances en kilomètres par autoroutes
Distances en kilomètres par train
Lille Strasbourg Paris Orléans Tours Marseille
Lille 0 524 225 348 455 1000
0 3h25 1h03 2h09 2h08 4h26
Strasbourg 524 0 491 587 694 801
3h25 0 2h19 3h25 3h24 5h18
Paris 225 491 0 132 239 775
1h03 2h19 0 1h06 1h05 3h23
Orleans 348 587 132 0 118 758
2h09 3h25 1h06 0 0h55 4h29
Tours 455 694 239 118 0 798
2h08 3h24 1h05 0h55 0 4h29
Marseille 1000 801 775 758 798 0
4h26 5h18 3h23 4h29 4h29 0

Commentaires :

Dans cet exemple, les données kilométriques sont approximatives.
Les données pour le train sont également approximatives et en temps de parcours bruts, sans tenir compte des temps de correspondances éventuels.

Séparation :

25 - Pour tirer un trait de séparation, écrivez :
<hr width="230px" color="#00f" class="centre"/>


Tableau avec un pied et des éléments de calculs :

Dans un tableau de coûts, par exemple, vous pourriez avoir une dernière ligne qui vous donne les sommes de chaque colonnes.
Dans ce cas là, nous aurons une ligne supplémentaire en pied que nous appelons "tfoot"

Attention !

Mystère du html, nous devrons placer les lignes dans cet ordre :
- Ligne <thead>
- Ligne <tfoot>
- Ligne <tbody>

D'autre part, pour pouvoir transformer ce tableau en modèle de calculs, nous allons utiliser des fonctions Php, avec les variables.
Commençons par créer une "constante" pour la TVA.

26 - Ouvrez le fichier "essais.php" dans le dossier "outils" et ajoutez cette ligne :
define('TVA',0.2);

27 - Sauvegardez le fichier.

Ecriture des formules :

Nous allons faire un tableau exemple, avec 3 articles, 3 quantités, et 3 prix unitaires.
Nous en déduirons les coûts TTC par article, et le Coût total.

28 - Ecrivez les défintions de variables correspondantes :
$article = array('Article0','Article1','Article2');
$qte = array(10, 5, 8);
$prix = array(28, 45, 30);

29 - De ces lignes, nous allons déduire le nombre d'articles, par la formule :
count($article); /*ici le résultat est 3 */

30 - que nous allons utiliser en écrivant ces lignes :
for ($n = 0; $n < count($article); $n++) /* pour $n = jusqu'à $n= 2 compris */
{ /* pour chaque article, la boucle effectue l'opération $qte x $prix x (1+TVA) */
$total[$n] = $qte[$n]*$prix[$n]*(1 + TVA); /* on construit implicitement un array nommé $total */
}
$totalcout = array_sum($total); /* la fonction array_sum donne la somme des données du de l'array $total. */

Ecriture du tableau lui-même :

31 - Ecrivez à la suite de votre page :
<table id="tablecout">
<caption>Prix de revient :</caption>
<thead> /* en-têtes des colonnes */
<tr>
<th>Articles</th>
<th>Quantités</th>
<th>Prix unitaire HT</th>
<th>TVA</th>
<th>Total ttc</th>
</tr>
</thead>
<tfoot> /* pied du tableau avec total */
<tr>
<td colspan="4">Coût total</td>
<td><?php echo number_format($totalcout, 2, ',', '.') ; ?></td>
<!-- La commande "number_format($totalcout, 2, ',', '.')" permet d'écrire le nombre avec 2 chiffres après la virgule des unités et des espaces pour les milliers.-->
</tr>
</tfoot>
<tbody> /* données du tableau */
<?php
for ($n = 0; $n < count($article); $n++)
{
echo '<tr><td>'.$article[$n].'</td><td>'.$qte[$n].'</td><td>'.number_format($prix[$n], 2, ',', '.').'</td><td>'.number_format(TVA, 2, ',', '.').'</td><td>'.number_format($total[$n], 2, ',', '.').'</td></tr>';
}
?>
</tbody>
</table>

32 - Et pour le css, dans le fichier tableau.css, recopiez le dernier tableau fait, modifiez les noms des "id : #tablekmr6" par "#tablecout", et ajoutez cette valeur dans la ligne colorée :
#tablecout { border-collapse: collapse; /* Les bordures du tableau seront collées*/}
#tablecout td, #tablecout th
{ border: 1px solid #000; text-align: right; font-size: 0.8em;} /*Nous attribuons une bordure de 1px trait coloris noir à chaque cellule, et le texte sera aligné à droite, taille 0.8em.*/
#tablecout caption { border: 2px solid #000; background-color: #00f; color: #fff; text-shadow:none;} /*réglage du titre*/
#tablecout thead, #tablecout tbody, #tablecout tfoot
{ border: 2px solid #f00; background-color: #93dbea;} /*Place une bordure rouge et un fond bleu clair*/
#tablecout td:first-child, #tablecout th:first-child { border-right: 2px solid #f00; font-weight: bold; background-color: #82aefb;} /*Place la bordure rouge à droite de la première colonne*/
#tablecout thead, #tablecout tfoot{background-color: #82aefb;}

Pour avoir effectivement ce résultat :

Prix de revient :
Articles Quantités Prix unitaire HT TVA Total ttc
Coût total 894,00
Article01028,000,20336,00
Article1545,000,20270,00
Article2830,000,20288,00