Skapa en HTML Table

September 20

När du skapar webbsidor, måste du veta hur du lägger till olika typer av data och element, inklusive tabeller. För att skapa en webbsida med ett bord, så här:

  1. Öppna din textredigerare.
  2. I textredigerare, skapa ett nytt textdokument.

    De flesta textredigerare öppnas med ett tomt eller tomt dokument till att börja med. Om du har något i dokumentet, rensa ut det innan du fortsätter.

    Skapa en HTML Table

  3. Ange följande HTML:

    <! Doctype html>
    <Html>
    <Head>
    <Title> Min första webbsida </ title>
    </ Head>
    <Body>
    <H1> Min Tabell </ h1>
    <Table>
    <Tr>
    <Th> Flygplats Code </ th>
    <Th> Common Name / Stad </ th>
    </ Tr>
    <Tr>
    <Td> CWA </ td>
    <Td> Central Wisconsin Airport </ td>
    </ Tr>
    <Tr>
    <Td> ORD </ td>
    <Td> Chicago O'Hare </ td>
    </ Tr>
    <Tr>
    <Td> LHR </ td>
    <Td> London Heathrow </ td>
    </ Tr>
    </ Table>
    </ Body>
    </ Html>
  4. Spara filen som table.html.

    Spara filen med ett .html. Filen ska sparas i dokumentet roten.

    Skapa en HTML Table

  5. Visa filen i din webbläsare.

    Öppna din webbläsare och skriv http: //localhost/table.html i adressfältet. Om du gör det kommer att visa en sida som denna.

    Skapa en HTML Table

    Lägg märke till att tabellen inte har några gränser runt den. Om du vill lägga till ramar, fortsätta att arbeta igenom denna övning.

  6. Öppna table.html i din textredigerare.

    Om du stängde din textredigerare, öppna den igen och ladda table.html.
  7. Ändra koden i table.html till följande:

    <! Doctype html>
    <Html>
    <Head>
    <Title> Min första webbsida </ title>
    </ Head>
    <Body>
    <H1> Min Tabell </ h1>
    <Table border = "1">
    <Tr>
    <Th> Flygplats Code </ th>
    <Th> Common Name / Stad </ th>
    </ Tr>
    <Tr>
    <Td> CWA </ td>
    <Td> Central Wisconsin Airport </ td>
    </ Tr>
    <Tr>
    <Td> ORD </ td>
    <Td> Chicago O'Hare </ td>
    </ Tr>
    <Tr>
    <Td> LHR </ td>
    <Td> London Heathrow </ td>
    </ Tr>
    </ Table>
    </ Body>
    </ Html>

    Observera att den enda förändringen är att lägga till ett mellanslag och sedan border = "1" i <table> elementet.

  8. Ladda table.html i din webbläsare.

    Om du stängt din webbläsare, öppna den igen och gå till http: //localhost/table.html. Om din webbläsare är fortfarande öppen, tryck på Ctrl + R uppdatera sidan (Kommando + R på en Mac). Du ser nu en ram runt bordet, så som visas här.

    Skapa en HTML Table