Les tableaux permettent de représenter des données tabulaires, des statistiques, des listes d'informations en BackOffice, et des newsletters.
Nous ne construirons pas tout un site web avec des tableaux mais pour des raisons historiques de compatibilité les newsletters / emailing (page web envoyé par email) sont construits à l'aide de tableaux.
Pour créer une table il faut réfléchir en ligne et en cellule (de gauche à droite) et non pas en colonne (de haut en bas).
Voici un premier exemple : un bulleting de notes.
<!Doctype html> <html> <head> <meta charset="utf-8"> <title>Ma Table</title> <link rel="stylesheet" href="table1.css"> </head> <body> <table border="1"> <tr> <th>Matière</th> <th>Moyenne</th> <th>Coef</th> <th>Formateur</th> <th>Commentaire</th> </tr> <tr> <td>Html</td> <td>13</td> <td>1</td> <td>LT</td> <td>Ok !</td> </tr> <tr> <td>Référencement</td> <td>10</td> <td>1</td> <td>XX</td> <td>Moyen :-(</td> </tr> <tr> <td>Droit</td> <td>12</td> <td>1</td> <td>XX</td> <td>Pas mal !</td> </tr> <tr> <td>Marketing</td> <td>12</td> <td>1</td> <td>XX</td> <td>Pas mal !</td> </tr> <tr> <td>Pub</td> <td>12</td> <td>1</td> <td>XX</td> <td>Pas mal !</td> </tr> <tr> <td>Général</td> <td colspan="4">Avis Favorable !!!</td> </tr> </table> </body> </html>Decryptons le code Html :
td, th{ text-align: center; } tr.changementCouleur:hover{ background: #f43c80; }Decryptons le code Css :
text-align: center;
Matière | Moyenne | Coef | Formateur | Commentaire |
---|---|---|---|---|
Intégration : Html / Css | 15 | 1 | XX | Ok ! |
Référencement | 10 | 1 | XX | Moyen :-( |
Marketing | 13 | 1 | XX | Pas mal ! |
Pub | 12 | 1 | XX | Pas mal ! |
Général | Avis Favorable !!! |
<!Doctype html> <html> <head> <meta charset="utf-8"> <title>Ma Table</title> <link rel="stylesheet" href="table2.css"> </head> <body> <table> <tr> <th colspan="4">Statistiques</th> </tr> <tr> <th>Pays</th> <td>France</td> <td>Italie</td> <td>Espagne</td> </tr> <tr> <th>Nombre d'habitants</th> <td>65 000 000</td> <td>60 157 214</td> <td>46 661 950</td> </tr> <tr> <th>Capitale</th> <td>Paris</td> <td>Rome</td> <td>Madrid</td> </tr> </table> </body> </html>Decryptons le code Html :
table{ border-collapse: collapse; /* trait plat */ width: 700px; /* largeur */ height: 100px; /* hauteur */ margin: 0 auto; /* marges */ } th{ background: #f40c80; /* couleur de fond */ } td, th{ padding: 7px; /* espacement intérieur */ border: 1px solid; /* bordure */ text-align: center; /* alignement du texte au centre */ }Decryptons le code Css :
table{}
permet de cibler le tableau et de lui appliquer certaines propriétés : border-collapse
permet d'applatir le trait qui dessine le tableau, width
c'est la largeur, height
pour hauteur et margin 0 auto
pour centrer le tableau dans la page web.th{}
permet de cibler les cellules d'entête pour leur appliquer une couleur de fond particulière.td, th{}
permet d'attraper toutes les cellules du tableau pour leur appliquer padding: 7px;
de la marge intérieure, border: 1px solid
une bordure et text-align: center;
un alignement du texte au centre.<!Doctype html> <html> <head> <meta charset="utf-8"> <title>Ma Table</title> <link rel="stylesheet" href="table3.css"> </head> <body> <table> <caption>Plan de Classe</caption> <tr> <td colspan="2" class="vide"> </td> <td colspan="2"> Prof </td> <td colspan="2" class="vide"> </td> </tr> <tr> <td class="vide" colspan="6"> </td> </tr> <tr> <td class="homme"> 1 </td> <td class="vide"> </td> <td class="femme"> 2 </td> <td class="homme"> 3 </td> <td class="vide"> </td> <td class="femme"> 4 </td> </tr> <tr> <td> 5</td> <td class="vide"> </td> <td> 6</td> <td> 7</td> <td class="vide"> </td> <td> 8 </td> </tr> <tr> <td> 9 </td> <td class="vide"> </td> <td> 10 </td> <td> 11 </td> <td class="vide"> </td> <td> 12 </td> </tr> <tr> <td> 13 </td> <td class="vide"> </td> <td> 14 </td> <td> 15 </td> <td class="vide"> </td> <td> 16 </td> </tr> <tr> <td> 17 </td> <td class="vide"> </td> <td> 18 </td> <td> 19 </td> <td class="vide"> </td> <td> 20 </td> </tr> </table> </body> </html>Decryptons le code Html :
table{ border: 1px solid; } td{ width: 200px; height: 50px; text-align: center; border: 1px solid; } caption{ font-weight: bold; } .vide{ border: 0; width: 100px; } .homme{ background: #62A9F0 ; } .femme{ background: #E52867 ; }Decryptons le code Css :
table{}
permet de cibler le tableau et de lui appliquer certaines propriétés : border
permet d'ajouter un trait pour dessiner le tableau.td{}
permet de cibler les cellules pour leur appliquer une largeur width
, hauteur height
, alignement du texte text-align
, une bordure border
caption{}
permet de cibler le titre du tableau pour appliquer du gras font-weight: bold;
..vide{}
permet de donner un effet "vide" à certaines cellules pour dessiner les rangs de notre salle de classe..homme{}
permet de donner une couleur bleue à la place des Hommes dans la classe..femme{}
permet de donner une couleur rose à la place des Femmes dans la classe.HTML CSS
1. Introduction Html Css 2. Structure D'une Page Html 3. Structure D'un Fichier Css 4. Les Polices D'ecriture 5. Les Selecteurs 6. Firebug 7. Styles Css 8. L'heritage 9. Les Images 10. Les Positionnements 11. Le Zoning 12. Les Tableaux 13. Les Listes 14. Les Liens Et Ancres 15. Menu De Navigation 16. Les Formulaires 17. Donnees Multimedia 18. Balises Html Et Proprietes Css 19. Cas Pratique 20. Creation D'un Site Web