0Pricing
Tailwind CSS Academy · 课时

数据表与图表占位区

构建具有条纹行、操作按钮和分页控件的仿可排序数据表，并添加带骨架加载器的图表容器占位区。

数据表与图表占位区 是 CoddyKit 上的免费 Tailwind CSS Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 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 导师）并解锁 Tailwind CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 Tailwind CSS Academy 课程共包含 4 节课。

「数据表与图表占位区」这节课中我会学到什么？

构建具有条纹行、操作按钮和分页控件的仿可排序数据表，并添加带骨架加载器的图表容器占位区。 你通过在浏览器中直接运行的动手代码来练习 Tailwind CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Tailwind CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Tailwind CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「数据表与图表占位区」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Tailwind CSS Academy 课中编写并运行代码吗？

能。每节 Tailwind CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 仪表板框架与侧边栏
  2. 顶部栏与面包屑
  3. 统计卡片与 KPI 小组件
  4. 数据表与图表占位区
← 返回 Tailwind CSS Academy