Tabeller spiller en viktig rolle når det kommer til å presentere data i et organisert format. I denne tutorialen vil du lære hvordan du oppretter grunnleggende HTML-tabeller og bruker de viktige taggene for layout og struktur.
Trinn-for-trinn-veiledning
La oss starte med å opprette din første tabell! Først må du vite at grunnlaget for en tabell er. Denne taggen omslutter hele tabellen.
Nå legger vi til en rad. Hver rad defineres med taggen, som står for "tabellrad". I denne raden er det foreløpig ingen data, så den forblir tom. Du kan forestille deg at hver rad kan gi plass til flere kolonner.
Det er nå på tide å legge til noe data i tabellen. For dette bruker vi taggen og legger til de tilsvarende verdiene. La oss anta at det første navnet er "Jan", e-posten er "support@programmierenlern.info", og fødselsdatoen er 23.06.1982. Raden din bør da se slik ut:
Forsikre deg om at tabellen nå ser bedre ut. Du kan legge til så mange rader du vil ved bare å bruke flere og -tagger. La oss legge til en annen ansatt. La oss kalle ham "Joe Average" og hans e-post kan være "joe@average.com".
Når vi nå laster inn tabellen på nytt, vil vi oppdage at den vokser, og alle registrerte data er synlige. Strukturen er viktig fordi den gir deg en klar oversikt over informasjonen.
Hva hvis du vil legge til en bunnlinje nederst i tabellen, for eksempel for opphavsrett? Her kommer colspan inn i bildet. Med colspan kan du spesifisere hvor mange kolonner en celle skal ta opp. For å sette en opphavsretter over alle tre kolonner skriver du: Opphavsrett 2015 coding-geeks.de.
Etter å ha lagt til denne bunnlinjen, bør du sjekke visningen. Ideen er at bunnlinjen skal plasseres under kolonnene og presentere dataene på en ryddig måte. I dette tilfellet har ikke bunnlinjen sin egen kolonne og bør derfor ligge over de andre tre kolonnene.
Hvis du nå reduserer colspan til en verdi på to, kan du også legge til en andre kommentar. La oss si at du vil vise "Coding Geeks" i en ny kolonne. Bruk taggen på nytt, men bruk colspan riktig.
Hvis du har fulgt alle disse trinnene, har du lært hvordan du lager grunnleggende HTML-tabeller. Den visuelle utformingen bør imidlertid alltid gjøres med CSS for å forbedre layouten og brukervennligheten. Dette inkluderer å designe innhold og layout separat, slik at du senere har mer fleksibilitet i designet av nettsidene dine.
Sammendrag - Grunnleggende oppretting av HTML-tabeller
Du har lært strukturen og bruken av HTML-tabeller, fra oppbyggingen til plasseringen av data og bunnlinjen. Dermed kan du nå presentere enkle tabelldata på nettsiden din.
Ofte stilte spørsmål
Hva er de grunnleggende taggene for HTML-tabeller?De grunnleggende taggene er,, for overskrifter og for dataceller.
Kan jeg opprette et ubegrenset antall rader og kolonner i en tabell?Ja, teoretisk sett kan du legge til mange rader og kolonner, men det er viktig å holde lesbarheten i fokus.
Hvordan bør jeg designe tabeller stilistisk?Bruk CSS for design, i stedet for direkte HTML-attributter som border.
Hva står colspan for?Colspan-attributtet gjør det mulig for en celle å strekke seg over flere kolonner.
Hvorfor er CSS bedre egnet for layout enn HTML-attributter?CSS separerer innhold fra styling og gir dermed mer fleksibilitet og muligheter for design.
