Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. HTML/CSS - Introduction
  3. HTML/CSS - Définitions et rôles
  4. HTML/CSS - Versions
  5. HTML/CSS - Travail en local
  6. HTML/CSS - L'éditeur de texte

Les bases en HTML

  1. HTML - Eléments, balises, attributs
  2. HTML - Structure
  3. HTML - Affichage
  4. HTML - Indentation et comentaires
  5. HTML - Titres et paragraphes
  6. HTML - Espaces et retours à la ligne
  7. HTML - Strong, em et mark
  8. HTML - Listes
  9. HTML - Liens internes et externes
  10. HTML - Autres types de liens
  11. HTML - Images
  12. HTML - Validation
  13. Test n°1

Les bases en CSS

  1. CSS - Sélecteurs, propriétés
  2. CSS - Emplacement
  3. CSS - Commentaires
  4. CSS - Sélecteurs simples
  5. HTML/CSS - Id et class
  6. CSS - L'héritage
  7. HTML/CSS - Block vs inline
  8. HTML/CSS - Div et span
  9. Test n°2

Mise en forme de textes

  1. CSS - Font-family
  2. CSS - Propriétés "font-"
  3. CSS - Couleur et opacité
  4. CSS - Propriétés "text-"
  5. CSS - Les espaces
  6. Test n°3

Le modèle des boîtes

  1. CSS - Le modèle des boîtes
  2. CSS - Dimensions
  3. CSS - Bordures
  4. CSS - Marges
  5. CSS - Ombres
  6. CSS - Affichage
  7. CSS - Positionnement
  8. CSS - Flottement
  9. CSS - Alignement
  10. Test n°4

Gestion du fond

  1. CSS - Couleur de fond
  2. CSS - Image(s) de fond
  3. CSS - Dégradés linéaires
  4. CSS - Dégradés radiaux
  5. Test n°5

Les tableaux

  1. HTML/CSS - Créer un tableau simple
  2. HTML - Structurer son tableau
  3. HTML - Améliorer un tableau
  4. Test n°6

Image, audio, vidéo

  1. HTML/CSS - Les images
  2. HTML - L'audio
  3. HTML - La vidéo
  4. HTML - Intégration et sémantique
  5. Test n°7

CSS avancé

  1. CSS - Long hand vs short hand
  2. CSS - Sélecteurs avancés
  3. CSS - Pseudo classes
  4. CSS - Pseudo éléments
  5. CSS - Sprites
  6. CSS - Transitions
  7. CSS - Animations
  8. Test n°8

Formulaires HTML

  1. HTML - Présentation des formulaires
  2. HTML - Créer un formulaire simple
  3. HTML - Les types d'input et les listes
  4. HTML - Les attributs des formulaires
  5. HTML/CSS - Organiser et mettre en forme un formulaire
  6. Test n°9

Responsive design

  1. HTML/CSS - Introduction au responsive
  2. HTML - Le viewport
  3. CSS - Les media queries
  4. Test n°10

Création d'un site perso (cv)

  1. Présentation de l'exercice
  2. Création des parties "fixes" du site
  3. Création de la page accueil.html
  4. Création des autres pages du site
  5. Conclusion de l'exercice et du cours

CREER UN TABLEAU STRUCTURE EN HTML

Créer une ligne d’en tête

Très souvent, les tableaux vont posséder une ligne d’en tête dans laquelle on va préciser le type des données qui seront inscrites dans chaque colonne.

Par exemple, dans notre tableau créé dans la partie précédente, notre ligne d’en-tête est celle qui contient les cellules « nom », « prénom » et « âge », qui indiquent bien le type de données de chaque colonne.

Notre tableau HTML simple

Pour créer une ligne d’en-tête en HTML, nous allons cette fois-ci devoir utiliser l’élément th, pour « table head » ou « en-tête du tableau » en français à la place de nos éléments td dans notre première ligne.

On peut appliquer un style particulier en CSS à cette ligne afin de bien la démarquer des autres. Par défaut, le texte s’affichera en gras dans les éléments th. Nous pouvons modifier cela en CSS également avec la propriété font-weight.

Création d’une ligne d’en tête pour notre tableau HTML

On utilise l’élément th pour créer une ligne d’en tête

Nous avons fait ressortir notre ligne d’en tête grâce au CSS

Essayer ce code

Ici, on s’est contenté de changer la couleur de notre texte dans notre ligne d’en-tête ainsi que la couleur de fond de cette ligne et le poids par défaut du texte, afin de mieux le faire ressortir.

Pensez bien surtout à appliquer vos bordures et votre padding à vos éléments th aussi bien qu’à vos éléments td !

Un tableau structuré en HTML

Si vous devez créer des tableaux assez longs, il peut être judicieux de commencer à les structurer en les subdivisant en plusieurs parties.

On peut distinguer trois parties dans un tableau : le haut du tableau contenant généralement la ligne d’en tête, le corps du tableau contenant les informations de notre tableau en soi et le pied du tableau servant à calculer des totaux ou à rappeler les informations d’en tête si votre tableau est vraiment long.

Pour définir chaque partie d’un tableau, nous disposons d'un élément HTML spécifique :

  • thead pour la tête du tableau ;
  • tbody pour le corps du tableau ;
  • tfoot pour le pied du tableau.

Voyons immédiatement comment utiliser ces nouveaux éléments judicieusement.

Création d’un tableau structuré en HTML

On utilise les éléments thead, tfoot et tbody

Notre tableau contient maintenant plusieurs parties, structurées

Essayer ce code

Notez qu’en HTML on place généralement les éléments de notre tableau dans l’ordre suivant : thead, puis tfoot et enfin tbody. Ne vous inquiétez pas, cela n’a aucune influence sur le rendu visuel : la ligne correspondante à l’élément tfoot sera toujours la dernière du tableau.

Vous remarquerez qu’on a également changé le texte à l’intérieur de nos éléments thead et tfoot afin qu'il s'affiche en majuscules grâce à la propriété CSS text-transform.

Chapitre précédent

Chapitre suivant