جدول ساده
جداول اطلاعات را به گونهای نمایش میدهند که به سادگی قابل بررسی باشد تا کاربران بتوانند به دنبال الگوها و بینشها بگردند. کد را جهت مشاهده جزئیات استفاده بررسی کنید.
| # | نام | شغل | رنگ مورد علاقه |
|---|---|---|---|
| 1 | Cy Ganderton | کارشناس کنترل کیفیت | آبی |
| 2 | Hart Hagerty | تکنسین پشتیبانی دسکتاپ | بنفش |
| 3 | Brice Swyre | حسابدار مالیات | قرمز |
| 4 | Marjy Ferencz | دستیار اداری ۱ | زرشکی |
<div class="is-scrollbar-hidden min-w-full overflow-x-auto">
<table class="w-full text-right">
<thead>
<tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
<th
class="whitespace-nowrap px-3 py-3 font-semibold uppercase text-slate-800 dark:text-navy-100 lg:px-5"
>
#
</th>
<th
class="whitespace-nowrap px-3 py-3 font-semibold uppercase text-slate-800 dark:text-navy-100 lg:px-5"
>
Name
</th>
<th
class="whitespace-nowrap px-3 py-3 font-semibold uppercase text-slate-800 dark:text-navy-100 lg:px-5"
>
Job
</th>
<th
class="whitespace-nowrap px-3 py-3 font-semibold uppercase text-slate-800 dark:text-navy-100 lg:px-5"
>
Favorite Color
</th>
</tr>
</thead>
<tbody>
<tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">1</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Cy Ganderton</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Quality Control Specialist
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Blue</td>
</tr>
<tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">2</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Hart Hagerty</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Desktop Support Technician
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Purple</td>
</tr>
<tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">3</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Brice Swyre</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Tax Accountant</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Red</td>
</tr>
<tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">4</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Marjy Ferencz</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Office Assistant I
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Crimson</td>
</tr>
</tbody>
</table>
</div>
جدول با حاشیه
جداول اطلاعات را به گونهای نمایش میدهند که به سادگی قابل بررسی باشد تا کاربران بتوانند به دنبال الگوها و بینشها بگردند. کد را جهت مشاهده جزئیات استفاده بررسی کنید.
| # | نام | شغل | رنگ مورد علاقه |
|---|---|---|---|
| 1 | Cy Ganderton | کارشناس کنترل کیفیت | آبی |
| 2 | Hart Hagerty | تکنسین پشتیبانی دسکتاپ | بنفش |
| 3 | Brice Swyre | حسابدار مالیات | قرمز |
| 4 | Marjy Ferencz | دستیار اداری ۱ | زرشکی |
<div
class="is-scrollbar-hidden min-w-full overflow-x-auto rounded-lg border border-slate-200 dark:border-navy-500"
>
<table class="w-full text-right">
<thead>
<tr>
<th
class="whitespace-nowrap border border-t-0 border-l-0 border-slate-200 px-3 py-3 font-semibold uppercase text-slate-800 dark:border-navy-500 dark:text-navy-100 lg:px-5"
>
#
</th>
<th
class="whitespace-nowrap border border-t-0 border-slate-200 px-3 py-3 font-semibold uppercase text-slate-800 dark:border-navy-500 dark:text-navy-100 lg:px-5"
>
Name
</th>
<th
class="whitespace-nowrap border border-t-0 border-slate-200 px-3 py-3 font-semibold uppercase text-slate-800 dark:border-navy-500 dark:text-navy-100 lg:px-5"
>
Job
</th>
<th
class="whitespace-nowrap border border-t-0 border-r-0 border-slate-200 px-3 py-3 font-semibold uppercase text-slate-800 dark:border-navy-500 dark:text-navy-100 lg:px-5"
>
Favorite Color
</th>
</tr>
</thead>
<tbody>
<tr>
<td
class="whitespace-nowrap border border-l-0 border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
>
1
</td>
<td
class="whitespace-nowrap border border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
>
Cy Ganderton
</td>
<td
class="whitespace-nowrap border border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
>
Quality Control Specialist
</td>
<td
class="whitespace-nowrap border border-r-0 border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
>
Blue
</td>
</tr>
<tr>
<td
class="whitespace-nowrap border border-l-0 border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
>
2
</td>
<td
class="whitespace-nowrap border border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
>
Hart Hagerty
</td>
<td
class="whitespace-nowrap border border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
>
Desktop Support Technician
</td>
<td
class="whitespace-nowrap border border-r-0 border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
>
Purple
</td>
</tr>
<tr>
<td
class="whitespace-nowrap border border-l-0 border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
>
3
</td>
<td
class="whitespace-nowrap border border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
>
Brice Swyre
</td>
<td
class="whitespace-nowrap border border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
>
Tax Accountant
</td>
<td
class="whitespace-nowrap border border-r-0 border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
>
Red
</td>
</tr>
<tr>
<td
class="whitespace-nowrap border border-b-0 border-l-0 border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
>
4
</td>
<td
class="whitespace-nowrap border border-b-0 border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
>
Marjy Ferencz
</td>
<td
class="whitespace-nowrap border border-b-0 border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
>
Office Assistant I
</td>
<td
class="whitespace-nowrap border border-b-0 border-r-0 border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
>
Crimson
</td>
</tr>
</tbody>
</table>
</div>
ردیفهای قابل هاور
جداول اطلاعات را به گونهای نمایش میدهند که به سادگی قابل بررسی باشد تا کاربران بتوانند به دنبال الگوها و بینشها بگردند. کد را جهت مشاهده جزئیات استفاده بررسی کنید.
| # | نام | شغل | رنگ مورد علاقه |
|---|---|---|---|
| 1 | Cy Ganderton | کارشناس کنترل کیفیت | آبی |
| 2 | Hart Hagerty | تکنسین پشتیبانی دسکتاپ | بنفش |
| 3 | Brice Swyre | حسابدار مالیات | قرمز |
| 4 | Marjy Ferencz | دستیار اداری ۱ | زرشکی |
<div class="is-scrollbar-hidden min-w-full overflow-x-auto">
<table class="is-hoverable w-full text-right">
<thead>
<tr>
<th
class="whitespace-nowrap rounded-r-lg bg-slate-200 px-3 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
#
</th>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Name
</th>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Job
</th>
<th
class="whitespace-nowrap rounded-l-lg bg-slate-200 px-3 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Favorite Color
</th>
</tr>
</thead>
<tbody>
<tr
class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500"
>
<td class="whitespace-nowrap rounded-r-lg px-4 py-3 sm:px-5">1</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Cy Ganderton</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Quality Control Specialist
</td>
<td class="whitespace-nowrap rounded-l-lg px-4 py-3 sm:px-5">Blue</td>
</tr>
<tr
class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500"
>
<td class="whitespace-nowrap rounded-r-lg px-4 py-3 sm:px-5">2</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Hart Hagerty</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Desktop Support Technician
</td>
<td class="whitespace-nowrap rounded-l-lg px-4 py-3 sm:px-5">
Purple
</td>
</tr>
<tr
class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500"
>
<td class="whitespace-nowrap rounded-r-lg px-4 py-3 sm:px-5">3</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Brice Swyre</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Tax Accountant</td>
<td class="whitespace-nowrap rounded-l-lg px-4 py-3 sm:px-5">Red</td>
</tr>
<tr
class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500"
>
<td class="whitespace-nowrap rounded-r-lg px-4 py-3 sm:px-5">4</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Marjy Ferencz</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Office Assistant I
</td>
<td class="whitespace-nowrap rounded-l-lg px-4 py-3 sm:px-5">
Crimson
</td>
</tr>
</tbody>
</table>
</div>
جدول راهراه
جداول اطلاعات را به گونهای نمایش میدهند که به سادگی قابل بررسی باشد تا کاربران بتوانند به دنبال الگوها و بینشها بگردند. کد را جهت مشاهده جزئیات استفاده بررسی کنید.
| # | نام | شغل | رنگ مورد علاقه |
|---|---|---|---|
| 1 | Cy Ganderton | کارشناس کنترل کیفیت | آبی |
| 2 | Hart Hagerty | تکنسین پشتیبانی دسکتاپ | بنفش |
| 3 | Brice Swyre | حسابدار مالیات | قرمز |
| 4 | Marjy Ferencz | دستیار اداری ۱ | زرشکی |
<div class="is-scrollbar-hidden min-w-full overflow-x-auto">
<table class="is-zebra w-full text-right">
<thead>
<tr>
<th
class="whitespace-nowrap rounded-r-lg bg-slate-200 px-3 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
#
</th>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Name
</th>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Job
</th>
<th
class="whitespace-nowrap rounded-l-lg bg-slate-200 px-3 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Favorite Color
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="whitespace-nowrap rounded-r-lg px-4 py-3 sm:px-5">1</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Cy Ganderton</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Quality Control Specialist
</td>
<td class="whitespace-nowrap rounded-l-lg px-4 py-3 sm:px-5">Blue</td>
</tr>
<tr>
<td class="whitespace-nowrap rounded-r-lg px-4 py-3 sm:px-5">2</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Hart Hagerty</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Desktop Support Technician
</td>
<td class="whitespace-nowrap rounded-l-lg px-4 py-3 sm:px-5">
Purple
</td>
</tr>
<tr>
<td class="whitespace-nowrap rounded-r-lg px-4 py-3 sm:px-5">3</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Brice Swyre</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Tax Accountant</td>
<td class="whitespace-nowrap rounded-l-lg px-4 py-3 sm:px-5">Red</td>
</tr>
<tr>
<td class="whitespace-nowrap rounded-r-lg px-4 py-3 sm:px-5">4</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Marjy Ferencz</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Office Assistant I
</td>
<td class="whitespace-nowrap rounded-l-lg px-4 py-3 sm:px-5">
Crimson
</td>
</tr>
</tbody>
</table>
</div>
جدول تمام عرض
جداول اطلاعات را به گونهای نمایش میدهند که به سادگی قابل بررسی باشد تا کاربران بتوانند به دنبال الگوها و بینشها بگردند. کد را جهت مشاهده جزئیات استفاده بررسی کنید.
| # | نام | شغل | رنگ مورد علاقه |
|---|---|---|---|
| 1 | Cy Ganderton | کارشناس کنترل کیفیت | آبی |
| 2 | Hart Hagerty | تکنسین پشتیبانی دسکتاپ | بنفش |
| 3 | Brice Swyre | حسابدار مالیات | قرمز |
| 4 | Marjy Ferencz | دستیار اداری ۱ | زرشکی |
<div class="is-scrollbar-hidden min-w-full overflow-x-auto">
<table class="is-hoverable w-full text-right">
<thead>
<tr>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
#
</th>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Name
</th>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Job
</th>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Favorite Color
</th>
</tr>
</thead>
<tbody>
<tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">1</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Cy Ganderton</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Quality Control Specialist
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Blue</td>
</tr>
<tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">2</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Hart Hagerty</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Desktop Support Technician
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Purple</td>
</tr>
<tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">3</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Brice Swyre</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Tax Accountant</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Red</td>
</tr>
<tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">4</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Marjy Ferencz</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Office Assistant I
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Crimson</td>
</tr>
</tbody>
</table>
</div>
جدول تمام عرض راهراه
جداول اطلاعات را به گونهای نمایش میدهند که به سادگی قابل بررسی باشد تا کاربران بتوانند به دنبال الگوها و بینشها بگردند. کد را جهت مشاهده جزئیات استفاده بررسی کنید.
| # | نام | شغل | رنگ مورد علاقه |
|---|---|---|---|
| 1 | Cy Ganderton | کارشناس کنترل کیفیت | آبی |
| 2 | Hart Hagerty | تکنسین پشتیبانی دسکتاپ | بنفش |
| 3 | Brice Swyre | حسابدار مالیات | قرمز |
| 4 | Marjy Ferencz | دستیار اداری ۱ | زرشکی |
<div class="is-scrollbar-hidden min-w-full overflow-x-auto">
<table class="is-zebra w-full text-right">
<thead>
<tr>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
#
</th>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Name
</th>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Job
</th>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Favorite Color
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">1</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Cy Ganderton</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Quality Control Specialist
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Blue</td>
</tr>
<tr>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">2</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Hart Hagerty</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Desktop Support Technician
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Purple</td>
</tr>
<tr>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">3</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Brice Swyre</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Tax Accountant</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Red</td>
</tr>
<tr>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">4</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Marjy Ferencz</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Office Assistant I
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Crimson</td>
</tr>
</tbody>
</table>
</div>