Créer un tableau HTML


Les tableaux sont un des éléments les plus couramment utilisés dans la conception de page Web. Une table peut être utilisée pour afficher des données ou comme une mise en page de modèle pour une page Web. Les élèves de mes classes de programmation d'initiation souvent essaient de créer des tables sans comprendre la conception ou la mise en page d'une table et de demander "pourquoi ne pas regarder à droite?"

Pour comprendre comment l'apparence d'un tableau sur une page sur le code d'une table, vous devez d'abord comprendre ce qui est une table. Un tableau est un ensemble d'éléments de données affichées en rangées et colonnes; l'intersection d'une rangée et de la colonne forme une cellule. Une représentation d'une table de famille est une feuille de calcul, comme une feuille de calcul Microsoft Excel, qui traite chaque élément de données avec une référence de cellule ..




Les élèves de ma programmation d'introduction de classe, qui utilise des langages HTML et JavaScript que la démonstration pour des missions de laboratoire, souvent confus lors de l'insertion des tables, en essayant de rendre la tâche trop compliquée. Donc, je ai écrit ce hub pour réduire la confusion.

Le tableau HTML simple

En HTML, un programmeur crée une table avec la paire de balises HTML .... Comme mentionné dans le moyeu essentielles balises HTML, HTML est un langage basé sur les étiquettes de sorte que la table d'éléments contient des endroits contenu programmeur entre le couple de balises.

Depuis une table est un ensemble de lignes et de colonnes, le programmeur a besoin d'une méthode pour identifier des lignes et des colonnes. Pour localiser les lignes et les colonnes, utiliser le HTML ... et ... paires de balises. La paire est un slogan de la table et la balise paire représente les données de la table, qui contient le contenu d'une cellule dans un tableau spécifique.

Le programmeur insère la paire de balises à l'intérieur de la paire de balise. Selon l'explication ci-dessus, le tableau HTML simple ressemblerait à l'extrait de code suivant:

Mon tableau un téléphone

Le code ci-dessus, lorsqu'il est ajouté à une page Web fera une table très simple qui contient une ligne avec un élément de données comme photo de droite.

Toutefois, le tableau ne ressemble pas à une table, mais comme une page simple avec une ligne de texte. Il ya quatre raisons pour cette représentation:

  • Table en fil vers la gauche
  • la table contient un seul élément
  • Le tableau ne contient pas de treillis
  • la table ne contient pas de


Se il vous plaît Note: Tous les extraits de code dans ce hub contiennent que des envois à expliquer. Si vous avez besoin d'aide visualiser les exemples dans un navigateur, voir les balises HTML essentiels de moyeu.

Placez le tableau

Nous essayons de nettoyer le look de la table sur un peu "en plaçant la table. Procédé pour positionner la table est d'utiliser les paires ... balises HTML. Cette paire de centres tag tous les éléments entre les balises, donc si nous encapsolate notre table de code simple au sein de la paire de tag, le tableau fera le centre de l'écran du navigateur.

Tant que nous nettoyons l'apparence de la table, que sur ajoute un autre élément de données à la table pour commencer la teneur en viande d'une certaine façon? Comme l'idée; très bien. Ajouter un peu plus de contenu avec l'ajout d'un autre élément de données en utilisant la paire de balises et nous nous concentrons la table avec le couple.

My One peut-être deux téléphones cellulaires Tableor

Comme vous pouvez le voir, le tableau sur la droite est centré horizontalement dans l'affichage et contient un peu plus de données. Cependant, même si codé comme une table, ce que nous voyons affiché semble être une simple déclaration.

Les tableaux comprennent des lignes et des colonnes afin d'ajouter quelques lignes à commencer à tourner la table par une simple déclaration pour une présentation des données. Nous allons utiliser la paire de balises pour ajouter d'autres lignes à la table et de la paire de balises à insérer des données à l'intérieur des lignes.

Tableau Quadrillage

Seuls ces mesures seront ajouter plus de contenu à la table, mais la table seront toujours manquant dans la présentation. La simple addition de plusieurs lignes et de colonnes se empiler les éléments ci-dessus de l'autre dans les lignes et colonnes, mais la table doit encore avoir une certaine forme de séparation.

Nous ajoutons table grilles sous la forme d'une bordure autour des cellules pour fournir la séparation et de donner un aspect plus défini à notre table. Pour ajouter des bordures autour des cellules du tableau et ajoutez l'attribut border à la balise dans la définition de la table avec des lignes et des colonnes ajoutées comme suit:

My One peut-être deux téléphones cellulaires Tableor ou quatre threeor kindasounds que Dr. Seuss Table

En-têtes HTML

Maintenant notre table commence à ressembler à une table. La table contient plusieurs lignes et quelques colonnes et nous avons défini les limites des cellules. Le simple ajout de la petite enceinte attention à la présentation de la table et permet d'isoler des cellules uniques.

Pour définir le contenu de la table, nous alos ajouté une paire de têtes avec le tag HTML paires. Nous avons inséré ces balises dans des lignes individuelles représentées par les paires de balises au haut du tableau.

Dans l'étape suivante, nous allons également ajouter un peu de «tableau de profondeur à l'augmentation de la taille du conseil, qui donne la table un aspect 3D. Pour ce faire, ajoutez l'attribut frontière dimension d'attribut dans la balise table.

Deux Tableau Colonne Première colonne 2ème colonne My One peut-être deux téléphones cellulaires Tableor ou quatre threeor kindasounds que Dr. Seuss

Header Couleur de fond

Maintenant notre table a une certaine profondeur de champ. Il ressemble à une table et présente un aspect 3D. Vous pouvez augmenter la taille de la table en ajoutant plus de lignes et de colonnes dans les balises HTML et, si désiré. Notez également que nous avons ajouté une autre tête en haut de la table et que la tête se écoule à travers les deux colonnes. Nous avons traversé la ligne à travers les colonnes en ajoutant le "colspan =" 2 "'attribut à la balise d'ouverture. Cet en-tête définit la table ajoutée ou ajoute un titre.

Mais supposons que nous voulons notre table pour vraiment se démarquer et de regarder plus organisée. Pour ce faire, vous pouvez ajouter une couleur de fond pour la tête et peut-être centrer les données dans les éléments cellulaires. Il existe des méthodes obsolètes de le faire dans le code HTML et les balises, mais ces méthodes ne passeraient pas les contrôles de validation pour les dernières versions de HTML (la plupart des versions à venir dans un autre centre). Cependant, nous sommes en mesure d'accomplir la tâche en utilisant les styles dans le document html.

  • éditeur de texte pour la programmation HTML
    Si vous êtes nouveau à l'écriture du code source, alors vous devez en apprendre davantage sur les outils de développement appropriés.

Utiliser Style pour formater des tableaux HTML

Pour utiliser le style pour formater l'apparence d'un tableau HTML, vous devez ajouter du code à la section d'en-tête du fichier HTML dans la balise HTML .. paire juste en dessous de la balise de fermeture pour le titre HTML. Les moyeux balises HTML essentielle montre l'emplacement de ces balises dans le fichier HTML.

A notre table, il y aura deux types d'éléments de table de format, qui sont les éléments de l'en-tête des tableaux et des données de table; représenté par HTML .. et .. paires de balises respectivement. Cependant, nous devons d'abord diriger le navigateur à utiliser notre style pour le formatage. La paire de tag HTML dirige le navigateur à utiliser un style particulier, identifié par le spécifique 'rel = "stylesheet" type = "text/css".' Ainsi, le code pour le style est situé entre la paire de balises et le type de style CSS est signifie Cascading Style Sheet.

Dans le code ci-dessus sur la ligne 2, le "e" identifie l'élément table de tête comme l'élément que ce bloc de style de contrôle de code. Le bloc de code est tout entre la gauche et droite accolades "{..}".

Le "TD" sur la ligne 8 identifie les données de table de l'élément et le code bloc, identifié de la même manière que ci-dessus.

Les attributs dans les blocs contrôle le formatage donc une fois les styles ont été ajoutés à l'en-tête, ces styles qui se appliquent à chacun des éléments identifiés dans la page Web. Par conséquent, il suffit d'écrire le code pour les styles fois tête et les styles se appliquent à chaque table est créée dans la table.

Dans le e-dessus de style, hauteur: attribut spécifie la hauteur de la ligne d'en-tête en pixels, la font-weight: attribut contrôle l'apparence du texte (gras dans ce cas), text-align: Indique où placer texte dans une cellule, et la couleur de fond: attribut contrôle la couleur de l'arrière-plan. Les couleurs peuvent être spécifiées en utilisant le nom d'une couleur (jusqu'à ce que la couleur identifiée est reconnu par les navigateurs Web) ou les valeurs de couleur pour chacune des couleurs rouge, bleu et vert peuvent être utilisés. Par exemple, aurait #ffffff spécifier le blanc, ff0000 préciseraient rouge, 00FF00 préciser bleu, vert et 0000FF préciserait. Shades sont créés en réglant chacune des valeurs de couple entre 00 et suivants.

Notre table enfin montre un personnage réel.

Remarque: Il ya beaucoup d'autres attributs de style qui peuvent être utilisés pour de nombreux autres éléments et pas d'autres façons d'appliquer le style l'aide de feuilles de style en cascade (CSS), mais ces méthodes sont en dehors du champ d'application de cette plate-forme .

Vous voulez en savoir plus? continuer à trouver comment créer un formulaire HTML.

Ce hub intéressante, Id aiment vous entendre,

Se il vous plaît laisser un commentaire.


(0)
(0)

Commentaires - 0

Sans commentaires

Ajouter un commentaire

smile smile smile smile smile smile smile smile
smile smile smile smile smile smile smile smile
smile smile smile smile smile smile smile smile
smile smile smile smile
Caractères restants: 3000
captcha