Structure sémantique d’une page Web

Un extrait du site AlsaCréations : Les éléments de section HTML5 Les éléments de section (section, article, nav, aside, header, footer) segmentent des portions du document, qui possèdent une valeur sémantique particulière ; contrairement à des éléments génériques comme span ou div qui ont un rôle totalement neutre, et ne servent qu’à regrouper d’autres éléments…Continue reading Structure sémantique d’une page Web

Formater des tableaux en CSS : Exercice n°3

Exercice n°3 pour intégrer du CSS dans des tableaux : l’utilisation du sélecteur « :nth-of-type » Le sélecteur :nth-of-type (“n-ième du type”) permet de sélectionner un ou plusieurs éléments en fonction de leur ordre dans la source et selon des critères que l’on détermine. Cette “pseudo-classes structurelles” est utilisée pour appliquer un style au contenu en fonction…Continue reading Formater des tableaux en CSS : Exercice n°3

Formater des tableaux en CSS : Exercice n°2

Exercice n°2 pour intégrer du CSS dans des tableaux Espacement des cellules : <table style= « border-spacing: 16px »> Fusion des bordures : <table style= « border-collapse: collapse »> Positionnement de la légende du tableau : <table style= « caption-side: bottom »> Cellules vides : <table style= « empty-cells: hide »> Largeur de tableau et de colonne : <table style= « width: 400px »> <tr>…Continue reading Formater des tableaux en CSS : Exercice n°2

Formater des tableaux en CSS : Exercice n°1

Comment placer un tableau entier dans du HTML Appliquer la formule suivante : table>tr*4>td*4>{cellule $} puis touche TAB Exercice n°1 pour intégrer du CSS dans des tableaux Tableau avec une prédéfinition des colonnes : <table> <col class= « col1 »> <col class= « col2 »> <tbody> <tr> <td>Cellule 1.1</td> <td>Cellule 1.2</td> </tr> <tr> <td>Cellule 2.1</td> <td>Cellule 2.2</td> </tr> </tbody>…Continue reading Formater des tableaux en CSS : Exercice n°1

Construire des tableaux en HTML

Les tableaux, obsolètes depuis l’utilisation du CSS, servent encore pour les newsletters. Fusion de cellules à l’horizontale : colspan= »2″ (pour 2 cellules) Fusion de cellules à la verticale : rowspan= »2″ (pour 2 cellules) Fusion de cellules à l’horizontale et la verticale : colspan= »2″ rowspan= »2″ (pour 2 cellules à l’horizontale et 2 cellules à la verticale)…Continue reading Construire des tableaux en HTML