데이터 테이블과 차트 자리 표시자
줄무늬 행, 작업 버튼, 페이지 매김 컨트롤이 있는 정렬 가능한 형태의 데이터 테이블을 만들고, 스켈레톤 로더가 있는 차트 컨테이너 자리 표시자도 추가합니다.
데이터 테이블과 차트 자리 표시자은(는) CoddyKit의 무료 Tailwind CSS Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Tailwind CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.
Data Table Role in Dashboards
Data tables are one of the most common components in admin dashboards. They display structured records — users, orders, transactions — in rows and columns, often with sorting, filtering, and pagination controls. A well-styled Tailwind table is readable, scannable, and interactive. The table is typically placed below the stat cards in the main content area.
Table Container and Wrapper
Wrap the table in a rounded-xl bg-white shadow-sm overflow-hidden card container. The overflow-hidden clips the table corners to match the card's border radius. Inside the card, add a table header with the table title and action buttons, followed by an overflow-x-auto div that allows horizontal scrolling on mobile without breaking the layout.
<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>Table Header Row
The thead contains column labels. Use bg-gray-50 for the header row background to visually distinguish it from data rows. Each th gets px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 — a classic small-caps header style that is compact and professional.
<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>Striped Table Rows
Alternating row colors (striped rows) improve readability in dense tables by making it easy to track a row across columns. In Tailwind, use the even:bg-gray-50 variant on tr elements to color even rows and leave odd rows white. Add hover:bg-blue-50 transition-colors for a hover highlight that helps users identify the row under their cursor.
<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>Status Badge in Table Cells
Status columns use small colored badges to communicate state at a glance. Define three or four status variants: Active (green), Inactive (gray), Pending (yellow), Suspended (red). Each badge uses inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold with color-appropriate background and text classes applied conditionally based on the status value.
<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>Table Action Buttons
The last column of each row contains row-level actions: Edit, Delete, or View. Align these with text-right on the th and td. Use text-only buttons styled as links to keep the table clean: text-sm font-medium text-blue-600 hover:text-blue-700 for Edit and text-red-500 hover:text-red-700 for Delete. Separate them with a light divider: 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>Pagination Controls
Pagination controls sit below the table. A common pattern shows Showing 1 to 10 of 48 results on the left and Previous/Next buttons on the right. Use flex items-center justify-between border-t border-gray-100 px-6 py-4 for the pagination bar container, keeping it visually attached to the table above it.
<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>Chart Placeholder Container
Chart placeholder widgets provide the correct layout and skeleton structure for where a chart library (like Chart.js or Recharts) will render. The placeholder card has a header with the chart title and time period selector, a large content area with fixed height for the chart canvas, and optional legend items below. Using placeholders ensures the dashboard layout is stable before chart data loads.
<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>Skeleton Chart Placeholder
Before chart data loads, show a skeleton placeholder that mimics the chart's shape. For a bar chart placeholder, use a flex row of bars with animate-pulse. For a line chart, a simple rectangle with rounded corners and animate-pulse works. This prevents the jarring appearance of an empty white box before the chart library initializes.
<!-- 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>Side-by-Side Chart and Table Layout
A common dashboard grid places a chart widget and a table (or secondary stat) side by side. Use a two-column grid: grid grid-cols-1 gap-6 lg:grid-cols-2. The chart and table fill equal columns. You can also use lg:col-span-2 to let one widget span the full width while smaller widgets occupy a third column in a 3-column sub-grid.
<!-- 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>Empty State for Tables
When a table has no data — perhaps filtered to zero results or on a fresh account — show a centered empty state inside the table body. Use a flex column with an icon, a heading, a description, and a CTA button. Avoid showing an empty white box with no context, which disorients users who do not know if the page is broken or simply empty.
<!-- 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>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: building a styled data table with striped rows, status badges, and action buttons, adding pagination controls with disabled states, and creating chart placeholder containers with skeleton loaders and empty states. Next up we explore CSS architecture and file organization with Tailwind.
AI 튜터와 함께 HTML을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 30
- 레슨
- 120
자주 묻는 질문
“데이터 테이블과 차트 자리 표시자” 강의는 무료인가요?
네 — “데이터 테이블과 차트 자리 표시자” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Tailwind CSS Academy 강의 전체를 잠금 해제할 수 있습니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“데이터 테이블과 차트 자리 표시자”에서 뭘 배우나요?
줄무늬 행, 작업 버튼, 페이지 매김 컨트롤이 있는 정렬 가능한 형태의 데이터 테이블을 만들고, 스켈레톤 로더가 있는 차트 컨테이너 자리 표시자도 추가합니다. 브라우저에서 직접 실행하는 실습 코드로 Tailwind CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Tailwind CSS Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Tailwind CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“데이터 테이블과 차트 자리 표시자” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Tailwind CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Tailwind CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 대시보드 틀과 사이드바
- 상단 바와 탐색 경로
- 통계 카드와 KPI 위젯
- 데이터 테이블과 차트 자리 표시자