Datatabel og pladsholdere til diagrammer
Opbyg en datatabel, der ligner en sorterbar tabel, med stribede rækker, handlingsknapper og pagineringskontroller samt pladsholderbeholdere til diagrammer med skeleton-loadere.
Datatabel og pladsholdere til diagrammer er en gratis Tailwind CSS Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Tailwind CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Tailwind CSS Academy-kurset indeholder 4 lektioner i alt.
Datatabellens rolle i dashboards
Datatabeller er en af de mest almindelige komponenter i administrationsdashboards. De viser strukturerede poster — brugere, ordrer og transaktioner — i rækker og kolonner, ofte med kontroller til sortering, filtrering og sideinddeling. En velformateret Tailwind-tabel er læsbar, nem at overskue og interaktiv. Tabellen placeres typisk under statistikskortene i hovedindholdsområdet.
Tabelbeholder og omsluttende element
Omslut tabellen i en rounded-xl bg-white shadow-sm overflow-hidden-kortbeholder. overflow-hidden klipper tabelhjørnerne, så de passer til kortets afrundede hjørner. Inde i kortet skal du tilføje en tabeloverskrift med tabellens titel og handlingsknapper, efterfulgt af et overflow-x-auto-div-element, der muliggør vandret rulning på mobilen uden at ødelægge layoutet.
<div class="rounded-xl bg-white shadow-sm overflow-hidden">
<!-- Table header bar -->
<div class="flex items-center justify-between border-b border-gray-100 px-6 py-4">
<h3 class="font-semibold text-gray-900">Recent Users</h3>
<button class="text-sm font-medium text-blue-600 hover:text-blue-700">View all</button>
</div>
<!-- Scrollable table -->
<div class="overflow-x-auto">
<table class="w-full text-sm">
<!-- thead and tbody -->
</table>
</div>
</div>Tabeloverskriftsrække
thead indeholder kolonneetiketter. Brug bg-gray-50 som baggrund for overskriftsrækken, så den skiller sig visuelt ud fra datarækkerne. Hver th får px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 — en klassisk overskriftsstil med små versaler, der er kompakt og professionel.
<thead class="bg-gray-50">
<tr>
<th scope="col"
class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">
Name
</th>
<th scope="col"
class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">
Email
</th>
<th scope="col"
class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">
Status
</th>
<th scope="col"
class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">
Role
</th>
<th scope="col" class="relative px-6 py-3"><span class="sr-only">Actions</span></th>
</tr>
</thead>Stribede tabelrækker
Skiftende rækkefarver (stribede rækker) gør tætte tabeller lettere at læse, fordi det bliver nemmere at følge en række på tværs af kolonnerne. I Tailwind kan du bruge varianten even:bg-gray-50 på tr-elementer til at farve lige rækker og lade ulige rækker være hvide. Tilføj hover:bg-blue-50 transition-colors for en markering ved markøren, så brugerne lettere kan identificere den række, som markøren er over.
<tbody class="divide-y divide-gray-100 bg-white">
<tr class="even:bg-gray-50 hover:bg-blue-50 transition-colors">
<td class="whitespace-nowrap px-6 py-4">
<div class="flex items-center gap-3">
<img src="/avatar.jpg" class="h-8 w-8 rounded-full" alt="">
<div>
<p class="font-medium text-gray-900">Alice Johnson</p>
<p class="text-xs text-gray-500">Joined Jan 2026</p>
</div>
</div>
</td>
<td class="whitespace-nowrap px-6 py-4 text-gray-500">alice@example.com</td>
<!-- More cells -->
</tr>
</tbody>Statusmærke i tabelceller
Statuskolonner bruger små farvede mærker til at vise tilstanden med et enkelt blik. Definér tre eller fire statusvarianter: Aktiv (grøn), Inaktiv (grå), Afventer (gul), Suspenderet (rød). Hvert mærke bruger inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold sammen med baggrunds- og tekstklasser i passende farver, som anvendes betinget ud fra statusværdien.
<td class="whitespace-nowrap px-6 py-4">
<!-- Active -->
<span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5
text-xs font-semibold text-green-800">
Active
</span>
<!-- Pending -->
<span class="inline-flex items-center rounded-full bg-yellow-100 px-2.5 py-0.5
text-xs font-semibold text-yellow-800">
Pending
</span>
<!-- Suspended -->
<span class="inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5
text-xs font-semibold text-red-800">
Suspended
</span>
</td>Handlingsknapper i tabeller
Den sidste kolonne i hver række indeholder handlinger på rækken: Rediger, Slet eller Vis. Juster dem med text-right på th og td. Brug knapper med kun tekst, som styles som links, så tabellen forbliver enkel: text-sm font-medium text-blue-600 hover:text-blue-700 til Rediger og text-red-500 hover:text-red-700 til Slet. Adskil dem med en diskret skillelinje: mx-3 text-gray-300.
<td class="whitespace-nowrap px-6 py-4 text-right">
<a href="/users/1/edit"
class="text-sm font-medium text-blue-600 hover:text-blue-700">
Edit
</a>
<span class="mx-2 text-gray-300">|</span>
<button onclick="deleteUser(1)"
class="text-sm font-medium text-red-500 hover:text-red-700">
Delete
</button>
</td>Pagineringselementer
Pagineringselementerne placeres under tabellen. Et almindeligt mønster viser Viser 1 til 10 af 48 resultater til venstre og knapperne Forrige/Næste til højre. Brug flex items-center justify-between border-t border-gray-100 px-6 py-4 til beholderen for pagineringslinjen, så den visuelt hænger sammen med tabellen ovenfor.
<div class="flex items-center justify-between border-t border-gray-100 px-6 py-4">
<p class="text-sm text-gray-500">
Showing <span class="font-medium">1</span> to <span class="font-medium">10</span>
of <span class="font-medium">48</span> results
</p>
<div class="flex gap-2">
<button class="rounded-lg border border-gray-300 px-3 py-1.5 text-sm
font-medium text-gray-700 transition hover:bg-gray-50
disabled:cursor-not-allowed disabled:opacity-40"
disabled>
Previous
</button>
<button class="rounded-lg border border-gray-300 px-3 py-1.5 text-sm
font-medium text-gray-700 transition hover:bg-gray-50">
Next
</button>
</div>
</div>Beholder til diagrampladsholder
Widgets med diagrampladsholdere sørger for den korrekte layout- og skeletstruktur dér, hvor et diagrambibliotek som Chart.js eller Recharts skal gengive diagrammet. Pladsholderkortet har en overskrift med diagrammets titel og en vælger til tidsperiode, et stort indholdsområde med fast højde til diagrammets lærred og eventuelt forklaringselementer nedenunder. Ved at bruge pladsholdere forbliver dashboardets layout stabilt, før diagramdataene indlæses.
<div class="rounded-xl bg-white shadow-sm">
<!-- Chart header -->
<div class="flex items-center justify-between border-b border-gray-100 px-6 py-4">
<h3 class="font-semibold text-gray-900">Revenue Over Time</h3>
<select class="rounded-lg border border-gray-200 px-3 py-1.5 text-sm text-gray-600">
<option>Last 7 days</option>
<option>Last 30 days</option>
<option>Last 90 days</option>
</select>
</div>
<!-- Chart canvas area -->
<div class="h-64 p-6">
<!-- Chart.js or Recharts renders here -->
<canvas id="revenue-chart"></canvas>
</div>
</div>Skeletpladsholder til diagram
Før diagramdataene indlæses, skal du vise en skeletpladsholder, der efterligner diagrammets form. Til en pladsholder for et søjlediagram kan du bruge en fleksibel række med søjler og animate-pulse. Til et linjediagram fungerer et simpelt rektangel med afrundede hjørner og animate-pulse. Det forhindrer den forstyrrende visning af en tom hvid boks, før diagrambiblioteket initialiseres.
<!-- Bar chart skeleton -->
<div class="flex h-52 items-end gap-2 animate-pulse">
<div class="flex-1 rounded-t bg-gray-200" style="height: 60%"></div>
<div class="flex-1 rounded-t bg-gray-200" style="height: 80%"></div>
<div class="flex-1 rounded-t bg-gray-200" style="height: 45%"></div>
<div class="flex-1 rounded-t bg-gray-200" style="height: 90%"></div>
<div class="flex-1 rounded-t bg-gray-200" style="height: 70%"></div>
<div class="flex-1 rounded-t bg-gray-200" style="height: 55%"></div>
<div class="flex-1 rounded-t bg-gray-200" style="height: 75%"></div>
</div>Layout med diagram og tabel side om side
Et almindeligt dashboard-gitter placerer en diagramwidget og en tabel (eller en sekundær statistik) side om side. Brug et gitter med to kolonner: grid grid-cols-1 gap-6 lg:grid-cols-2. Diagrammet og tabellen udfylder kolonner af samme størrelse. Du kan også bruge lg:col-span-2 til at lade en widget spænde over hele bredden, mens mindre widgets optager en tredjedel af pladsen i et undergitter med tre kolonner.
<!-- Main dashboard grid: chart + top-users table -->
<div class="mt-6 grid grid-cols-1 gap-6 lg:grid-cols-3">
<!-- Line chart (2/3 width) -->
<div class="rounded-xl bg-white shadow-sm lg:col-span-2">
<!-- Chart content -->
</div>
<!-- Top users list (1/3 width) -->
<div class="rounded-xl bg-white shadow-sm">
<!-- Mini leaderboard -->
</div>
</div>Tom tilstand for tabeller
Når en tabel ikke har data — måske fordi filtreringen giver nul resultater, eller fordi kontoen er ny — skal du vise en centreret tom tilstand i tabellens brødtekst. Brug en fleksibel kolonne med et ikon, en overskrift, en beskrivelse og en CTA-knap. Undgå at vise en tom hvid boks uden kontekst, da det forvirrer brugere, som ikke ved, om siden er gået i stykker eller blot er tom.
<!-- Empty state inside a table or list container -->
<div class="flex flex-col items-center justify-center py-16 text-center">
<svg class="h-12 w-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0H4"/>
</svg>
<h3 class="mt-4 font-semibold text-gray-900">No users found</h3>
<p class="mt-1 text-sm text-gray-500">Get started by adding your first team member.</p>
<button class="mt-6 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white">
Add user
</button>
</div>Hurtigt tjek
Test din forståelse af begreberne i Tailwind CSS Mastery fra denne lektion.
Opsummering af lektionen
I denne lektion lærte du at: bygge en stylet datatabel med stribede rækker, statusmærker og handlingsknapper, tilføje pagineringselementer med deaktiverede tilstande og oprette beholdere til diagrampladsholdere med skeletindlæsere og tomme tilstande. Som det næste undersøger vi CSS-arkitektur og organisering af filer med Tailwind.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “Datatabel og pladsholdere til diagrammer” gratis?
Ja — hele teksten til “Datatabel og pladsholdere til diagrammer” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Tailwind CSS Academy-kurset, skal du opgradere til CoddyKit PRO. Tailwind CSS Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Datatabel og pladsholdere til diagrammer”?
Opbyg en datatabel, der ligner en sorterbar tabel, med stribede rækker, handlingsknapper og pagineringskontroller samt pladsholderbeholdere til diagrammer med skeleton-loadere. Du øver dig i Tailwind CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Tailwind CSS Academy?
Der kræves ingen tidligere erfaring. Tailwind CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.
Hvor lang tid tager lektionen “Datatabel og pladsholdere til diagrammer”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Tailwind CSS Academy-lektion?
Ja. Alle Tailwind CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Dashboardstruktur og sidebar
- Topbjælke og brødkrummer
- Statistikkort og KPI-widgets
- Datatabel og pladsholdere til diagrammer