Les tableaux de données répertorient diverses informations dans des colonnes et des lignes pour une lecture facile. Les données sont généralement en partie numériques avec des étiquettes de texte. Un exemple est un tableau de données qui montre combien de calories une personne mange chaque jour. La création d'un tableau de données en ligne peut être effectuée avec HTML ou le langage de navigateur CSS plus complexe. Le tableau final ressemble à un tableau de données créé dans une feuille de calcul ou sur papier. La seule différence est le codage d'arrière-plan, qui n'est pas visible à moins de regarder le code source. Le codage peut être créé par des éditeurs HTML, du texte ou d'autres moyens. Il existe de nombreux sites en ligne qui offrent la possibilité de saisir des données, de définir quelques attributs et de créer tout le codage de la table pour vous. Les tableaux de données en ligne sont généralement utilisés dans le cadre d'une page Web. Les tableaux de données sont souvent utilisés pour créer des listes d'articles avec des catégories, comme des articles à vendre. Certaines pages Web les utilisent pour afficher des statistiques à titre d'information. Bien que les tableaux de données puissent être utilisés hors ligne pour l'impression ou dans les rapports, il est généralement préférable d'utiliser un tableur, tel que Microsoft Office Excel, qui offre de nombreuses autres fonctionnalités pour travailler avec des données. Ce guide montre comment créer un tableau de données HTML avec le Bloc-notes.
Ouvrez un éditeur HTML ou simplement un document texte du Bloc-notes ordinaire pour entrer du code HTML. Le Bloc-notes fonctionne bien si vous êtes habitué au codage HTML. Les éditeurs HTML accélèrent les tâches répétitives, mais certains, comme Frontpage, ajoutent un codage supplémentaire inutile qui peut ralentir les pages Web. La meilleure chose à faire est d'abord de coder avec un éditeur HTML, puis de revenir en arrière et de modifier le code à la main pour le nettoyer.
Décidez des attributs du tableau pour la bordure, la largeur, la couleur d'arrière-plan et les couleurs de police. Vous devez prendre en compte la mise en page, la largeur, les couleurs et autres attributs de la page Web pour rendre le tableau facilement lisible. Vous devez également décider du nombre de lignes et de colonnes nécessaires pour les données. Commencez à définir les attributs de la table. (Notre exemple montre le nombre de calories consommées au déjeuner et au dîner chaque jour de la semaine. Nous avons besoin de trois colonnes (Jour, Déjeuner et Dîner) et de sept lignes (deux pour les étiquettes et une pour chaque jour de la semaine).
Ajoutez une bordure autour du tableau et des cellules de données. Les bordures séparent les données en cellules pour une visualisation facile. Il est mesuré en pixels et peut recevoir une valeur de 0 pour ne pas les utiliser. Une bordure d'un ou deux pixels convient généralement. L'étiquette de la bordure est
bgcolor=border="CHOSEN_BORDER_WIDTH"
La couleur de la bordure peut être modifiée avec la balise
bordercolor="CHOSEN_COLOR"
qui utilise les termes de base des couleurs, tels que le rouge ou le noir ou les codes de couleur hexadécimaux à six chiffres. Les hexadécimaux offrent plus de couleurs. Notre exemple utilise border="2" et bordercolor="black".
Déterminez la largeur de toute la table. Il est mesuré en pixels ou en pourcentage de la taille de l'écran. Les pixels sont définitifs et les pourcentages permettent au tableau de s'adapter à différentes tailles d'écran. Essayez de juger de la largeur en fonction de la largeur des données sur les lignes. Si vous découvrez plus tard que la table est trop mince ou trop large, elle peut être changée. Notre exemple utilise width="175".
Définissez la couleur d'arrière-plan des cellules de données. Elle est différente de la couleur de fond de la page, qui peut offrir un bon contraste. La balise est
bgcolor="CHOSEN_COLOR"
tout comme la couleur de la bordure. Notre exemple utilise bgcolor="white".
Définissez la couleur de police du texte dans les cellules. Assurez-vous que la couleur contraste bien avec l'arrière-plan, afin qu'elle soit facilement lisible. La lumière sur l'obscurité ou l'obscurité sur la lumière fonctionnent toujours mieux. La balise est
font="CHOSEN_COLOR"
Notre exemple est font="black", qui contraste bien avec le fond blanc.
Écrivez les balises de table complètes entre une flèche gauche et droite avec un espace entre les attributs de balise et en commençant par la balise de table devant. L'ordre des balises n'a pas d'importance, tant que "table" est à l'avant.
Déterminez les largeurs des colonnes. La largeur de chaque colonne dépend de la largeur de l'ensemble du tableau. Prenez la largeur du tableau et divisez-la par le nombre de cellules pour obtenir des colonnes de taille égale. Si nécessaire, ajustez les largeurs des colonnes, mais le total ne peut pas dépasser la largeur du tableau. Lorsqu'une largeur de cellule change, les autres cellules doivent être ajustées pour totaliser la largeur du tableau. (Notre exemple a une largeur de 175 et trois colonnes par ligne, donc une répartition égale d'environ 59. La répartition réelle est 70, 60, 40.)
Commencez à ajouter vos données. Tout d'abord, commencez une nouvelle ligne et ajoutez une ligne de tableau avec le code
Entrez vos données pour la cellule; en utilisant ce code pour représenter les cellules vides :
Fermez la cellule avec la balise. La balise bordercolor est utilisée pour spécifier la couleur de la bordure de la cellule, si vous le souhaitez. S'il est omis, la couleur de bordure par défaut du tableau est utilisée. Le premier code de cellule de notre exemple est :
Répétez la création de cellules de données de tableau, chacune sur une nouvelle ligne, jusqu'à ce que toutes les cellules de la ligne soient complètes. Puis terminez la ligne avec la balise. Commencez la ligne suivante avec le même processus, en commençant par le
Fermez le code de la table avec le avec étiqueter. Notre code de table final, s'il se termine après deux lignes de données, est ci-dessous.
Choses dont vous aurez besoin
- Éditeur HTML ou Bloc-notes
- Données