Création de Tableaux en HTML

Réaliser un tableau simple
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Cours HTML5 et CSS3 / Part 1
Revoir le teaser Je m'abonne
5,0
Transcription

39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
5,0
39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Les objectifs de cette vidéo sont :

  • Comprendre la structure de base d'un tableau HTML.
  • Apprendre à utiliser les balises <table>, <tr>, <th>, et <td>.
  • Savoir ajuster les attributs de style et d'accessibilité des tableaux.
  • Découvrir les bonnes pratiques de présentation des données tabulaires.

Apprenez à créer des tableaux en HTML pour structurer et présenter des données tabulaires efficacement.

Dans cette leçon, nous allons aborder la création de tableaux en HTML destinés à présenter des données tabulaires comme des chiffres ou des statistiques. Il est crucial de souligner que l’utilisation de tableaux pour la mise en page d’un site web est désormais obsolète, et que leur usage doit se limiter à la présentation de données structurées.

Nous commencerons par définir les balises de base : <table> pour initier le tableau, <caption> pour son titre, <tr> pour les lignes, et <th> pour les en-têtes de colonne, avant de passer aux cellules de données avec <td>. Nous apprendrons également à ajuster les attributs du tableau comme WIDTH et BORDER, ainsi que cellpadding et cellspacing pour améliorer la lisibilité.

En parallèle, nous aborderons l’importance de rendre les tableaux accessibles avec des attributs comme scope, et soulignerons que les entêtes et les cellules de données peuvent être stylisées avec CSS pour une meilleure présentation visuelle.

Voir plus
Questions réponses
Pourquoi ne doit-on plus utiliser des tableaux pour la mise en page d'un site web ?
L'utilisation de tableaux pour la mise en page est considérée comme obsolète car elle ne respecte pas les standards modernes du web et complique l'accessibilité et la maintenance.
Quelle balise HTML est utilisée pour définir une ligne dans un tableau ?
La balise <tr> est utilisée pour définir une ligne dans un tableau HTML.
A quoi sert l'attribut 'scope' dans une balise <strong>&lt;th&gt;</strong> ?
L'attribut 'scope' dans une balise <th> améliore l'accessibilité en définissant si l'en-tête s'applique à une colonne ou à une ligne, ce qui est utile pour les lecteurs d'écran.
Dans cette leçon, nous allons réaliser des tableaux en HTML. Alors aujourd'hui, un tableau s'utilise uniquement pour présenter des données, des données tabulaires. Typiquement, ce sont des chiffres, un tas de choses que l'on doit placer dans des tableaux en colonne, mais il est totalement inconcevable de réaliser une page dans des tableaux tels que le conseil que vous pouvez voir encore sur Internet, mais il s'agit là de pages très anciennes, dans le temps, au tout début du web, nous réalisions des pages à l'intérieur de tableaux, mais la chose est aujourd'hui totalement obsolète. Donc, l'usage d'un tableau est uniquement réservé à la présentation de chiffres ou de données. Alors, pour réaliser un tableau, nous allons réaliser le tableau qui est présent aussi dessous, avec Chrome, Firefox, CIE et puis différents petits chiffres, octobre, novembre, décembre, janvier, février, ainsi que des pourcentages. Un tableau se compose à partir d'une balise qui s'appelle Table. Un début Table et une fin Table, ça, pour l'instant, la chose n'est pas trop mystérieuse. A l'intérieur de la balise Table, nous allons écrire le titre du tableau à l'intérieur d'une balise qui s'appelle Caption. Ici, utilisation des navigateurs en France. Donc, le tableau a déjà son titre. Ensuite, nous allons commencer par réaliser les différentes lignes du tableau. Les lignes du tableau s'introduisent avec une balise qui se nomme Tr pour Table Row. Comme d'habitude, nous n'oublions pas la fin de Tr. Là, nous sommes sur la première ligne. A l'intérieur de cette ligne, que je vais mettre comme ça, il y a quatre colonnes. Une, deux, trois et quatre. La première colonne est vide. Première cellule, on pourrait dire, parce que la notion de colonne n'existe pas vraiment dans le HTML. Première cellule, celle qui est vide, elle est introduite, comme toute cellule d'ailleurs, par une balise. Là, il s'agit d'un cas un petit peu particulier au niveau de la ligne supérieure, car il s'agit de titre. Un titre, dans un tableau, s'écrit avec la balise Th pour Table Head. Ce premier titre n'existe pas, il n'y a rien, donc on met Th vide. Si vous vous souvenez, dans des leçons précédentes, nous avons vu une entité, parmi les quelques entités que j'ai pu vous apprendre, qui était NBSP, qui signifie No Break Space, espace insécable. Donc, il est d'usage d'incorporer dans une cellule vide un NBSP, ce qui permettrait de la rendre non totalement vide. Ensuite, je vais copier simplement coller, copier, coller, et puis, nous allons écrire Chrome. Alors, je mettais H, parce qu'il s'agit bien d'un titre. Ça, c'est pour la partie supérieure. Nous avons terminé. On va faire un petit tour, quand même, dans le navigateur. Voilà, on a un début de tableau. Alors, il n'est pas extraordinaire pour l'instant, il est tout petit, mais on a bien le titre, Chrome Firefox EU, l'un à côté de l'autre. Ça va s'améliorer. Maintenant, nous allons attaquer la deuxième ligne. Alors, pour attaquer une deuxième ligne, on reprend un Tr, tableau. Et puis, sur cette deuxième ligne, première cellule de la deuxième ligne, nous avons encore un titre. Donc, de nouveau, on met un Th, pour octobre. Et à présent, ensuite, les choses vont se différencier. Il ne s'agit plus de titre, mais il s'agit de données. Donc, dans les cellules suivantes, celles-ci, celles-ci et celles-là, nous allons l'appeler par un Td, qui veut dire table data, à l'intérieur de laquelle je vais mettre simplement 33% pour éviter d'avoir trop de pages d'écriture. Et fin de Td. Donc, chaque donnée dans un tableau est représentée, est introduite par la balise Td. Voici. Donc là, 23, et ensuite 34. Voilà pour notre première ligne de tableau. Et puis, nous allons comme ça pouvoir travailler les différentes lignes, donc simplement par copier-coller. Je vais reprendre l'ensemble, et là, maintenant, j'attaque la troisième ligne, qui est la ligne novembre 2013, avec 34, 24 et 33. Enfin, descendre en bas, avec 40, 27 et 22. Voilà. Je crois que je vais m'arrêter là, pour l'instant. Donc, nous allons pouvoir regarder l'aspect de notre tableau. J'enregistre. Et voilà. Donc, nous avons un tableau qui commence à ressembler à un tableau, à quelque chose, puisqu'il est un peu plus grand, un peu plus large. Alors, maintenant, nous allons ajouter quelques attributs à l'intérieur de ce petit tableau. Ce n'est pas forcément obligatoire, mais ce n'est pas interdit. Ce n'est pas interdit dans les spécifications. Donc, nous allons le faire ici, dans la balise Table, mais vous verrez par la suite que nous ferons exactement le même travail avec des styles CSS. Donc Table, pour agrandir un petit peu notre tableau, nous allons lui dire WIDTH, donc sa taille, égale. Alors, on pourrait lui donner une taille en pixels, si vous maîtrisez à peu près l'idée de votre pixel, Bon, sachez que l'écran sur lequel je travaille est de 1280 pixels. Bon, je pourrais mettre, par exemple, 1000 pixels, mais je vais travailler en pourcentage, et on va lui mettre, par exemple, à l'effet 75% de la taille de mon écran, ou en tout cas, de la taille de la fenêtre de mon navigateur. Ça, c'est une première chose. Voici, mon tableau va être nettement plus intéressant, plus grand, en tout cas. Pour pouvoir bien différencier et avoir les petites lignes, telles que nous les voyons sur le résultat final, nous allons ajouter un petit peu de texturisation. Pour bien différencier et avoir les petites lignes telles que nous les voyons sur le résultat final, sur le résultat souhaité, nous allons ajouter un petit attribut qui s'appelle BORDER, sur lequel nous allons dire BORDER de 1 pixel, qui va nous permettre d'avoir ainsi des lignes. J'enregistre, et nous allons tout de suite regarder. Voilà, nous avons quelque chose de nettement plus intéressant, et voyez, le fait que j'ai donné une taille de 75% permet à ce tableau de s'adapter à la taille du navigateur, ce qui est, entre guillemets, presque, comme on peut dire aujourd'hui, responsive, puisqu'il s'adapte à la fenêtre du navigateur. C'est le principe même du responsive design, puisque chaque page est créée en fonction de pourcentage. Quelque chose à souligner, avant de continuer, c'est que les TH ont été visualisés en gras, représentés en gras, et centrés, alors que les TD ont été représentés en maigre, et ferrés à gauche. Donc ça, c'est une caractéristique de base de ces différentes balises, caractéristiques que vous allez encore pouvoir choisir de changer en CSS par la suite. Je vais encore ajouter des petites choses, parce que là, nous n'avons pas terminé de représenter notre tableau. Alors, je vais ajouter le fait qu'autour des blocs, on souhaite avoir un tout petit peu d'espace. Alors, ça s'appelle cellpadding. Donc ça, c'est de l'espace à l'intérieur de la cellule. Cellpadding, pour l'instant, je vais mettre 10, et on va tout de suite voir ce qui se passe. Et voilà. Vous voyez, on a 10 pixels qui sont situés tout autour. Et alors maintenant, même si on l'enlève par la suite, nous allons ajouter quelque chose qui s'appelle cellspacing, qui représente un espace tout autour de chaque cellule. Alors par exemple, on va mettre 10, pareil. Donc c'est l'espace qui est situé là, entre les cellules. Donc entre les cellules, on a à présent 10 pixels. Alors si on n'en veut pas, il suffit de mettre 0. Et voilà. Je ne sais pas si vous vous souvenez, mais avant d'écrire cellpadding et cellspacing, je vais le couper simplement pour vous montrer ce qui se passait avant. Voilà, j'actualise. Eh bien, les lignes étaient séparées, les cellules étaient séparées, et il y avait un cellspacing, on va dire, par défaut. Donc si vous ne souhaitez pas avoir ces petites doubles lignes, vous devez impérativement écrire cellspacing 0. Autrement, vous aurez cette séparation des lignes. Donc par défaut, il y a déjà quelque chose qui est mis en œuvre par le tableau. Donc voilà, nous avons vu l'essentiel des tableaux. Alors il y a d'autres petites subtilités. Par exemple, ici, nous pourrions ajouter un attribut qui s'appelle scope, qui est un attribut d'accessibilité, et qui permet de dire, ce th, il s'intéresse à la colonne. Je mets col, et il a sa ligne de lecture en colonne. Ça, c'est pour, encore une fois, des gens qui sont malvoyants, qui ne savent pas finalement dans quel ordre utiliser ce tableau. Voilà, donc ça, je ne vais pas en mettre là, ça ne sert à rien, puisque, quoi que, celui-là, il pourrait également servir. Donc c'est une première chose. Et puis, une deuxième chose, finalement, ce tableau, il est à double entrée, on peut le lire comme ça, mais on peut le lire également en octobre, etc. Eh bien, on peut écrire également, signifier qu'au niveau d'octobre, le scope, ça va être un scope en ligne. Donc on va l'écrire là. Et puis, on va l'écrire également là. Et enfin là. Donc nous avons créé un tableau qui essaye d'être accessible au moins le mieux qu'il peut. Donc vous avez vu l'essentiel de la création d'un tableau. Vous voyez, un tableau, c'est quelque chose qui est relativement verbeux, il faut quand même beaucoup de balises, beaucoup de choses pour créer un tableau. Donc c'est utile uniquement pour les représentations de chiffres, comme c'est le cas ici.
8 commentaires
5,0
8 votes
5
4
3
2
1
Polyores
Il y a 11 months
Commentaire
Bravo et bravo encore. Belle méthodologie. Hâte de voir la suite de la démystification du Html
ralahoul
Il y a 1 year
Commentaire
Une formation très intéressante et très bien construite.
eric.gk78
Il y a 3 years
Commentaire
excellent, compréhensible pour les débutants
alexwebtv
Il y a 3 years
Commentaire
Très bonne formation .
gabamano85
Il y a 3 years
Commentaire
Très belle présentation et facile à comprendre même pour un novice.
olivier_89
Il y a 3 years
Commentaire
explication très organisée et simple de comprendre pour les débutants
a.platiau_1
Il y a 3 years
Commentaire
Super formation. Très claire et très bien organisée.
ezerrou
Il y a 3 years
Commentaire
est ce la 2éme partie existe sur ce cours?
Nos dernières formations XHTML/CSS
  • Créer un site web avec HTML/CSS
    Découvrir
    Avant d'apprendre à développer et mettre en ligne votre propre site Internet, il est important de bien connaître les bases du HTML et du CSS. Dans cette formation en vidéo et cours en ligne, vous découvrez ce qu'est le HTML et CSS ?&nbsp;Le fonctionnement des sites web ainsi que la structure d'une page HTML.&nbsp; Vous êtes guider pas à pas pour apprendre à intégrer des images, de l'audio et des vidéo. Vous apprenez à gérer et ajuster les polices en CSS, à comprendre&nbsp;la structure du CSS, les tableaux, boutons et formulaires en CSS.&nbsp; Vous suivez la&nbsp;méthodologie de mise en page CSS et à styliser une page web avec le CSS. Formation pratique vous créez et stylisez les éléments principaux d'un site web avant de&nbsp;mettre en ligne et indexer un site, d'ajouter des éléments graphiques en CSS et d'animer un site en CSS
    16h20 14 leçons
  • Apprendre CSS 3
    Découvrir
    14h58 172 leçons 4,50 / 5
  • Apprendre HTML 5 - Les fondamentaux
    Découvrir
    Maîtriser les fondamentaux du language HTML5.
    5h11 101 leçons 3,67 / 5
  • Maîtriser Materialize CSS - Le framework pour le Material Design
    Découvrir
    Maîtriser le framework Materialize CSS pour faire du Material Design
    2h22 20 leçons
  • Maîtrisez les Flexbox CSS - La mise en page responsive
    Découvrir
    Maîtriser la mise en page grâce à la flexbox issue du CSS 3
    46min 9 leçons 4,33 / 5