Table and data grid patterns in Tailwind - Mini Project: Build & Apply

Create a Responsive Data Table with Tailwind CSS

📖 Scenario: You are building a simple web page to show a list of employees and their details in a clean, easy-to-read table. This table should be responsive and styled using Tailwind CSS.

🎯 Goal: Build a responsive HTML table styled with Tailwind CSS that displays employee data with headers and rows. The table should have clear column headings and alternate row shading for readability.

📋 What You'll Learn

Use semantic HTML table elements: , , , ,

, and

. Use Tailwind CSS classes to style the table with borders, padding, and text alignment. Make the table responsive so it looks good on small and large screens. Add alternate row background colors for better readability. Include accessible table headers with scope attributes. 💡 Why This Matters 🌍 Real World Tables are commonly used on websites to display structured data like employee lists, product inventories, or schedules. Making tables readable and responsive improves user experience on all devices. 💼 Career Web developers often need to create accessible, styled data tables using CSS frameworks like Tailwind. This skill is essential for building professional, user-friendly web applications. 1 Create the HTML table skeleton Write the basic HTML structure for a table with a table element containing a thead and tbody. Inside thead, create a single row tr with four header cells th labeled exactly: Name, Position, Office, and Age. Inside tbody, add one row tr with four cells td containing these exact values: Jane Doe, Developer, New York, and 29. Tailwind # Your code here Need a hint? Remember to use thead for headers and tbody for data rows. Use th for header cells and td for data cells. 2 Add Tailwind CSS classes for basic styling Add Tailwind CSS classes to the table element to make it full width with w-full, add borders with border-collapse border border-gray-300, and add padding p-2 to all th and td elements. Also, align all header text to the left using text-left on each th. Tailwind Name Position Office Age Jane Doe Developer New York 29 # Your code here Need a hint? Use w-full on the table for full width, border-collapse border border-gray-300 for borders, and p-2 padding on all cells. Align header text left with text-left. 3 Add more data rows and alternate row shading Add two more rows inside tbody with these exact data: Row 2: John Smith, Designer, London, 34 Row 3: Emily Johnson, Manager, Sydney, 41 Use Tailwind CSS class bg-gray-50 on every even tr inside tbody to create alternate row shading. Tailwind Name Position Office Age Jane Doe Developer New York 29 # Your code here Need a hint? Add two more tr rows inside tbody with the exact data. Add the class bg-gray-50 to the second row to create a light background for alternate shading. 4 Make the table responsive and add accessibility features Wrap the table inside a div with Tailwind classes overflow-x-auto and rounded-lg to allow horizontal scrolling on small screens and rounded corners. Add scope="col" attributes to all th elements for accessibility. Tailwind Name Position Office Age Jane Doe Developer New York 29 John Smith Designer London 34 Emily Johnson Manager Sydney 41 # Your code here Need a hint? Wrap the entire table in a div with overflow-x-auto and rounded-lg classes. Add scope="col" to each th for accessibility.