Skip to content
GitLab
Commit bb66072b authored by GUINGAND SOLENE's avatar GUINGAND SOLENE
Browse files

table headers et id

parent 54a5d18c
Hide whitespace changes
Inline Side-by-side
pages/tableau.html
View file @ bb66072b
......@@ -5,8 +5,6 @@
<caption class="my-3 text-left text-xl font-medium">
Stock de vêtements
<span class="block font-normal text-base mt-2">
Ce tableau est disponible sous forme de plusieurs tableaux en
dessous de celui-ci. </br>
Dans ce tableau, vous trouverez le détail de
stock de vêtements et d'accessoires. </br>
Le premier groupe de colonnes
......@@ -14,17 +12,20 @@
les accessoires. </br>
Le premier groupe de lignes regroupe les villes
en Belgique et le deuxième groupe de lignes regroupe les villes au
Pays-Bas.
Pays-Bas.</br>
Ce tableau est disponible sous forme de plusieurs tableaux en
dessous de celui-ci. <a href="#simple-table" class="text-blue-600 hover:underline">Voir les tableaux simplifiés.</a>
</span>
</caption>
<tbody>
<tr class="border">
<td class="py-4 px-6 border bg-gray-100 text-center">&nbsp;</td>
<td class="py-4 px-6 border bg-gray-100 text-center">&nbsp;</td>
<td class="py-4 px-6 border bg-gray-100 text-center"></td>
<td class="py-4 px-6 border bg-gray-100 text-center"></td>
<th
class="py-4 px-6 border bg-gray-100 font-medium"
colspan="3"
scope="colgroup"
id="vetements"
>
Vêtements
</th>
......@@ -32,26 +33,27 @@
class="py-4 px-6 border bg-gray-100 font-medium"
colspan="2"
scope="colgroup"
id="accessoires"
>
Accessoires
</th>
</tr>
<tr class="border">
<td class="py-4 px-6 border bg-gray-100 text-center">&nbsp;</td>
<td class="py-4 px-6 border bg-gray-100 text-center">&nbsp;</td>
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="col">
<td class="py-4 px-6 border bg-gray-100 text-center"></td>
<td class="py-4 px-6 border bg-gray-100 text-center"></td>
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="col" headers="vetements" id="pantalons">
Pantalons
</th>
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="col">
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="col" headers="vetements" id="jupes">
Jupes
</th>
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="col">
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="col" headers="vetements" id="robes">
Robes
</th>
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="col">
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="col" headers="accessoires" id="bracelets">
Bracelets
</th>
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="col">
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="col" headers="accessoires" id="bagues">
Bagues
</th>
</tr>
......@@ -60,116 +62,121 @@
class="py-4 px-6 border bg-gray-100 font-medium"
rowspan="3"
scope="rowgroup"
id="belgique"
>
Belgique
</th>
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="row">
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="row" id="anvers" hearders="belgique">
Anvers
</th>
<td class="py-4 px-6 border text-center">56</td>
<td class="py-4 px-6 border text-center">22</td>
<td class="py-4 px-6 border text-center">43</td>
<td class="py-4 px-6 border text-center">72</td>
<td class="py-4 px-6 border text-center">23</td>
<td class="py-4 px-6 border text-center" headers="vetements pantalons belgique anvers">56</td>
<td class="py-4 px-6 border text-center" headers="vetements jupes belgique anvers">22</td>
<td class="py-4 px-6 border text-center" headers="vetements robes belgique anvers">43</td>
<td class="py-4 px-6 border text-center" headers="accessoires bracelets belgique anvers">72</td>
<td class="py-4 px-6 border text-center" headers="accessoires bagues belgique anvers">23</td>
</tr>
<tr class="border">
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="row">
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="row" id="gand" hearders="belgique">
Gand
</th>
<td class="py-4 px-6 border text-center">46</td>
<td class="py-4 px-6 border text-center">18</td>
<td class="py-4 px-6 border text-center">50</td>
<td class="py-4 px-6 border text-center">61</td>
<td class="py-4 px-6 border text-center">15</td>
<td class="py-4 px-6 border text-center" headers="vetements pantalons belgique gand">46</td>
<td class="py-4 px-6 border text-center" headers="vetements jupes belgique gand">18</td>
<td class="py-4 px-6 border text-center" headers="vetements robes belgique gand">50</td>
<td class="py-4 px-6 border text-center" headers="accessoires bracelets belgique gand">61</td>
<td class="py-4 px-6 border text-center" headers="accessoires bagues belgique gand">15</td>
</tr>
<tr class="border">
<th
class="py-4 px-6 border bg-gray-100 font-medium"
class="e"
scope="row"
id="bruxelles" hearders="belgique"
>
Bruxelles
</th>
<td class="py-4 px-6 border text-center">51</td>
<td class="py-4 px-6 border text-center">27</td>
<td class="py-4 px-6 border text-center">38</td>
<td class="py-4 px-6 border text-center">69</td>
<td class="py-4 px-6 border text-center">28</td>
<td class="py-4 px-6 border text-center" headers="vetements pantalons belgique bruxelles">51</td>
<td class="py-4 px-6 border text-center" headers="vetements jupes belgique bruxelles">27</td>
<td class="py-4 px-6 border text-center" headers="vetements robes belgique bruxelles">38</td>
<td class="py-4 px-6 border text-center" headers="accessoires bracelets belgique bruxelles">69</td>
<td class="py-4 px-6 border text-center" headers="accessoires bagues belgique bruxelles">28</td>
</tr>
<tr class="border">
<th
class="py-4 px-6 border bg-gray-100 font-medium"
rowspan="2"
scope="rowgroup"
id="pays-bas"
>
Pays-bas
</th>
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="row">
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="row" id="amsterdam" headers="pays-bas">
Amsterdam
</th>
<td class="py-4 px-6 border text-center">89</td>
<td class="py-4 px-6 border text-center">34</td>
<td class="py-4 px-6 border text-center">69</td>
<td class="py-4 px-6 border text-center">85</td>
<td class="py-4 px-6 border text-center">38</td>
<td class="py-4 px-6 border text-center" headers="vetements pantalons pays-bas amsterdam">89</td>
<td class="py-4 px-6 border text-center" headers="vetements jupes pays-bas amsterdam">34</td>
<td class="py-4 px-6 border text-center" headers="vetements robes pays-bas amsterdam">69</td>
<td class="py-4 px-6 border text-center" headers="accessoires bracelets pays-bas amsterdam">85</td>
<td class="py-4 px-6 border text-center" headers="accessoires bagues pays-bas amsterdam">38</td>
</tr>
<tr class="border">
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="row">
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="row" id="utrecht" headers="pays-bas">
Utrecht
</th>
<td class="py-4 px-6 border text-center">80</td>
<td class="py-4 px-6 border text-center">12</td>
<td class="py-4 px-6 border text-center">43</td>
<td class="py-4 px-6 border text-center">36</td>
<td class="py-4 px-6 border text-center">19</td>
<td class="py-4 px-6 border text-center" headers="vetements pantalons pays-bas utrecht">80</td>
<td class="py-4 px-6 border text-center" headers="vetements jupes pays-bas utrecht">12</td>
<td class="py-4 px-6 border text-center" headers="vetements robes pays-bas utrecht">43</td>
<td class="py-4 px-6 border text-center" headers="accessoires bracelets pays-bas utrecht">36</td>
<td class="py-4 px-6 border text-center" headers="accessoires bagues pays-bas utrecht">19</td>
</tr>
</tbody>
</table>
<h3 id="simple-table">Tableaux simplifiés</h3>
<table class="table-auto border rounded-md">
<caption class="my-3 text-left text-xl font-medium">
Stock de vêtements des villes en Belgique
</caption>
<tbody>
<tr class="border">
<td class="py-4 px-6 border bg-gray-100 text-center">&nbsp;</td>
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="col">
<td class="py-4 px-6 border bg-gray-100 text-center"></td>
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="col" id="pantalons2">
Pantalons
</th>
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="col">
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="col" id="jupes2">
Jupes
</th>
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="col">
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="col" id="robes2">
Robes
</th>
</tr>
<tr class="border">
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="row">
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="row" id="anvers2">
Anvers
</th>
<td class="py-4 px-6 border text-center">56</td>
<td class="py-4 px-6 border text-center">22</td>
<td class="py-4 px-6 border text-center">43</td>
<td class="py-4 px-6 border text-center" headers="pantalons2 anvers2">56</td>
<td class="py-4 px-6 border text-center" headers="jupes2 anvers2">22</td>
<td class="py-4 px-6 border text-center" headers="robes2 anvers2">43</td>
</tr>
<tr class="border">
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="row">
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="row" id="gand2">
Gand
</th>
<td class="py-4 px-6 border text-center">46</td>
<td class="py-4 px-6 border text-center">18</td>
<td class="py-4 px-6 border text-center">50</td>
<td class="py-4 px-6 border text-center" headers="pantalons2 gand2">46</td>
<td class="py-4 px-6 border text-center" headers="jupes2 gand2">18</td>
<td class="py-4 px-6 border text-center" headers="robes2 gand2">50</td>
</tr>
<tr class="border">
<th
class="py-4 px-6 border bg-gray-100 font-medium"
class="e"
scope="row"
id="bruxelles2"
>
Bruxelles
</th>
<td class="py-4 px-6 border text-center">51</td>
<td class="py-4 px-6 border text-center">27</td>
<td class="py-4 px-6 border text-center">38</td>
<td class="py-4 px-6 border text-center" headers="pantalons2 bruxelles2">51</td>
<td class="py-4 px-6 border text-center" headers="jupes2 bruxelles2">27</td>
<td class="py-4 px-6 border text-center" headers="robes2 bruxelles2">38</td>
</tr>
</tbody>
</table>
......@@ -180,38 +187,39 @@
</caption>
<tbody>
<tr class="border">
<td class="py-4 px-6 border bg-gray-100 text-center">&nbsp;</td>
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="col">
<td class="py-4 px-6 border bg-gray-100 text-center"></td>
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="col" id="bracelets3">
Bracelets
</th>
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="col">
Bracelets
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="col" id="bagues3">
Bages
</th>
</tr>
<tr class="border">
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="row">
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="row" id="anvers3">
Anvers
</th>
<td class="py-4 px-6 border text-center">72</td>
<td class="py-4 px-6 border text-center">23</td>
<td class="py-4 px-6 border text-center" headers="bracelets3 anvers3">72</td>
<td class="py-4 px-6 border text-center" headers="bagues3 anvers3">23</td>
</tr>
<tr class="border">
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="row">
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="row" id="gand3">
Gand
</th>
<td class="py-4 px-6 border text-center">61</td>
<td class="py-4 px-6 border text-center">15</td>
<td class="py-4 px-6 border text-center" headers="bracelets3 gand3">61</td>
<td class="py-4 px-6 border text-center" headers="bagues3 gand3">15</td>
</tr>
<tr class="border">
<th
class="py-4 px-6 border bg-gray-100 font-medium"
class="e"
scope="row"
id="bruxelles3"
>
Bruxelles
</th>
<td class="py-4 px-6 border text-center">69</td>
<td class="py-4 px-6 border text-center">28</td>
<td class="py-4 px-6 border text-center" headers="bracelets3 bruxelles3">69</td>
<td class="py-4 px-6 border text-center" headers="bagues3 bruxelles3">28</td>
</tr>
</tbody>
</table>
......@@ -222,32 +230,32 @@
</caption>
<tbody>
<tr class="border">
<td class="py-4 px-6 border bg-gray-100 text-center">&nbsp;</td>
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="col">
<td class="py-4 px-6 border bg-gray-100 text-center"></td>
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="col" id="pantalons4">
Pantalons
</th>
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="col">
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="col" id="jupes4">
Jupes
</th>
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="col">
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="col" id="robes4">
Robes
</th>
</tr>
<tr class="border">
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="row">
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="row" id="amsterdam4">
Amsterdam
</th>
<td class="py-4 px-6 border text-center">89</td>
<td class="py-4 px-6 border text-center">34</td>
<td class="py-4 px-6 border text-center">69</td>
<td class="py-4 px-6 border text-center" headers="pantalons4 amsterdam4">89</td>
<td class="py-4 px-6 border text-center" headers="jupes4 amsterdam4">34</td>
<td class="py-4 px-6 border text-center" headers="robes4 amsterdam4">69</td>
</tr>
<tr class="border">
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="row">
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="row" id="utrecht4">
Utrecht
</th>
<td class="py-4 px-6 border text-center">80</td>
<td class="py-4 px-6 border text-center">12</td>
<td class="py-4 px-6 border text-center">43</td>
<td class="py-4 px-6 border text-center" headers="pantalons4 utrecht4">80</td>
<td class="py-4 px-6 border text-center" headers="jupes4 utrecht4">12</td>
<td class="py-4 px-6 border text-center" headers="robes4 utrecht4">43</td>
</tr>
</tbody>
</table>
......@@ -258,27 +266,27 @@
</caption>
<tbody>
<tr class="border">
<td class="py-4 px-6 border bg-gray-100 text-center">&nbsp;</td>
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="col">
<td class="py-4 px-6 border bg-gray-100 text-center"></td>
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="col" id="bracelets5">
Bracelets
</th>
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="col">
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="col" id="bagues5">
Bagues
</th>
</tr>
<tr class="border">
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="row">
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="row" id="amsterdam5">
Amsterdam
</th>
<td class="py-4 px-6 border text-center">85</td>
<td class="py-4 px-6 border text-center">38</td>
<td class="py-4 px-6 border text-center" headers="bracelets5 amsterdam5">85</td>
<td class="py-4 px-6 border text-center" headers="bagues5 amsterdam5">38</td>
</tr>
<tr class="border">
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="row">
<th class="py-4 px-6 border bg-gray-100 font-medium" scope="row" id="utrecht5">
Utrecht
</th>
<td class="py-4 px-6 border text-center">36</td>
<td class="py-4 px-6 border text-center">19</td>
<td class="py-4 px-6 border text-center" headers="bracelets5 utrecht5">36</td>
<td class="py-4 px-6 border text-center" headers="bagues5 utrecht5">19</td>
</tr>
</tbody>
</table>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment