Comment mettre du texte en colonnes Avec HTML

Affichage de texte dans des colonnes peut aider à améliorer la lisibilité de votre site web. Une façon de formater le texte afin qu'il affiche dans les colonnes est d'utiliser un tableau HTML. tableaux HTML prennent en charge un certain nombre de colonnes. Vous pouvez gérer la largeur et l'alignement de chaque colonne en utilisant des groupes de colonnes. Regardons un exemple simple d'une page web qui affiche des scores de jeux.

Choses que vous devez

  • Bloc-notes ou un autre éditeur de texte
  • Internet Explorer ou un autre navigateur Web

Créer une page HTML

  1. Cliquez sur le "Début" bouton. Choisir la "Tous les programmes" élément de menu. Choisir la "Accessoires" élément de menu. Choisir la "Bloc-notes" élément de menu.

  2. Tapez la commande suivante dans le document:



    Game Scores



    Ce code HTML définit la structure de base d'une page HTML et définit le texte dans la barre de titre du navigateur à "Game Scores." Quitter le élément vide pour le moment. Voilà où vous allez ajouter le contenu de la page.

  3. Cliquez sur le "Fichier" élément de menu et de choisir "Enregistrer." Si votre "Documents" dossier est pas sélectionné, sélectionnez-le. Choisir "Tous Les Fichiers" du "Enregistrer sous le type" la liste déroulante. Type "columns.html" dans le "Nom du fichier" terrain et cliquez sur le "Sauvegarder" bouton.

  4. Cliquez sur le "Début" bouton et choisissez "Documents" pour ouvrir l'Explorateur Windows. Développez le "Documents" icône dans la gauche; volet de la main. Choisir la "Mes Documents" icône de dossier.

  5. Double-cliquez sur "columns.html" et vérifier qu'un document avec le document "Game Scores" ouvre dans votre navigateur. Gardez la fenêtre du navigateur ouverte.

Ajouter un tableau à la page Web

  1. Apportez Bloc-notes pour le premier plan. Ajouter le code HTML suivant dans le élément:









    PrénomNom De FamilleRound 1Round 2Round 3

    Vous utilisez un

    élément pour créer une table. Une table comporte des colonnes et des lignes. Vous utilisez le (Ligne de tableau) élément pour définir les lignes. Dans chaque ligne, vous définissez les colonnes qui contiennent du contenu. Vous utilisez un
    (En-tête de table) élément pour ajouter une colonne qui affiche du texte en utilisant une police en gras. Ici vous avez créé une ligne qui comporte cinq colonnes de texte en gras.




  2. Cliquez sur le "Fichier" bouton et choisissez "Sauvegarder" pour enregistrer vos modifications.

  3. Apportez la fenêtre du navigateur à l'avant-plan. droit; cliquez sur la page vide et choisissez "Actualiser." Vos titres doivent être affichés.

  4. Apportez Bloc-notes pour le premier plan. Ajoutez le code suivant sur la ligne directement en dessous de l'étiquette:


    Jean
    Forgeron
    80
    75
    165


    Marie
    Dodd
    92
    140
    132

    Le (Données de la table) élément est utilisé pour définir une colonne qui affiche du texte en utilisant une police normale. Ici vous avez créé deux lignes qui ont cinq colonnes chacune.

  5. Cliquez sur le "Fichier" bouton et choisissez "Sauvegarder" pour enregistrer vos modifications.

  6. Apportez la fenêtre du navigateur à l'avant-plan. droit; cliquez sur la page vide et choisissez "Actualiser." Votre table doit être affichée.

Changer la largeur de colonne et l'alignement

  1. Apportez Bloc-notes pour le premier plan. Modifier le code HTML en ajoutant le code suivant immédiatement après la

    tag:


    Le élément est utilisé pour définir une largeur qui applique à plusieurs colonnes. Vous utilisez l'attribut span pour définir le nombre de colonnes inclus dans le groupe. Vous utilisez l'attribut de largeur pour définir la largeur de la colonne en pixels.

  2. Cliquez sur le "Fichier" bouton et choisissez "Sauvegarder" pour enregistrer vos modifications.




  3. Apportez la fenêtre du navigateur à l'avant-plan. droit; cliquez sur la page vide et choisissez "Actualiser." Votre table doit être affichée. Notez que les rubriques de la table ne sont pas alignés avec les données de la table.

  4. Changez votre code afin que le bloc ressemble à ceci:



    Le élément est utilisé pour définir la mise en forme qui applique à une ou plusieurs colonnes. Dans ce cas, vous définissez l'alignement de la gauche; la plupart des deux colonnes à "centre" alignement.

  5. Cliquez sur le "Fichier" bouton et choisissez "Sauvegarder" pour enregistrer vos modifications.

  6. Apportez la fenêtre du navigateur à l'avant-plan. droit; cliquez sur la page vide et choisissez "Actualiser." Votre table doit être affichée. Notez que les données de la table dans les deux premières colonnes sont centrées sous la rubrique.

  7. Changez votre code afin que le bloc ressemble à ceci:




    Le second élément applique aux trois prochaines colonnes dans la table. Vous définissez la largeur de ces colonnes à 50 pixels et l'alignement du texte dans les colonnes à droite; justifiée.

  8. Cliquez sur le "Fichier" bouton et choisissez "Sauvegarder" pour enregistrer vos modifications.

  9. Apportez la fenêtre du navigateur à l'avant-plan. droit; cliquez sur la page vide et choisissez "Actualiser." Votre table doit être affichée. Notez que les trois dernières colonnes sont plus étroites et les données en leur sein est droit; justifiée avec les en-têtes de colonnes.

Conseils & Avertissements

  • Si vous choisissez d'utiliser un autre éditeur de texte que le Bloc-notes, vos étapes pour créer et enregistrer un document sera différent.
  • Si vous choisissez d'utiliser un autre navigateur qu'Internet Explorer, vos mesures pour actualiser la page Web pourrait être différent.
  • Lors de l'écriture du code HTML, assurez-vous que chaque balise d'ouverture a une balise de fermeture correspondante.
» » » » Comment mettre du texte en colonnes Avec HTML