Datatabeller visar olika uppgifter i kolumner och rader för enkel läsning. Uppgifterna är vanligtvis delvis numeriska med textetiketter. Ett exempel är en datatabell som visar hur många kalorier någon äter varje dag. Att skapa en datatabell online kan göras med HTML eller det mer komplexa webbläsarspråket. Slutbordet ser ut som en datatabell som skapats i ett kalkylark eller på papper. Den enda skillnaden är bakgrundskodningen, som inte syns om man inte tittar på källkoden. Kodningen kan skapas av HTML-redigerare, text eller på annat sätt. Det finns många webbplatser online som erbjuder möjlighet att mata in data, ställa in några attribut och skapa alla tabellkoder för dig. Online datatabeller används vanligtvis som en del av en webbsida. Datatabeller används ofta för att skapa listor med artiklar med kategorier, till exempel artiklar till salu. Vissa webbsidor använder dem för att visa statistik för information. Medan datatabeller kan användas offline för utskrift eller i rapporter är det vanligtvis bättre att använda kalkylprogram, till exempel Microsoft Office Excel, som erbjuder många fler funktioner för att arbeta med data. Den här guiden visar hur du skapar en HTML-datatabell med Notepad.
Öppna en HTML-redigerare eller bara ett vanligt Notepad-textdokument för att ange HTML-kod. Anteckningar fungerar bra om du är van vid HTML-kodning. HTML-redaktörer gör repetitiva uppgifter snabbare, men vissa, som Frontpage, lägger till extra onödig kodning som kan sakta ner webbsidor. Det bästa du kan göra är att koda med en HTML-redigerare och sedan gå tillbaka och redigera koden för hand för att städa upp den.
Bestäm tabellattribut för kant, bredd, bakgrundsfärg och teckensnittsfärger. Du måste ta hänsyn till webbsidans layout, bredd, färger och andra attribut för att göra tabellen lätt läsbar. Du måste också bestämma hur många rader och kolumner som behövs för data. Börja definiera tabellattributen. (Vårt exempel visar antalet kalorier som äts vid lunch och middag varje vardag. Vi behöver tre kolumner (dag, lunch och middag) och sju rader (två för etiketter och en för varje vardag).
Lägg till en kant runt tabellen och dataceller. Gränser separerar data i celler för enkel visning. Det mäts i pixlar och kan ges ett värde på 0 för att inte använda dem. En eller två pixlar är i allmänhet bra. Taggen för gränsen är
bgcolor = border = "CHOSEN_BORDER_WIDTH"
Kantfärgen kan ändras med taggen
bordercolor = "CHOSEN_COLOR"
som använder de grundläggande färgerna, såsom röda eller svarta eller sexsiffriga hexadecimala färgkoder. Hexadecimals erbjuder fler färger. Vårt exempel använder border = "2" och bordercolor = "black".
Bestäm bredden på hela bordet. Det mäts i pixlar eller procent av skärmstorleken. Pixlar är definitiva och procentsatser gör att tabellen kan anpassas till olika skärmstorlekar. Försök att bedöma bredden utifrån bredden på data över raderna. Om du senare upptäcker att bordet är för tunt eller brett kan det ändras. Vårt exempel använder width = "175".
Ställ in datacellernas bakgrundsfärg. Det är annorlunda än sidans bakgrundsfärg, vilket kan ge bra kontrast. Taggen är
bgcolor = "CHOSEN_COLOR"
precis som kantfärgen. Vårt exempel använder bgcolor = "white".
Ställ in teckensnittsfärgen för texten i cellerna. Se till att färgen står i kontrast till bakgrunden så att den är lättläst. Ljus på mörkt eller mörkt på ljus fungerar alltid bäst. Taggen är
font = "CHOSEN_COLOR"
Vårt exempel är font = "svart", som står i kontrast till den vita bakgrunden.
Skriv ut de kompletta tabelltaggarna mellan vänster och högerpil med ett mellanslag mellan taggattribut och börja med tabelltaggen framför. Taggarnas ordning spelar ingen roll, så länge som "tabell" är framför.
Bestäm kolumnbredden. Bredden på varje kolumn beror på bredden på hela tabellen. Ta tabellbredden och dela den med antalet celler för att få kolumner i jämn storlek. Justera vid behov kolumnbredden, men summan kan inte överstiga tabellbredden. När en cellbredd ändras måste de andra cellerna justeras för att sammanställa tabellbredden. (Vårt exempel har en bredd på 175 och tre kolumner per rad, så en jämn fördelning på cirka 59. Den faktiska delningen är 70, 60, 40.)
Börja lägga till dina data. Börja först med en ny rad och lägg till en tabellrad med koden
Ange dina data för cellen; använder den här koden för att representera tomma celler:
Stäng cellen med taggen. Bordercolor-taggen används om du vill ange cellgränsfärgen. Om den utelämnas används standardtabellen bordercolor. Vårt exemplets första cellkod är:
Upprepa att skapa tabelldataceller, var och en på en ny rad, tills alla celler i raden är färdiga. Avsluta sedan raden med taggen. Börja nästa rad med samma process, börja med
Stäng tabellkoden med med märka. Vår slutkod för tabellen, om den avslutas efter två rader med data, är nedan.
Saker du behöver
- HTML-redigerare eller anteckningsblock
- Data