Tabeller: Organisering av data
Lær hvordan du oppretter tabeller for å vise informasjon
Tabeller: Organisering av data er en gratis leksjon i HTML for Kids på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i HTML for Kids, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i HTML for Kids inneholder totalt 4 leksjoner.
Tabeller: Organisere data
Velkommen til neste leksjon! I dag lærer De hvordan De kan opprette tabeller i HTML. Tabeller er nyttige for å organisere informasjon i rader og kolonner.
Hva er tabeller?
Tabeller er en måte å vise informasjon på i et strukturert format. Hver tabell består av rader og kolonner.
Slik ser en tabell ut:
Name Age City
Alice 12 New York
Bob 15 London
La oss opprette denne tabellen ved hjelp av HTML!
Opprette en enkel tabell
Tabeller i HTML opprettes ved hjelp av taggen <table>. Rader opprettes ved hjelp av taggen <tr>, og celler opprettes ved hjelp av taggen <td>.
Eksempel:
<table>
<tr>
<td>Alice</td>
<td>12</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>15</td>
<td>London</td>
</tr>
</table>
Legge til en tabelloverskrift
De kan legge til overskrifter i tabellen ved hjelp av taggen <th>. Overskrifter gjør tabellen enklere å forstå.
Eksempel:
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alice</td>
<td>12</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>15</td>
<td>London</td>
</tr>
</table>
Legge til en ramme rundt tabellen
Tabeller har ingen rammer som standard. De kan legge til en ramme ved hjelp av attributtet border eller med CSS.
Eksempel:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alice</td>
<td>12</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>15</td>
<td>London</td>
</tr>
</table>
Spenn over kolonner og rader
Noen ganger kan det være nødvendig at en celle spenner over flere kolonner eller rader. Bruk attributtet colspan eller rowspan for å gjøre dette.
Eksempel:
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Details</th>
</tr>
<tr>
<td>Alice</td>
<td>12</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>15</td>
<td>London</td>
</tr>
</table>
Stilsette tabellen
De kan forbedre utseendet på tabellen ved hjelp av CSS. De kan for eksempel endre farger, legge til utfylling eller justere teksten.
Eksempel:
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
th {
background-color: lightgray;
}
</style>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alice</td>
<td>12</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>15</td>
<td>London</td>
</tr>
</table>
Prøv selv
La oss opprette en tabell som viser favorittfilmene Deres. Her er et eksempel:
<!DOCTYPE html>
<html>
<head>
<title>My Favorite Movies</title>
</head>
<body>
<h1>My Favorite Movies</h1>
<table border="1">
<tr>
<th>Movie</th>
<th>Year</th>
<th>Genre</th>
</tr>
<tr>
<td>Inception</td>
<td>2010</td>
<td>Science Fiction</td>
</tr>
<tr>
<td>The Lion King</td>
<td>1994</td>
<td>Animation</td>
</tr>
</table>
</body>
</html>
Godt jobbet!
Gratulerer! De har lært hvordan De kan opprette tabeller, legge til overskrifter og til og med stilsette dem. Tabeller er en utmerket måte å organisere og vise data på. I neste leksjon lærer De om skjemaer for å samle inn brukerinndata. Gjør Dem klar til å gjøre sidene interaktive!
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 16
- Leksjoner
- 35
Ofte stilte spørsmål
Er leksjonen «Tabeller: Organisering av data» gratis?
Ja – hele teksten i «Tabeller: Organisering av data» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av HTML for Kids-kurset, kan du oppgradere til CoddyKit PRO. Kurset i HTML for Kids inneholder totalt 4 leksjoner.
Hva lærer jeg i «Tabeller: Organisering av data»?
Lær hvordan du oppretter tabeller for å vise informasjon Du øver på HTML for Kids med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med HTML for Kids?
Ingen tidligere erfaring er nødvendig. HTML for Kids på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.
Hvor lang tid tar leksjonen «Tabeller: Organisering av data»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne HTML for Kids-leksjonen?
Ja. Alle HTML for Kids-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Tabeller: Organisering av data
- Skjemaer: Samle inn brukerdata
- HTML-attributter
- Multimedia: Legg til video og lyd