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

OPERATIONS SUR LES TABLEAUX

Fusionner des cellules entre elles

Le HTML va nous permettre d’arranger efficacement nos tableaux et notamment de combiner certaines cellules entre elles, ou plus exactement d'étendre la taille d'une cellule sur plusieurs colonnes ou lignes.

Nous allons ainsi pouvoir combiner plusieurs cellules adjacentes d’une même ligne ou d’une même colonne entre elles grâce aux attributs HTML colspan et rowspan.

Ces deux attributs vont prendre comme valeur le nombre de cellules à combiner entre elles tout simplement.

Voyons déjà comment combiner plusieurs cellules d’une même ligne entre elles, c’est à dire comment combiner plusieurs colonnes finalement avec colspan.

Pour faire cela, nous allons utiliser un tableau simple avec une mise en forme CSS minimale.

On peut fusionner différentes cellules de notre tableau HTML avec colspan

On utilise colspan pour fusionner les cellules d’une même ligne

Essayer ce code

Examinons ce code ensemble. La première chose à faire lorsque l'on souhaite fusionner des cellules d'un tableau entre elles est de déterminer le nombre maximal de lignes et de colonnes que comporte notre tableau à la base. Dans notre cas, le tableau possède 3 lignes et 5 colonnes.

Notre but va donc être d'utiliser l'attribut colspan afin que l'ensemble des cellules constituant chaque ligne occupent la place de cinq colonnes à chaque fois pour uniformiser le tableau.

On commence donc par demander à la première cellule de notre ligne d'en-tête d'occuper la place de trois colonnes avec colspan="3".

Ainsi, la dernière cellule de notre ligne d'en-tête devra occuper la place de deux colonnes. On utilise donc colspan="2".

On réitère ensuite l'opération pour la ligne du dessous, en fusionnant les deux cellules correspondant au deuxième et au troisième prénoms de Pierre, ainsi que les deux cellules d'adresses e-mail.

La seule chose à laquelle vous devez faire attention ici est de bien adapter le nombre d'éléments th ou td de chaque ligne selon le nombre de cellules fusionnées.

Pour fusionner des cellules d’une même colonne appartenant donc à différentes lignes, nous allons nous y prendre de la même façon mais en utilisant cette fois-ci l’attribut HTML rowspan.

On peut fusionner plusieurs cellules d’un tableau HTML en utilisant rowspan

On utilise rowspan pour fusionner plusieurs cellules d’une même colonne

Essayer ce code

Lorsque vous utilisez rowspan, faites bien attention une nouvelle fois à compter le nombre de cellules par ligne. Si une cellule occupe deux lignes, par exemple, il faudra donc en déclarer une de moins pour la deuxième ligne.

Ajouter une légende au tableau

On va également pouvoir ajouter un titre ou une légende à notre tableau afin d’indiquer ce que contient notre tableau.

Pour ajouter une légende, nous allons utiliser l’élément HTML caption. Cet élément est très simple d’utilisation, mais il faut respecter une règle : il doit être inséré immédiatement après la balise ouvrante de l’élément table.

On utilise l’élément HTML caption pour ajouter une légende à notre tableau HTML

L’élément caption nous permet d’ajouter un titre à notre tableau

Essayer ce code

Chapitre précédent

Chapitre suivant