Bonjour, aujourd'hui, nous allons parler de tables et
comment vous pouvez les utiliser pour afficher vos données sur votre site Web.
Donc, ce que j'aime dire, c'
est que nous avons vraiment l'habitude de considérer les tables comme étant ce genre d'idée maléfique.
Parce que les gens n'utilisaient pas les tables pour la raison qu'ils étaient censés le faire.
Au lieu de cela, ils utilisaient des tables pour mettre les choses en place,
les étalant bien sur l'écran.
Cela a commencé à se produire au moment de HTML 2, peut-être HTML 3.1.
Et les gens ont dit, je veux vraiment que ma page soit belle et
je n'ai pas les moyens de le faire, donc je vais en faire une énorme table et en
quelque sorte de tout mettre dans différentes rangées ou colonnes.
Cela jette complètement toute l'idée de la séparation du contenu de la mise en page.
En outre, cela rend vraiment déroutant pour les gens qui pourraient utiliser des
appareils fonctionnels, parce qu'ils se demandent, est-ce vraiment tout un tas de données,
ou y a-t-il du contenu qui devrait juste être formaté de manière régulière.
Donc on va commencer à parler de tables.
Et ce que je veux vraiment faire, c'est souligner l'idée que vous ne devriez utiliser des
tables que si vous avez une sorte de données affichées.
Avant même de commencer à coder une seule chose,
j'ai besoin que vous esquiviez votre disposition de ce à quoi votre table devrait ressembler.
Maintenant, je l'ai dit à mes élèves encore et encore, et ils disent oui, oui, et
puis ils commencent à coder.
Et puis ils disent oui, oui, et puis ils commencent à coder.
Et, après environ la quatrième ou la cinquième fois, ils se rendent compte,
oh, c'est beaucoup plus facile d'écrire du code propre la première fois, que de réparer le code cassé.
Et donc, ils commencent et ils pensent, d'accord, combien de lignes et de
colonnes ai-je réellement besoin pour représenter toutes mes données ?
Et puis vous allez un peu plus loin et dites, bien y a-t-il des lignes ou des
colonnes où j'ai réellement besoin d'enjamber plusieurs cellules, ou
ce que nous appelons les petites boîtes dans la table ?
Parce que si c'est le cas, ça va être plus facile si j'ai tracé ça pour trouver
où je vais avoir besoin d'attributs spéciaux pour que ça arrive.
Parce que l'une des choses les plus importantes à savoir lorsque vous faites des tables est que
le navigateur s'attend à ce qu'il y ait le même nombre de cellules sur chaque ligne.
Si tu ne fais pas ça, ça va avoir l'air très désordonné.
Une fois que vous avez décidé à quoi votre table devrait ressembler,
il est temps de commencer à penser aux balises.
Vous commencez avec la balise table et c'est fondamentalement juste un élément conteneur qui
va contenir tous les autres attributs et toutes les autres balises à l'intérieur de celui-ci.
Vous allez avoir la ligne de table et puis ici pour td, j'ai des colonnes, mais
ce que je pense vraiment que ce serait mieux est de penser à cela comme des cellules de table, pas vraiment des
colonnes parce que ce que vous faites est de parler de chaque boîte individuelle.
Donc, à l'intérieur de la table, vous allez avoir une ou plusieurs rangées de table.
Et puis à l'intérieur de chaque ligne de tableau, vous aurez un ou plusieurs éléments TD, donc
les colonnes ou les cellules.
Voici donc le code pour créer une table très simple.
Bien que ça semble très alambiqué et qu'il y a beaucoup de choses qui se passent ici.
La plupart de cela ne sont que des informations pour le navigateur.
Lorsque nous regardons la page réelle qui est générée, vous verrez que c'est très
propre et simple.
J' ai donc mon code pour
ma table à l'extérieur et ensuite chacune de mes lignes de code ici est une ligne.
J' ai mon départ tr et ma fin tr.
Et puis à l'intérieur de chaque rangée, j'ai trois éléments, un, deux,
trois qui sont à l'intérieur de la balise td.
Et je vais vous dire tout de suite que quand j'ai écrit ce code, ça avait l'air
bien, mais j'ai un peu foiré parce que j'avais oublié de mettre ma balise de fin.
Alors assurez-vous que lorsque vous codez ceux-ci, vous êtes très propre et concis.
Et si vous le faites correctement, cela créera une table simple,
comme je l'ai dit, avec neuf éléments.
Un, deux, trois, quatre, cinq, six, sept, huit, neuf.
C' est aussi simple que vous pouvez obtenir, autant que la table va.
Maintenant, dans certains cas, vous pouvez ajouter ce que nous appelons des en-têtes de table à votre code.
Les en-têtes de tableau sont l'idée qu'en haut de chaque colonne, ou même en haut ou
au début de chaque ligne, vous avez une sorte de texte qui est en gras, qui indique que
ce ne sont pas des données, c'est en fait le nom des données que nous examinons.
Maintenant c'est bien, je veux dire que ce n'est pas bien, mais ce que certaines personnes feraient c'est qu'elles feraient
juste ces éléments de TD réguliers et peut-être les rendaient audacieux.
Donc les gens qui le regardent peuvent dire, oh hey regarde.
C' est audacieux, il doit donc être plus important.
Mais nous voulons vraiment éviter de le faire.
Au lieu d'utiliser un TD avec une sorte de police en gras,
nous voulons utiliser une balise sémantique TH, qui signifie en-tête de table.
Donc ici ces trois lignes de code sont exactement les mêmes qu'avant, mais
j'ai ajouté une nouvelle ligne, où au lieu de td j'ai th.
J' ai donc la première ligne, la deuxième ligne, la troisième ligne, etc.
Et ce que vous pouvez voir ici, c'est que ce que nous obtenons est ce joli petit
titre de table en haut de chacun, qui est à la fois permet visuellement à l'utilisateur de savoir que ce
sont des en-têtes, mais aussi sémantiquement transmet la même information.
Donc, une des choses que j'ai mentionnées plus tôt, quand vous concevez votre table,
c'est que vous voulez décider si vous allez couvrir plusieurs cellules.
Il se peut que la table que vous voulez faire n'est pas une sorte de
grille parfaite pour les orteils, ou parfait neuf par neuf.
Vous pouvez donc combiner plusieurs lignes ou
plusieurs colonnes en utilisant les attributs rowspan et column span.
À l'intérieur de votre élément, vous incluriez rowspan équivaut à deux si vous vouliez couvrir
deux lignes, ou la plage de colonne égale à cinq si vous vouliez l'avoir sur cinq colonnes.
Très bien, laissez-moi aller de l'avant et vous montrer un exemple avec du code et
encore une fois, je me rends compte que si vous regardez cela sur
un petit écran, cela semble vraiment être beaucoup d'informations à digérer.
Mais ce n'est pas vraiment ce qui se passe.
J' ai une table simple, où j'ai mes en-têtes de table avec le nom de l'enfant
, puis le nom du parent.
Et puis je vais de l'avant et je commence à mettre un enfant, et
avec chaque enfant, j'inclut leurs parents.
Donc ici, j'ai rowspan égale deux pour Catherine,
ce qui signifie que je veux vraiment que ma cellule Catherine prenne deux lignes. La
même chose avec la cellule Edward.
Maggie, je suis partie complètement seule.
Donc, allons juste regarder le résultat final, et je pense que c'est vraiment si
nous arriverons à la chaîne, cela va vous aider à comprendre ce que fait ce code.
Donc encore une fois, j'ai le nom de l'enfant et le nom du parent, et
voici les deux cellules où j'ai fait l'étendue de la ligne.
Et vous pouvez voir, il a pris plusieurs rangs parce que dans ce cas,
Catherine et Edward avaient deux parents avec lesquels nous voulions le mettre ensemble.
Encore une fois, pas un concept difficile, mais c'est le cas que si vous n'y pensiez pas
, et que nous sommes retournés à votre code et avons juste commencé à lancer rowspan et
columnspan, il devient juste très désordonné et plus difficile à déboguer.
Une des choses que vous avez pu remarquer,
en haut de la table, j'ai inclus un attribut de bordure.
La raison pour laquelle j'ai fait cela est parce que je pense qu'il est beaucoup
plus facile de voir cette envergure ici parce que j'ai les lignes autour de chaque cellule.
Ainsi, vous pouvez utiliser l'attribut border pour aller de l'avant et
mettre des lignes entre chacune de vos cellules.
Et c'est très commun de le faire.
Mais, encore une fois, dans votre HTML, j'essaie d'éviter le style.
C' est quelque chose que nous pouvons ajouter plus tard si vous décidez d'en apprendre plus sur CSS.
Mais c'est un attribut qui est si couramment utilisé, je voulais aller de l'avant et le
mettre là pour que vous puissiez voir ce qui se passait.
Ensuite, parlons des légendes.
Alors, comment lier le texte à un tableau spécifique ?
Ce que les gens faisaient, c'est qu'ils mettaient dans une sorte de cap, h2 ou h3 et
qu'ils le mettaient juste au-dessus ou juste au-dessous de la table.
Donc visuellement, si vous le regardiez, vous pourriez comprendre, oh,
ça va avec la table.
Mais encore une fois, je veux vraiment vous pousser à utiliser des balises sémantiques.
Donc, au lieu de faire cela, vous pouvez aller de l'avant et
utiliser la balise de légende à l'intérieur de la table et
cela aidera tout le monde à savoir que oh cette légende va avec cette table spécifique.
Alors, allons de l'avant et révisons.
Numéro un, les tables ne doivent être utilisées que pour les données tabulaires.
Ne l'utilisez pas pour la mise en page.
Deux, dessinez votre table avant de coder votre table.
Ça va te sauver tant de chagrin à la fin, je te le promets.
Enfin, et c'est la troisième et la plus importante chose que j'espère que vous partez avec,
est que vous devez vérifier les balises non fermées.
L' une des choses qui est génial à propos des navigateurs lorsque vous développez
localement, vous tapez votre code et vous le testez et le regardez, est que
votre navigateur peut généralement comprendre ce que vous vouliez faire, même si vous avez foiré.
D' accord.
Et les tables sont un bon exemple où vous pouvez oublier de fermer certaines balises,
mais votre navigateur sait en quelque sorte ce que vous vouliez faire.
Mais plus tard, si vous décidez de faire une table, et que vous allez la télécharger, et
vous devez vraiment vous assurer que les données sont valides et bien représentées.
L' une des pires choses que vous pouvez faire est de laisser vos balises non fermées.
Assurez-vous donc de valider votre code,
chaque fois que vous écrivez une table ou vraiment chaque fois que vous écrivez un code.
Et vous serez vraiment en mesure d'être sûr que vous écrivez le meilleur code possible.