데이터 테이블 구성 요소
미니멀하고 플랫 한 디자인으로 스타일링된 반응형 데이터 테이블 구성 요소로, 비즈니스/기업 웹 사이트에 적합하며 어두운 테마를 지원합니다.
HTML 코드
<div class="overflow-x-auto">
<table class="min-w-full bg-white dark:bg-gray-800">
<thead>
<tr class="w-full bg-gray-200 dark:bg-gray-700">
<th class="py-3 px-4 text-left text-gray-600 dark:text-gray-300">#</th>
<th class="py-3 px-4 text-left text-gray-600 dark:text-gray-300">Name</th>
<th class="py-3 px-4 text-left text-gray-600 dark:text-gray-300">Email</th>
<th class="py-3 px-4 text-left text-gray-600 dark:text-gray-300">Avatar</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">1</td>
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">John Doe</td>
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">[email protected]</td>
<td class="py-3 px-4"><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full"/></td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">2</td>
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">Jane Smith</td>
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">[email protected]</td>
<td class="py-3 px-4"><img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full"/></td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">3</td>
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">Alice Johnson</td>
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">[email protected]</td>
<td class="py-3 px-4"><img src="https://randomuser.me/api/portraits/women/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full"/></td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">4</td>
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">Bob Williams</td>
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">[email protected]</td>
<td class="py-3 px-4"><img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full"/></td>
</tr>
</tbody>
</table>
</div>관련 구성 요소
데이터 테이블 구성 요소
Neumorphism 디자인, 트라이어딕 색 구성표 및 다크 모드 지원을 갖춘 반응형 데이터 테이블 구성 요소로, 블로그 또는 콘텐츠 사이트에 적합합니다.
데이터 테이블 구성 요소
Tailwind CSS를 사용하여 Neumorphism 스타일로 설계된 반응형 데이터 테이블 구성 요소로, 어두운 테마 지원 및 임의의 자리 표시자 이미지를 제공합니다.
데이터 테이블 구성 요소
Glassmorphism Data Tables 포트폴리오를 위한 생생한 색상을 가진 구성 요소, 다크 모드 지원으로 반응합니다. JavaScript가 필요하지 않으며 Tailwind CSS가 있는 HTML만 있으면 됩니다.