Comment mettre du texte en colonnes avec html

<article data-type="article">
Une partie du texte est plus lisible lorsqu`il est affiché dans les colonnes.

Affichage de texte dans les 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. tables HTML supportent 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

  • Clique le "Démarrer" bouton. Choisir la "Tous les programmes" élément du menu. Choisir la "Accessoires" élément du menu. Choisir la "Bloc-notes" élément du menu.

  • Tapez ce qui suit dans le document:



    scores du jeu



    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 "Scores du jeu." Quitter le élément vide pour l`instant. Voilà où vous allez ajouter le contenu de la page.

  • Clique le "Fichier" élément de menu et choisissez "Sauvegarder." Si ton "Documents" dossier est pas sélectionné, sélectionnez-le. Choisir "Tous les fichiers" du "Sauvegarder comme type" la liste déroulante. Type "columns.html" dans le "Nom de fichier" champ et cliquez sur le "sauvegarder" bouton.

  • Clique le "Démarrer" bouton et choisissez "Documents" pour ouvrir la fenêtre Explorer. Élargir la "Documents" icone dans la gauche; volet de la main. Choisir la "Mes documents" icône de dossier.

  • Double-cliquez sur "columns.html" et vérifier qu`un document avec le document "scores du jeu" ouvre dans votre navigateur. Gardez la fenêtre du navigateur ouverte.

Ajouter un tableau à la page Web

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









    PrénomNom de familleTour 12ème roundRound 3

    Vous utilisez un

    élément pour créer une table. Une table comporte des colonnes et des lignes. Vous utilisez la (Ligne de table) é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 de caractères gras. Ici, vous avez créé une ligne qui a cinq colonnes de texte en gras.




  • Clique le "Fichier" bouton et choisissez "sauvegarder" pour enregistrer vos modifications.

  • Apportez la fenêtre du navigateur au premier plan. droite, cliquez sur la page vide et choisissez "Rafraîchir." Vos titres doivent être affichés.

  • Apportez le Bloc-notes au premier plan. Ajoutez le code suivant sur la ligne directement en dessous de la balise:


    John
    Forgeron
    80
    75
    165


    Marie
    Dodd
    92
    140
    132

    le (Données de 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.

  • Clique le "Fichier" bouton et choisissez "sauvegarder" pour enregistrer vos modifications.

  • Apportez la fenêtre du navigateur au premier plan. droite, cliquez sur la page vide et choisissez "Rafraîchir." Votre table doit être affichée.

Modifier la largeur de colonne et l`alignement

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

    Étiquette:


    le l`é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.

  • Clique le "Fichier" bouton et choisissez "sauvegarder" pour enregistrer vos modifications.

  • Apportez la fenêtre du navigateur au premier plan. droite, cliquez sur la page vide et choisissez "Rafraîchir." Votre table doit être affichée. Notez que les rubriques de la table ne sont pas alignées avec les données de la table.

  • Changez votre code afin que le bloc ressemble à ceci:



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

  • Clique le "Fichier" bouton et choisissez "sauvegarder" pour enregistrer vos modifications.

  • Apportez la fenêtre du navigateur au premier plan. droite, cliquez sur la page vide et choisissez "Rafraîchir." 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.

  • Changez votre code afin que le bloc ressemble à ceci:




    La deuxième élément applique aux trois colonnes suivantes de la table. Vous définissez la largeur de ces colonnes à 50 pixels et l`alignement du texte dans les colonnes à droite, justifiée.

  • Clique le "Fichier" bouton et choisissez "sauvegarder" pour enregistrer vos modifications.

  • Apportez la fenêtre du navigateur au premier plan. droite, cliquez sur la page vide et choisissez "Rafraîchir." Votre table doit être affichée. Notez que les trois dernières colonnes sont plus étroites et les données en leur sein est juste; justifié avec les têtes de colonne.

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 étapes pour actualiser la page Web peut être différent.
  • Lors de l`écriture du code HTML, assurez-vous que chaque balise d`ouverture a une balise de fermeture correspondante.
Technologie / Programmation informatique / Langages de programmation informatique

AUTRES

» » » » Comment mettre du texte en colonnes avec html