Lists & Premium Tables in html-css

Context & Logic

Data organization is the backbone of business apps. Riddle: I have many rows but no garden, and many columns but no temple. What am I?

Interactive Workshop

Interactive Playground

Source HTMLMarkup

<div class="p-6 bg-gray-50 rounded-2xl border border-gray-200 shadow-sm">
  <h3 class="text-lg font-black mb-4">Project Roadmap 2026</h3>
  <table class="w-full text-left border-collapse">
    <thead class="bg-indigo-600 text-[10px] uppercase tracking-widest text-white">
      <tr>
        <th class="p-4 rounded-tl-xl border-none">Feature</th>
        <th class="p-4 border-none">Priority</th>
        <th class="p-4 rounded-tr-xl border-none text-right">Status</th>
      </tr>
    </thead>
    <tbody class="text-sm bg-white">
      <tr class="border-b border-gray-100 hover:bg-indigo-50/50 transition-colors">
        <td class="p-4 font-bold text-gray-700">Live Editor</td>
        <td class="p-4"><span class="px-2 py-0.5 bg-green-100 text-green-700 rounded-full text-[9px] font-black uppercase">Critical</span></td>
        <td class="p-4 text-right text-gray-500 font-mono">100%</td>
      </tr>
      <tr class="border-b border-gray-100 hover:bg-indigo-50/50 transition-colors">
        <td class="p-4 font-bold text-gray-700">MCQ Engine</td>
        <td class="p-4"><span class="px-2 py-0.5 bg-blue-100 text-blue-700 rounded-full text-[9px] font-black uppercase">High</span></td>
        <td class="p-4 text-right text-gray-500 font-mono">Synced</td>
      </tr>
    </tbody>
  </table>
</div>

Source CSSStyle

Live Output Pane

Sync active

Tailwind Core Loaded

Standard CSS Scope

Auto-Sync Preview

Modify the source above to see live changes. Supports standard CSS and Tailwind utility classes.

Test Your Knowledge

Assessment Mode

1Which tag is used specifically for the header content grouping in a table?

Previous LessonLinks Images Next Lesson Text Formatting Tags