Sådan oprettes et bord i html

ThisTeaches dig, hvordan du opretter en grundlæggende informationstabel ved hjælp af HTML, såvel som hvordan man tilføjer hjælpsomme elementer som grænser til bordet.

Trin

Del 1 af 2:
Oprettelse af et bord
  1. Billedet med titlen Opret et bord i HTML Trin 1
1. Åbn et tekstredigeringsprogram. Du bruger typisk NotesPad ++ på Windows og TextEdit på Mac. For at finde disse programmer:
  • Windows - Åben Start
Billede titlen WindowsStart.jpg
, type Notepad ind i start, og klik Notepad På toppen af ​​vinduet.
  • Mac - Åben Spotlight
    Billede Titlet MacSpotlight.jpg
    , indtaste TextEdit, og klik TextEdit under spotlight søgefeltet.
  • Billedet med titlen Opret et bord i HTML Trin 2
    2. Indtast og tryk på ↵ ENTER. Thetag angiver starten på et bord, og du trykker på ↵ Indtast dine tekstredigerer for at starte en ny linje.
  • Når du bruger HTML, skal du altid trykke på ↵ Enter efter at have oprettet en line kode for at flytte til næste linje.
  • Billedet med titlen Opret et bord i HTML Trin 3
    3. Indtast og tryk på ↵ ENTER. Denne kommando angiver, at du opretter et bestemt element i tabellen.
  • Billedet med titlen Opret et bord i HTML Trin 4
    4. Tilføj en kolonne til dit bord. Indtast for at angive en kolonne, indtast etiketten for kolonnen, skriv ind for at lukke kolonnen, og tryk på ↵ ENTER.
  • For eksempel: At oprette en tabelkolonne mærket "Antal hunde", du ville skrive Antal hunde ind i din teksteditor.
  • Billedet med titlen Opret et bord i HTML Trin 5
    5. Tilføj flere kolonner. Afhængigt af hvor mange kolonner du vil have dit bord til at have, vil dette trin variere. Når du har tilføjet alle de kolonner, du vil bruge, skal du fortsætte til næste trin.
  • Kolonner er oprettet fra venstre til højre.
  • Billedet med titlen Opret et bord i HTML Trin 6
    6. Indtast og tryk på ↵ ENTER. Denne kommando angiver, at alle tabelkolonner er oprettet og lukker den del af tabelens kode.
  • Billedet med titlen Opret et bord i HTML Trin 7
    7. Indtast igen, og tryk derefter på ↵ ENTER. Du tilføjer nu dine rækker til dit bord.
  • Billedet med titlen Opret et bord i HTML Trin 8
    8. Tilføj en celle til dit bord. Indtast for at angive et stykke information under den første kolonne, skriv ind i oplysningerne, skriv ind for at lukke cellen, og tryk på ↵ ENTER.
  • For eksempel: At oprette en celle med nummeret "23" I det ville du skrive 23 ind i din teksteditor.
  • Billedet med titlen Opret et bord i HTML Trin 9
    9. Tilføj flere celler til dit bord. Antallet af celler i en række skal korrelere til antallet af kolonner - for eksempel, hvis du har tre kolonner, skal du have tre celler i træk. Når du har oprettet en hel række, kan du fortsætte.
  • Billedet med titlen Opret et bord i HTML Trin 10
    10. Luk den aktuelle række. Indtast og tryk på ↵ Enter for at lukke rækken. På dette tidspunkt kan du åbne en anden række ved at indtaste og trykke på ↵ ENTER, tilføje individuelle celler, og derefter lukke rækken.
  • Billedet med titlen Opret et bord i HTML Trin 11
    11. Luk dit bord. Under den endelige linje i tabellen, skriv ind . Dette angiver slutningen af ​​bordet.
  • Billedet med titlen Opret et bord i HTML Trin 12
    12. Gennemgå dit bord. Dit bord skal se sådan ud:
  • Dag
  • Måned
  • År
  • 4
  • marts
  • 1990
  • 27
  • juli
  • 1993
  • Billedet med titlen Opret et bord i HTML Trin 13
    13. Gem dit arbejde. Trykke Ctrl+S (Windows) eller ⌘ kommando+S (Mac) For at gemme dit dokument skal du indtaste et navn til dokumentet og klikke på Gemme når du bliver bedt om det.
    • Del 2 af 2:
    Tilføjelse af tabelmodifikatorer
    1. Billedet med titlen Opret et bord i HTML Trin 14
    1. Udvide dit bord. Udskift thetag på toppen af ​​arket med og derefter skrive
     Style ="Bredde: 100%"> ind i taggen. Sørg for, at du holder plads mellem "bord" og "stil".
    • Slutresultatet skal se sådan ud:
    • Du kan eksperimentere med procentdelen. For eksempel, skriv ind 50 i stedet for 100 vil resultere i et halv-så stort bord.
  • Billedet med titlen Opret et bord i HTML Trin 15
    2. Opret grænser til dit bord. Opret et rum øverst på dokumentet over thetag, så gør følgende:
  • Indtast og tryk på ↵ ENTER.
  • Indtaste bord, th, td { og tryk på ↵ ENTER.
  • Indtaste Border: 1px solid sort- og tryk på ↵ ENTER.
  • Indtaste Border-Collapse: Collapse- og tryk på ↵ ENTER. Spring over denne linje, hvis du vil have dine grænser til at have to linjer i stedet for en.
  • Indtaste } og tryk på ↵ ENTER.
  • Indtast og tryk på ↵ ENTER.
  • Billedet med titlen Opret et bord i HTML Trin 16
    3. Tilføj en etiket til dit bord. Lav et rum lige under thetag, så gør følgende:
  • Indtaste
  • Indtast den tekst, du vil bruge (e.G., Fødselsdage)
  • Indtast og tryk på ↵ ENTER.
  • Dit slutresultat skal ligne dette: Fødselsdage

    • Tips

    Det hjælper med at indrellere relaterede sektioner af kode, så du nemt kan henvise dem senere. For eksempel kan du indgive en hel del af celler.
  • For at gøre visse tekst fed, kan du placere tags rundt om den pågældende tekst. For eksempel at vende "Antal år" ind i "Antal år", du vil skrive Antal år ind i teksteditoren.

    • Advarsler

    Husk altid at lukke kommandoer.
    Del på sociale netværk :
    Lignende