تیل وایز - قالب داشبورد مدیریتی

پایه جدول

نمایش کد نمونه

جزء "جدول پایه" راهی ساده برای ایجاد جداول ساختاریافته در برنامه های کاربردی وب شما فراهم می کند. این سبک میز تمیز و مینیمال است و برای طیف وسیعی از موارد استفاده مناسب است.

کد / پیش‌نمایش نمونه

#	اسم کوچک	نام خانوادگی	نام کاربری
1	آنجلینا	چارلی	@angelinajolie
2	برد	هانم	@bradpitt
3	مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و	"نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از	@charliehunnam

#	اسم کوچک	نام خانوادگی	نام کاربری
1	آنجلینا	چارلی	@angelinajolie
2	برد	هانم	@bradpitt
3	مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و	"نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از	@charliehunnam

            
                HTMLOpenTagdiv class="overflow-x-auto"HTMLCloseTag
                                                    HTMLOpenTagtable
    data-tw-merge
    class="w-full rtl:text-right ltr:text-left"
HTMLCloseTag
    HTMLOpenTagthead
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    #
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    اسم کوچک
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    نام خانوادگی
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    نام کاربری
HTMLOpenTag/thHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/theadHTMLCloseTag
                                                        HTMLOpenTagtbodyHTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    1
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    آنجلینا
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    چارلی
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    @angelinajolie
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    2
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    برد
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    هانم
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    @bradpitt
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    3
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    "نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    @charliehunnam
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/tbodyHTMLCloseTag
HTMLOpenTag/tableHTMLCloseTag
                                                    HTMLOpenTagtable
    data-tw-merge
    class="w-full rtl:text-right ltr:text-left bg-dark text-white dark:bg-black/30 mt-5"
HTMLCloseTag
    HTMLOpenTagthead
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    #
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    اسم کوچک
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    نام خانوادگی
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    نام کاربری
HTMLOpenTag/thHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/theadHTMLCloseTag
                                                        HTMLOpenTagtbodyHTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300"
HTMLCloseTag
    1
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300"
HTMLCloseTag
    آنجلینا
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300"
HTMLCloseTag
    چارلی
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300"
HTMLCloseTag
    @angelinajolie
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300"
HTMLCloseTag
    2
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300"
HTMLCloseTag
    برد
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300"
HTMLCloseTag
    هانم
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300"
HTMLCloseTag
    @bradpitt
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300"
HTMLCloseTag
    3
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300"
HTMLCloseTag
    مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300"
HTMLCloseTag
    "نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300"
HTMLCloseTag
    @charliehunnam
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/tbodyHTMLCloseTag
HTMLOpenTag/tableHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag

مثال بالا نحوه ایجاد یک جدول پایه با ستون هایی برای "نام"، "نام خانوادگی" و "نام کاربری" را نشان می دهد. خواندن این جدول آسان است و می‌توان آن را مطابق با نیازهای برنامه شما سفارشی کرد. هنگامی که می خواهید ساختار جدول ساده و تمیزی را بدون استایل یا پیچیدگی اضافی داشته باشید، از جزء "جدول پایه" استفاده کنید.

جدول حاشیه‌دار

نمایش کد نمونه

مولفه "جدول حاشیه‌دار" تغییری از جدول اصلی است، با ویژگی اضافه شده حاشیه های اطراف جدول و سلول های آن. این انتخاب سبک، تمایز بصری بین سطرها و ستون‌ها را افزایش می‌دهد و محتوای جدول را بیشتر تعریف و سازمان‌دهی می‌کند.

کد / پیش‌نمایش نمونه

#	اسم کوچک	نام خانوادگی	نام کاربری
1	آنجلینا	چارلی	@angelinajolie
2	برد	هانم	@bradpitt
3	مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و	"نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از	@charliehunnam

            
                HTMLOpenTagdiv class="overflow-x-auto"HTMLCloseTag
                                                    HTMLOpenTagtable
    data-tw-merge
    class="w-full rtl:text-right ltr:text-left"
HTMLCloseTag
    HTMLOpenTagthead
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-l border-r border-t whitespace-nowrap"
HTMLCloseTag
    #
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-l border-r border-t whitespace-nowrap"
HTMLCloseTag
    اسم کوچک
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-l border-r border-t whitespace-nowrap"
HTMLCloseTag
    نام خانوادگی
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-l border-r border-t whitespace-nowrap"
HTMLCloseTag
    نام کاربری
HTMLOpenTag/thHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/theadHTMLCloseTag
                                                        HTMLOpenTagtbodyHTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    1
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    آنجلینا
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    چارلی
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    @angelinajolie
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    2
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    برد
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    هانم
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    @bradpitt
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    3
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    "نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    @charliehunnam
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/tbodyHTMLCloseTag
HTMLOpenTag/tableHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag

در این مثال، یک "جدول حاشیه‌دار" با حاشیه هایی در اطراف جدول و سلول های آن ایجاد می شود. این تمایز بصری اضافه شده می تواند به ویژه زمانی مفید باشد که می خواهید بر ساختار میز خود تأکید کنید. هنگامی که به جدولی با مرزهای کاملاً مشخص نیاز دارید تا جداسازی بصری بین سطرها و ستون ها را افزایش دهید، از مؤلفه "جدول حاشیه‌دار" استفاده کنید.

جدول قابل شناور

نمایش کد نمونه

مولفه "جدول قابل شناور" برای بهبود تجربه کاربر با افزودن افکت شناور به ردیف‌های جدول طراحی شده است. هنگامی که کاربران ماوس خود را روی یک ردیف می‌کشند، برجسته می‌شود و یک نشانه بصری ارائه می‌کند و تعامل را بهبود می‌بخشد.

کد / پیش‌نمایش نمونه

#	اسم کوچک	نام خانوادگی	نام کاربری
1	آنجلینا	چارلی	@angelinajolie
2	برد	هانم	@bradpitt
3	مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و	"نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از	@charliehunnam

            
                HTMLOpenTagdiv class="overflow-x-auto"HTMLCloseTag
                                                    HTMLOpenTagtable
    data-tw-merge
    class="w-full rtl:text-right ltr:text-left"
HTMLCloseTag
    HTMLOpenTagthead
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class="[&:hover_td]:bg-slate-100 [&:hover_td]:dark:bg-darkmode-300 [&:hover_td]:dark:bg-opacity-50"
HTMLCloseTag
    HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-l border-r border-t whitespace-nowrap"
HTMLCloseTag
    #
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-l border-r border-t whitespace-nowrap"
HTMLCloseTag
    اسم کوچک
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-l border-r border-t whitespace-nowrap"
HTMLCloseTag
    نام خانوادگی
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-l border-r border-t whitespace-nowrap"
HTMLCloseTag
    نام کاربری
HTMLOpenTag/thHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/theadHTMLCloseTag
                                                        HTMLOpenTagtbodyHTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class="[&:hover_td]:bg-slate-100 [&:hover_td]:dark:bg-darkmode-300 [&:hover_td]:dark:bg-opacity-50"
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    1
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    آنجلینا
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    چارلی
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    @angelinajolie
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class="[&:hover_td]:bg-slate-100 [&:hover_td]:dark:bg-darkmode-300 [&:hover_td]:dark:bg-opacity-50"
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    2
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    برد
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    هانم
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    @bradpitt
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class="[&:hover_td]:bg-slate-100 [&:hover_td]:dark:bg-darkmode-300 [&:hover_td]:dark:bg-opacity-50"
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    3
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    "نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    @charliehunnam
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/tbodyHTMLCloseTag
HTMLOpenTag/tableHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag

در این مثال، یک "جدول شناور" با افزودن پایه شناور به جزء جدول ایجاد می شود. وقتی کاربران روی ردیف‌ها قرار می‌گیرند، به صورت بصری با برجسته کردن پاسخ می‌دهند و ردیابی تعاملات آنها را آسان‌تر می‌کنند. زمانی که می‌خواهید تعامل کاربر را بهبود ببخشید و تجربه تعاملی‌تری را در محتوای مبتنی بر جدول خود ارائه دهید، از مؤلفه «میز شناور» استفاده کنید.

جدول با وضعیت‌های سطر

نمایش کد نمونه

ویژگی "حالت های ردیف جدول" به شما امکان می دهد شاخص های بصری را به ردیف های جدول اضافه کنید، ارائه را بهبود ببخشید و اطلاعات اضافی را به کاربران منتقل کنید. می‌توانید سبک‌های مختلفی را برای نمایش وضعیت‌ها یا دسته‌های مختلف در ردیف‌ها اعمال کنید و جداول خود را آموزنده‌تر و جذاب‌تر کنید.

کد / پیش‌نمایش نمونه

#	اسم کوچک	نام خانوادگی	نام کاربری
1	آنجلینا	چارلی	@angelinajolie
2	برد	هانم	@bradpitt
3	مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و	"نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از	@charliehunnam

            
                HTMLOpenTagdiv class="overflow-x-auto"HTMLCloseTag
                                                    HTMLOpenTagtable
    data-tw-merge
    class="w-full rtl:text-right ltr:text-left"
HTMLCloseTag
    HTMLOpenTagthead
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    #
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    اسم کوچک
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    نام خانوادگی
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    نام کاربری
HTMLOpenTag/thHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/theadHTMLCloseTag
                                                        HTMLOpenTagtbodyHTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class="bg-primary text-white"
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    1
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    آنجلینا
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    چارلی
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    @angelinajolie
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class="bg-danger text-white"
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    2
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    برد
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    هانم
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    @bradpitt
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class="bg-warning"
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    3
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    "نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    @charliehunnam
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/tbodyHTMLCloseTag
HTMLOpenTag/tableHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag

در این مثال، وضعیت‌های مختلف ردیف‌ها را اعمال کرده‌ایم تا ردیف‌های خاصی را برجسته کنیم:

ردیف اول با وضعیت اصلی علامت‌گذاری شده است، که معمولاً برای محتوای مثبت یا برجسته استفاده می‌شود.
ردیف دوم با وضعیت خطر علامت‌گذاری شده است، که اغلب برای نشان دادن یک شرایط بحرانی یا منفی استفاده می‌شود.
ردیف سوم با وضعیت هشدار علامت‌گذاری شده است، مناسب برای هشدار دادن به کاربران در مواقع هشداردهنده است.

با استفاده از «وضعیت‌های ردیف جدول»، می‌توانید ردیف‌ها را بر اساس اهمیت یا دسته‌بندی آن‌ها به صورت بصری متمایز کنید و درک محتوای داخل جدول را برای کاربران آسان‌تر می‌کند.

گزینه های سر جدول

نمایش کد نمونه

ویژگی «گزینه‌های سر جدول» به شما امکان می‌دهد ظاهر هدر جدول را سفارشی کنید تا با طراحی و استایل برنامه‌تان مطابقت داشته باشد. شما می توانید بین دو نوع مختلف انتخاب کنید: "تاریک" و "روشن"، که هر کدام یک سبک بصری متمایز را برای هدر جدول ارائه می دهند.

کد / پیش‌نمایش نمونه

#	اسم کوچک	نام خانوادگی	نام کاربری
1	آنجلینا	چارلی	@angelinajolie
2	برد	هانم	@bradpitt
3	مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و	"نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از	@charliehunnam

#	اسم کوچک	نام خانوادگی	نام کاربری
1	آنجلینا	چارلی	@angelinajolie
2	برد	هانم	@bradpitt
3	مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و	"نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از	@charliehunnam

            
                HTMLOpenTagdiv class="overflow-x-auto"HTMLCloseTag
                                                    HTMLOpenTagtable
    data-tw-merge
    class="w-full rtl:text-right ltr:text-left"
HTMLCloseTag
    HTMLOpenTagthead
    data-tw-merge
    class="bg-dark text-white dark:bg-black/30"
HTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-b-0 whitespace-nowrap"
HTMLCloseTag
    #
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-b-0 whitespace-nowrap"
HTMLCloseTag
    اسم کوچک
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-b-0 whitespace-nowrap"
HTMLCloseTag
    نام خانوادگی
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-b-0 whitespace-nowrap"
HTMLCloseTag
    نام کاربری
HTMLOpenTag/thHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/theadHTMLCloseTag
                                                        HTMLOpenTagtbodyHTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    1
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    آنجلینا
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    چارلی
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    @angelinajolie
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    2
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    برد
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    هانم
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    @bradpitt
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    3
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    "نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    @charliehunnam
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/tbodyHTMLCloseTag
HTMLOpenTag/tableHTMLCloseTag
                                                    HTMLOpenTagtable
    data-tw-merge
    class="w-full rtl:text-right ltr:text-left mt-5"
HTMLCloseTag
    HTMLOpenTagthead
    data-tw-merge
    class="bg-slate-200/60 dark:bg-slate-200"
HTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-b-0 text-slate-700 whitespace-nowrap"
HTMLCloseTag
    #
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-b-0 text-slate-700 whitespace-nowrap"
HTMLCloseTag
    اسم کوچک
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-b-0 text-slate-700 whitespace-nowrap"
HTMLCloseTag
    نام خانوادگی
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-b-0 text-slate-700 whitespace-nowrap"
HTMLCloseTag
    نام کاربری
HTMLOpenTag/thHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/theadHTMLCloseTag
                                                        HTMLOpenTagtbodyHTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    1
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    آنجلینا
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    چارلی
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    @angelinajolie
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    2
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    برد
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    هانم
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    @bradpitt
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    3
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    "نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    @charliehunnam
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/tbodyHTMLCloseTag
HTMLOpenTag/tableHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag

در این مثال، دو سرصفحه مختلف جدول را به نمایش می‌گذاریم با استفاده از نوع‌های "تیره" و "روشن": سرصفحه اول با نوع "تیره" طراحی شده است که باعث ایجاد یک پس‌زمینه تیره و متن سفید مشخص می‌شود.

سربرگ اول جدول با نوع "تاریک" طراحی شده است که رنگ پس‌زمینه تاریک و متن سفید ارائه می‌دهد، ویژگی که رنگ پس‌زمینه تاریک و متن سفید ارائه می‌دهد و یک سربرگ متمایز بصری ایجاد می‌کند.
سرصفحه دوم از نوع "روشن" استفاده می‌کند، که یک پس‌زمینه روشن با متن تیره برای یک ظاهر ملایم‌تر ارائه می‌دهد. ظاهری ظریف.

با استفاده از "گزینه های سر جدول"، می توانید سرصفحه های جدول خود را با طرح طراحی برنامه خود تراز کنید و از یک رابط کاربری منسجم و زیباشناختی اطمینان حاصل کنید.

جدول واکنشگرا

نمایش کد نمونه

ویژگی "جدول پاسخگو" تضمین می کند که محتوای جدول شما به خوبی با اندازه های مختلف صفحه تطبیق می یابد و تجربه مشاهده مطلوبی را هم در صفحه نمایش های دسکتاپ بزرگ و هم در دستگاه های تلفن همراه کوچکتر ارائه می دهد. وقتی مؤلفه «جدول پاسخگو» را فعال می‌کنید، به کاربران اجازه می‌دهد تا به صورت افقی پیمایش کنند تا کل جدول را مشاهده کنند و اطمینان حاصل شود که هیچ داده‌ای در صفحه‌های کوچک‌تر قطع نمی‌شود.

کد / پیش‌نمایش نمونه

#	اسم کوچک	نام خانوادگی	نام کاربری	ایمیل	آدرس
1	آنجلینا	چارلی	@angelinajolie	angelinajolie@gmail.com	260 خیابان و. استورم نیویورک، NY 10025.
2	برد	هانم	@bradpitt	براد پیت@gmail.com	47 خیابان دیویژن بوفالو، NY 14241.
3	مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و	"نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از	@charliehunnam	charliehunnam@gmail.com	8023 خیابان آمریج هریمن، NY 10926.

            
                HTMLOpenTagdiv class="overflow-x-auto"HTMLCloseTag
                                                    HTMLOpenTagtable
    data-tw-merge
    class="w-full rtl:text-right ltr:text-left"
HTMLCloseTag
    HTMLOpenTagthead
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    #
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    اسم کوچک
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    نام خانوادگی
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    نام کاربری
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    ایمیل
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    آدرس
HTMLOpenTag/thHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/theadHTMLCloseTag
                                                        HTMLOpenTagtbodyHTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    1
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    آنجلینا
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    چارلی
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    @angelinajolie
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    angelinajolie@gmail.com
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    260 خیابان و. استورم نیویورک، NY 10025.
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    2
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    برد
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    هانم
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    @bradpitt
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    براد پیت@gmail.com
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    47 خیابان دیویژن بوفالو، NY 14241.
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    3
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    "نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    @charliehunnam
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    charliehunnam@gmail.com
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    8023 خیابان آمریج هریمن، NY 10926.
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/tbodyHTMLCloseTag
HTMLOpenTag/tableHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag

در این مثال، یک "جدول پاسخگو" با قرار دادن آن در یک ظرف با سرریز افقی ایجاد می شود. این به کاربران اجازه می دهد تا برای مشاهده جدول کامل به صورت افقی حرکت کنند و اطمینان حاصل شود که تمام ستون ها و داده ها در صفحه های کوچکتر قابل دسترسی هستند. زمانی که می‌خواهید جدول شما خوانایی و قابلیت استفاده را در دستگاه‌های مختلف، بدون توجه به اندازه صفحه نمایش، حفظ کند، از مؤلفه «جدول پاسخ‌گو» استفاده کنید.

کوچک جدول

نمایش کد نمونه

اجزای "جدول کوچک" به شما امکان می‌دهد جدولی فشرده و کم‌جا، که برای مواقعی که نیاز به نمایش دادن داده‌های جدولی در فضای محدود یا تاکید بر یک طراحی حداقلی دارید، ایده‌آل است، بسازید. با اضافه کردن ویژگی sm (کوچک) به جدول، می‌توانید اندازه کلی جدول را کاهش دهید و از آن طریق مناسبیت آن برای نمایش اطلاعات به صورت مختصر را افزایش دهید.

کد / پیش‌نمایش نمونه

#	اسم کوچک	نام خانوادگی	نام کاربری
1	آنجلینا	چارلی	@angelinajolie
2	برد	هانم	@bradpitt
3	مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و	"نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از	@charliehunnam

            
                HTMLOpenTagdiv class="overflow-x-auto"HTMLCloseTag
                                                    HTMLOpenTagtable
    data-tw-merge
    class="w-full rtl:text-right ltr:text-left"
HTMLCloseTag
    HTMLOpenTagthead
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 px-4 py-2 whitespace-nowrap"
HTMLCloseTag
    #
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 px-4 py-2 whitespace-nowrap"
HTMLCloseTag
    اسم کوچک
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 px-4 py-2 whitespace-nowrap"
HTMLCloseTag
    نام خانوادگی
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 px-4 py-2 whitespace-nowrap"
HTMLCloseTag
    نام کاربری
HTMLOpenTag/thHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/theadHTMLCloseTag
                                                        HTMLOpenTagtbodyHTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2"
HTMLCloseTag
    1
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2"
HTMLCloseTag
    آنجلینا
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2"
HTMLCloseTag
    چارلی
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2"
HTMLCloseTag
    @angelinajolie
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2"
HTMLCloseTag
    2
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2"
HTMLCloseTag
    برد
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2"
HTMLCloseTag
    هانم
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2"
HTMLCloseTag
    @bradpitt
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2"
HTMLCloseTag
    3
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2"
HTMLCloseTag
    مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2"
HTMLCloseTag
    "نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2"
HTMLCloseTag
    @charliehunnam
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/tbodyHTMLCloseTag
HTMLOpenTag/tableHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag

در این مثال، یک "میز کوچک" با اعمال پراپ sm به جزء جدول ایجاد می شود. این امر اندازه کلی میز را کاهش می دهد و آن را فشرده تر و برای موقعیت هایی که فضا محدود است مناسب می کند. هنگامی که نیاز به نمایش داده های جدولی در یک فضای محدود دارید یا زمانی که می خواهید طراحی تمیز و مینیمالیستی را حفظ کنید، از مؤلفه «میز کوچک» استفاده کنید.

ردیف‌های خط‌خطی جدول

نمایش کد نمونه

ویژگی "جدول ردیف های راه راه" خوانایی و جذابیت بصری جداول شما را با اعمال رنگ های متناوب پس زمینه در ردیف ها افزایش می دهد. این تمایز واضحی بین ردیف‌های زوج و فرد ایجاد می‌کند و ردیابی و تفسیر داده‌های جدولی را برای کاربران آسان‌تر می‌کند.

کد / پیش‌نمایش نمونه

#	اسم کوچک	نام خانوادگی	نام کاربری
1	آنجلینا	چارلی	@angelinajolie
2	برد	هانم	@bradpitt
3	مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و	"نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از	@charliehunnam

            
                HTMLOpenTagdiv class="overflow-x-auto"HTMLCloseTag
                                                    HTMLOpenTagtable
    data-tw-merge
    class="w-full rtl:text-right ltr:text-left"
HTMLCloseTag
    HTMLOpenTagthead
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class="[&:nth-of-type(odd)_td]:bg-slate-100 [&:nth-of-type(odd)_td]:dark:bg-darkmode-300 [&:nth-of-type(odd)_td]:dark:bg-opacity-50"
HTMLCloseTag
    HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    #
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    اسم کوچک
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    نام خانوادگی
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    نام کاربری
HTMLOpenTag/thHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/theadHTMLCloseTag
                                                        HTMLOpenTagtbodyHTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class="[&:nth-of-type(odd)_td]:bg-slate-100 [&:nth-of-type(odd)_td]:dark:bg-darkmode-300 [&:nth-of-type(odd)_td]:dark:bg-opacity-50"
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    1
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    آنجلینا
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    چارلی
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    @angelinajolie
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class="[&:nth-of-type(odd)_td]:bg-slate-100 [&:nth-of-type(odd)_td]:dark:bg-darkmode-300 [&:nth-of-type(odd)_td]:dark:bg-opacity-50"
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    2
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    برد
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    هانم
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    @bradpitt
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class="[&:nth-of-type(odd)_td]:bg-slate-100 [&:nth-of-type(odd)_td]:dark:bg-darkmode-300 [&:nth-of-type(odd)_td]:dark:bg-opacity-50"
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    3
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    "نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    @charliehunnam
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/tbodyHTMLCloseTag
HTMLOpenTag/tableHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag

در این مثال، با افزودن ویژگی striped به اجزای جدول، یک "جدول با ردیف‌های خط‌خورده" ایجاد می‌شود. ردیف‌های زوج با یک رنگ پس‌زمینه طراحی می‌شوند، در حالی که ردیف‌های فرد با پس‌زمینه پیش‌فرض باقی می‌مانند. این الگوی تناوبی جداشدن بصری ردیف‌ها را بهبود می‌بخشد و قابلیت خوانایی کلی جدول را ارتقا می‌دهد. از اجزای "جدول با ردیف‌های خط‌خورده" استفاده کنید هنگامی که می‌خواهید داده‌های جدولی را در یک قالب بصری منظم و آسان قابل خواندن ارائه دهید.

رابط اجزاء

در این بخش، شما اطلاعات دقیقی درباره ویژگی‌ها، کلاس‌ها، و گزینه‌های موجود که می‌توان با این مؤلفه استفاده کرد را پیدا خواهید کرد. درک این ویژگی‌ها برای سفارشی‌سازی و پیکربندی مؤلفه برای تنظیمات خاص شما بسیار مهم است.

در زیر لیستی از ویژگی‌هایی که می‌توان به اجزاء منتقل کرد، آمده است:

جدول

پراپ	نوع	شرح
`dark`	`boolean`	فعال کردن سبک حالت تاریک برای جدول.
`bordered`	`boolean`	افزودن حاشیه به سلول‌های جدول.
`hover`	`boolean`	فعال کردن افکت‌های هاور بر روی سطرهای جدول.
`striped`	`boolean`	تغییر رنگ‌های پس‌زمینه سطرها به صورت متناوب برای بهبود خوانایی.
`sm`	`boolean`	کاهش اندازه جدول برای نمایش جدولی جمع و جورتر.

Table.Thead

پراپ	نوع	شرح
`variant`	`default`, `light`, `dark`	استایل نوعی را برای سر جدول تنظیم می‌کند.

Tab.Tbody

پراپ	نوع	شرح
بدون پراپ

Table.Tr

پراپ	نوع	شرح
بدون پراپ

Table.Th

پراپ	نوع	شرح
بدون پراپ

Table.Td

پراپ	نوع	شرح
بدون پراپ