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 SIMPLE EN HTML

L’élément HTML table

Les tableaux en HTML doivent être utilisés pour organiser de façon logique des données.

Pour créer un tableau simple, nous allons avoir besoin de trois éléments HTML :

  • L’élément table (« tableau » en français) va définir le tableau en soi ;
  • L’élément tr, pour « table row » ou « ligne de tableau » en français va nous servir à introduire une nouvelle ligne dans notre tableau ;
  • L’élément td, pour « table data » ou « donnée de tableau » en français va nous permettre d’ajouter des cellules dans nos lignes.

Ainsi, les tableaux en HTML vont être construits ligne par ligne, et cellule par cellule en ajoutant des éléments td à l'intérieur d'éléments tr. Des colonnes vont se créer automatiquement dès que l’on va insérer au moins deux éléments td à l’intérieur d’un élément tr.

Ne perdons pas de temps et créons ensemble notre premier tableau en HTML.

Création d’un premier tableau simple en HTML

Nous avons créé notre premier tableau en HTML, sans CSS

Essayer ce code

Nous venons ci-dessus de créer notre premier tableau entièrement en HTML. Retenez bien la syntaxe et particulièrement l’ordre d’imbrication des éléments avec nos éléments td à l’intérieur de nos éléments tr : on va utiliser un nouvel élément td dès que l'on va vouloir ajouter une cellule (et donc une colonne) au sein d’une même ligne.

Cependant, pour l’instant, cela ne ressemble pas à l’idée que l’on se fait d’un tableau, je vous l’accorde.

Cela est parfaitement normal puisque nous n’avons pas encore mis notre tableau en forme grâce au CSS, en ajoutant des bordures par exemple. Pourtant, au sens du HTML, c’est déjà un tableau.

Nous allons donc maintenant utiliser le CSS pour mettre notre tableau en forme.

Ajouter des bordures en CSS à notre tableau

Pour ajouter des bordures à notre tableau, afin que celui-ci ressemble plus à un tableau justement, nous allons utiliser la propriété CSS border.

Nous allons pouvoir appliquer la propriété border soit à l’élément table, auquel cas la bordure va se créer autour du tableau, soit aux éléments td pour avoir des bordures autour de chaque cellule, soit aux deux afin d’avoir une double bordure extérieure.

Généralement, cependant, nous n’attribuerons notre bordure qu’aux éléments td comme cela :

On ajoute des bordures autour de notre tableau avec la propriété CSS border

Des bordures sont créées autour de chaque cellule de notre tableau

Essayer ce code

Nous avons donc maintenant des bordures autour de chacune des cellules de notre tableau. Il ne nous reste plus qu’à coller ces bordures entre elles afin d’obtenir un premier rendu correct.

Nous allons pouvoir faire cela avec la propriété CSS border-collapse, en l’appliquant sur notre élément table cette fois-ci et en lui donnant la valeur collapse.

Utilisation de la propriété CSS border-collapse

Nous collons nos bordures entre elles grâce à border-collapse en CSS

Essayer ce code

Une nouvelle fois, faîtes bien attention à bien appliquer border-collapse à l’élément table et non pas aux éléments td.

Notre premier tableau simple est maintenant quasiment terminé. On peut encore ajouter un padding (marge intérieure) à nos éléments td afin d’espacer un peu le contenu des bordures et d’avoir un meilleur rendu ou ajouter des couleurs de fond grâce à background-color.

Partie HTML d’un tableau simple mis en forme

Mise en forme CSS de notre tableau

Tableau HTML simple mis en forme grâce au CSS

Essayer ce code

Ici, on attribue des class différentes selon que la ligne soit « impaire » (1ère ligne, 3ème ligne, etc.) ou « paire » (2ème ligne, 4ème ligne, etc.) puis on attribue une couleur de fond à chaque type de ligne afin de créer une alternance de couleur. Simple mais efficace !

Chapitre précédent

Chapitre suivant