Comment créer un tableau HTML

Lorsque vous créez des pages Web, vous devez savoir comment ajouter différents types de données et les éléments, y compris les tableaux. Pour créer une page web avec une table, procédez comme suit:

Sommaire

  1. Ouvrez votre éditeur de texte.

  2. Dans l'éditeur de texte, créez un nouveau document texte.

    La plupart des éditeurs de texte seront ouvrir un document vierge ou vide pour commencer. Si vous avez quelque chose dans le document, le vider avant de continuer.

    image0.jpg
  3. Entrez le code HTML suivant:




    Ma première page Web

    Mon tableau

    Code d'aéroportNom commun / Ville
    CWACentral Wisconsin Airport
    ORDChicago O'Hare
    LHRLondres Heathrow
  4. Enregistrez le fichier sous table.html.

    Enregistrez le fichier avec une .html l'extension. Le fichier doit être enregistré dans votre document root.

    image1.jpg
  5. Voir le fichier dans votre navigateur.

    Ouvrez votre navigateur Web et saisissez http: //localhost/table.html dans la barre d'adresse. Cela permettra de montrer une page comme celle-ci.

    image2.jpg

    Notez que la table n'a pas de frontières autour d'elle. Si vous souhaitez ajouter des bordures, continuer à travailler grâce à cet exercice.

  6. Ouvrir table.html dans votre éditeur de texte.

    Si vous avez fermé votre éditeur de texte, ouvrez-le à nouveau et la charge table.html.

  7. Modifiez le code dans table.html à ce qui suit:

    Ma première page Web

    Mon tableau

    border = "1">Code d'aéroportNom commun / VilleCWACentral Wisconsin AirportORDChicago O'HareLHRLondres Heathrow

    Notez que le seul changement est pour ajouter un espace, puis border = "1" à l'intérieur de la

    élément.

  8. Recharger table.html dans votre navigateur.

    Si vous avez fermé votre navigateur, rouvrez-le et passez à http: //localhost/table.html. Si votre navigateur est toujours ouverte, appuyez sur Ctrl + R pour actualiser la page (Commande + R sur Mac). Vous voyez maintenant une bordure autour de la table, comme indiqué ici.

    image3.jpg