Tabeller spelar en betydande roll när det gäller att presentera data i ett organiserat format. I den här guiden lär du dig hur man skapar grundläggande HTML-tabeller och använder de väsentliga taggarna för layout och struktur.
Steg-för-steg-guide
Låt oss börja med att skapa din första tabell! Först måste du veta att grundtaggen för en tabell är. Denna tagg omger hela tabellen.
Nu lägger vi till en rad. Varje rad definieras med taggen, vilket står för "tabellerad". I denna rad finns det ännu inga data, så den förblir tom för tillfället. Du kan föreställa dig att varje rad kan ge utrymme för flera kolumner.
Nu är det dags att lägga till lite data i tabellen. För detta använder vi taggen - och lägger till de motsvarande värdena. Anta att det första namnet är "Jan", e-posten är "support@programmierenlern.info" och födelsedatumet är 23.06.1982. Din rad bör då se ut så här:
Säkerställ att tabellen nu ser bättre ut. Du kan lägga till hur många rader som helst genom att helt enkelt använda fler - och -taggar. Låt oss lägga till en anställd till. Låt oss kalla honom "Joe Average" och hans e-post kan vara "joe@average.com".
När vi nu laddar om tabellen märker vi att den växer och alla registrerade data syns. Strukturen är viktig eftersom den ger en tydlig översikt över informationen.
Vad händer om du vill lägga till en sidfot längst ner i tabellen, till exempel för ett upphovsrätt? Här kommer colspan in i bilden. Med colspan kan du ange hur många kolumner en cell ska ta upp. För att sätta en upphovsrätt över alla tre kolumner skriver du: Copyright 2015 coding-geeks.de.
Efter att ha lagt till denna sidfot bör du kontrollera presentationen. Idén är att sidfoten ska placeras under kolumnerna och presentera data på ett överskådligt sätt. I det här fallet har sidfoten ingen egen kolumn och bör därför ligga över de andra tre kolumnerna.
Om du nu minskar colspan till ett värde av två, skulle du också kunna lägga till en andra anmärkning. Anta att du vill visa "Coding Geeks" i en ny kolumn. Använd taggen - igen och tillämpa colspan korrekt.
Om du har följt dessa steg har du lärt dig hur man skapar grundläggande HTML-tabeller. Den visuella designen bör dock alltid göras med CSS för att förbättra layouten och användarvänligheten. Detta inkluderar att designa innehåll och layout separat, så att du senare får mer flexibilitet i designen av dina webbplatser.
Sammanfattning - Grunderna i att skapa HTML-tabeller
Du har lärt dig strukturen och användningen av HTML-tabeller, från uppbyggnad till placering av data till sidfoten. Nu kan du enkelt presentera tabulär data på din webbplats.
Vanliga frågor
Vad är de grundläggande taggarna för HTML-tabeller?De grundläggande taggarna är,, för rubriker och för dataceller.
Kan jag skapa oändligt många rader och kolumner i en tabell?Ja, i teorin kan du lägga till många rader och kolumner, men det är viktigt att tänka på läsbarheten.
Hur bör jag stilistiskt utforma tabeller?Använd CSS för designen, istället för direkta HTML-attribut som border.
Vad står colspan för?Colspan-attributet tillåter en cell att sträcka sig över flera kolumner.
Varför är CSS bättre för layout än HTML-attribut?CSS separerar innehåll från sin styling och ger mer flexibilitet och möjligheter för design.
