-
Codage tableau en séparant structure et style
P2580824
Pour illustration. Cet exemple est issu d'une demande d'aide sur le forum
Dans cet exemple j'ai séparé ce qui concerne la structure du tableau (html) et ce qui concerne le style (css). Les règles de style n'étant pas dans chaque élément du tableau, le code est plus aéré et il est plus facile de se repérer dans le code source < >CSS signifie Feuilles de style en cascade. Dans le présent exemple le style du tableau est placé dans un élément <style> ... </style>, lequel forme une "feuille style interne" (par opposition aux feuilles de style externes qui sont des documents séparés et chargés en même temps que le document html principal)
Affichage dans le blog :
Mon repérage du contenu des cellules: C = colonne L= ligne exemple: C3L2 signifie Colonne3 Ligne2
C3L1 C4L1 C2L2 C3L2 C4L2 C1L3 C2L3 C3L3 C4L3 C1L4 C2L4 C3L4
C4L4 Affichage dans l'éditeur de codes :
Le code de ce tableau: la structure du tableau (HMTL) et le style CSS
<div id="tableau1">
<table>
<tbody>
<tr>
<td class="vide"> </td>
<td class="vide"> </td>
<td class="C3"> C3L1 </td>
<td class="C4"> C4L1 </td>
</tr>
<tr>
<td class="vide"> </td>
<td class="C2"> ;C2L2 </td>
<td class="C3"> C3L2 </td>
<td class="C4"> C4L2 </td>
</tr>
<tr>
<td class="C1"> C1L3 </td>
<td class="C2"> C2L3 </td>
<td class="C3"> C3L3 </td>
<td class="C4"> C4L3 </td>
</tr>
<tr>
<td class="C1"> C1L4 </td>
<td class="C2"> C2L4 </td>
<td class="C3"> C3L4 </td>
<td class="C4"> C4L4 </td>
</tr>
</tbody>
</table>
</div><style><!--
#tableau1 table { /* élément table dans l'élément identifié id="tableau1" */
background-color: #acf5f0;
border: 2px solid #ebf2f1;
margin-left: auto;
margin-right: auto;
border-collapse: separate;
border-spacing: 10px 5px;}#tableau1 tr {height: 80px;} /* ligne tr dans l'élément identifié id="tableau1" */
#tableau1 .vide {background-color:transparent;} /* éléments class="vide" dans l'élément identifié id="tableau1" * /
#tableau1 .C1 {border: #a56db0 solid 2px; background-color: #e1c8e6; width: 250px; text-align: center; vertical-align: middle; }
#tableau1 .C2 {border: #919626 solid 2px; background-color: #dade90; width: 250px; text-align: center; vertical-align: middle;}
#tableau1 .C3 {border: #70a624 solid 2px; background-color: #bce386; width: 250px; text-align: center; vertical-align: middle;}
#tableau1 .C4 {border: #ad5b21 solid 2px; background-color: #eee; width: 250px; text-align: center; vertical-align: middle;}--></style>
<p> </p>
-
Commentaires
. . . pour continuer avec Eklablog ⏳
Suivre le flux RSS des commentaires
Ajouter un commentaire
Créer mon blog