Hur man skapar ett bord i html

Thistaaches du Hur man skapar ett grundläggande informationsbord med HTML, liksom hur man lägger till hjälpsamma element som gränser till bordet.

Steg

Del 1 av 2:
Skapa ett bord
  1. Bild med titeln Skapa ett bord i HTML-steg 1
1. Öppna ett textredigeringsprogram. Du brukar använda anteckningsblock ++ på Windows och TextEdit på Mac. För att hitta dessa program:
  • Fönster - Öppna Start
Bild med titeln WindowsStart.jpg
, typ anteckningsblock i början, och klicka på Anteckningsblock På toppen av fönstret.
  • Mac - Öppna Strålkastare
    Bild med titeln macspotlight.jpg
    , Skriv in textport, och klicka på Textport Under fältet Spotlight.
  • Bild med titeln Skapa ett bord i HTML-steg 2
    2. Skriv in och tryck på ↵ Ange. Thetag anger starten på ett bord och trycker på ↵ ENTER, uppmanar din textredigerare att starta en ny linje.
  • När du använder HTML måste du alltid trycka på ↵ Enter efter att ha skapat en rad kod för att flytta till nästa rad.
  • Bild med titeln Skapa ett bord i HTML-steg 3
    3. Skriv in och tryck på ↵ Ange. Det här kommandot indikerar att du ska skapa ett visst element i tabellen.
  • Bild med titeln Skapa ett bord i HTML-steg 4
    4. Lägg till en kolumn i ditt bord. Skriv in för att ange en kolumn, skriv in etiketten för kolumnen, skriv in för att stänga kolumnen och tryck på ↵ Enter.
  • Till exempel: För att skapa en tabellkolumn märkt "Antal hundar", du skulle skriva Antal hundar in i din textredigerare.
  • Bild med titeln Skapa ett bord i HTML-steg 5
    5. Lägg till fler kolumner. Beroende på hur många kolumner du vill att ditt bord ska ha, kommer det här steget att variera. När du har lagt till alla kolumner som du vill använda, fortsätt till nästa steg.
  • Kolumner skapas från vänster till höger.
  • Bild med titeln Skapa ett bord i HTML-steg 6
    6. Skriv in och tryck på ↵ Ange. Det här kommandot indikerar att alla tabellens kolumner har skapats och stänger den delen av tabellens kod.
  • Bild med titeln Skapa ett bord i HTML-steg 7
    7. Skriv in igen och tryck sedan på ↵ Ange. Du kommer nu att lägga till dina rader i ditt bord.
  • Bild med titeln Skapa ett bord i HTML-steg 8
    8. Lägg till en cell i ditt bord. Skriv in för att ange en bit av information under den första kolumnen, skriv in informationen, skriv in för att stänga cellen och tryck på ↵ ENTER.
  • Till exempel: att skapa en cell med numret "23" I det skulle du skriva 23 in i din textredigerare.
  • Bild med titeln Skapa ett bord i HTML-steg 9
    9. Lägg till fler celler i ditt bord. Antalet celler i rad bör korrelera med antalet kolumner - till exempel, om du har tre kolumner, borde du ha tre celler i rad. När du har skapat en hel rad kan du fortsätta.
  • Bild med titeln Skapa ett bord i HTML-steg 10
    10. Stäng den aktuella raden. Skriv in och tryck på ↵ Enter för att stänga raden. Vid denna tidpunkt kan du öppna en annan rad genom att skriva in och trycka på ↵ Enter, lägga till enskilda celler och sedan stänga raden.
  • Bild med titeln Skapa ett bord i HTML-steg 11
    11. Stäng ditt bord. Under den sista raden i tabellen, skriv in . Detta indikerar änden av bordet.
  • Bild med titeln Skapa ett bord i HTML-steg 12
    12. Granska ditt bord. Ditt bord ska se ut så här:
  • Dag
  • Månad
  • År
  • 4
  • Mars
  • 1990
  • 27
  • Juli
  • 1993
  • Bild med titeln Skapa ett bord i HTML-steg 13
    13. Spara ditt arbete. Tryck Ctrl+S (Windows) eller ⌘ kommando+S (Mac) För att spara ditt dokument, ange ett namn för dokumentet och klicka på Spara När du uppmanas.
    • Del 2 av 2:
    Lägga till tabellmodifierare
    1. Bild med titeln Skapa ett bord i HTML-steg 14
    1. Förbättra ditt bord. Byt här på toppen av arket med och skriv sedan
     stil ="Bredd: 100%"> in i taggen. Se till att du håller ett mellanslag mellan "tabell" och "stil".
    • Slutresultatet ska se ut så här:
    • Du kan experimentera med procentsatsen. Till exempel skriver du in 50 istället för 100 kommer att resultera i ett halvt område.
  • Bild med titeln Skapa ett bord i HTML-steg 15
    2. Skapa gränser för ditt bord. Skapa ett mellanslag längst upp i dokumentet ovanför Thetag, gör sedan följande:
  • Skriv in och tryck på ↵ ENTER.
  • Skriv in bord, th, td { och tryck på ↵ ENTER.
  • Skriv in Border: 1px solid svart- och tryck på ↵ ENTER.
  • Skriv in Border-Collapse: Collapse- och tryck på ↵ ENTER. Hoppa över den här raden om du vill att dina gränser ska ha två linjer istället för en.
  • Skriv in } och tryck på ↵ ENTER.
  • Skriv in och tryck på ↵ ENTER.
  • Bild med titeln Skapa ett bord i HTML-steg 16
    3. Lägg till en etikett för ditt bord. Skapa ett utrymme strax under det här, gör sedan följande:
  • Skriv in
  • Skriv in texten som du vill använda (e.g., Födelsedag)
  • Skriv in och tryck på ↵ ENTER.
  • Ditt slutresultat bör likna detta: Födelsedag

    • Tips

    Det hjälper till att inrätta relaterade delar av kod så att du enkelt kan referera till dem senare. Du kan till exempel dra in en hel del av celler.
  • För att göra viss text fet, kan du placera taggar runt den aktuella texten. Till exempel, att vända "Antal år" in i "Antal år", du skulle skriva Antal år in i textredigeraren.

    • Varningar

    Kom alltid ihåg att stänga kommandon.
    Dela på det sociala nätverket:
    Liknande