جداول پایه
مثال پایه
برای یک ظاهر طراحی اولیه - بالشتک سبک و فقط تقسیم کننده های افقی - کلاس پایه را اضافه کنید.tableبه هر<table>.
| # | اول | آخرین | دسته |
|---|---|---|---|
| 1 | علامت گذاری کنید | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری پرنده | سامسون |
انواع
از کلاس های متنی برای رنگ آمیزی جداول، ردیف های جدول یا سلول های فردی استفاده کنید.
| کلاس | سرفصل | سرفصل |
|---|---|---|
| پیش فرض | سلول | سلول |
| اولیه | سلول | سلول |
| ثانویه | سلول | سلول |
| موفقیت | سلول | سلول |
| خطر | سلول | سلول |
| هشدار | سلول | سلول |
| اطلاعات | سلول | سلول |
| نور | سلول | سلول |
| تاریک | سلول | سلول |
جدول ردیف های راه راه
استفاده کنید.table-stripedبرای افزودن راه راه گورخری به هر ردیف جدول در داخل<tbody>.
| # | اول | آخرین | دسته |
|---|---|---|---|
| 1 | علامت گذاری کنید | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری پرنده | سامسون |
جدول ردیف های راه راه تیره
استفاده کنید.table-dark .table-stripedبرای اضافه کردن گورخر راه راه به هر ردیف جدول در داخل<tbody>.
| # | اول | آخرین | دسته |
|---|---|---|---|
| 1 | علامت گذاری کنید | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری پرنده | سامسون |
جدول ردیف های راه راه موفقیت آمیز بود
استفاده کنید.table-success .table-stripedبرای اضافه کردن گورخر راه راه به هر ردیف جدول در داخل<tbody>.
| # | اول | آخرین | دسته |
|---|---|---|---|
| 1 | علامت گذاری کنید | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری پرنده | سامسون |
ستون های راه راه
استفاده کنید.table-striped-columns برای افزودن راه راه گورخر به هر میزی ستون
| # | اول | آخرین | دسته |
|---|---|---|---|
| 1 | علامت گذاری کنید | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری پرنده | سامسون |
ستون های راه راه دار
استفاده کنید.table-dark .table-striped-columns برای اضافه کردن راه راه گورخر به هر ستون جدول
| # | اول | آخرین | دسته |
|---|---|---|---|
| 1 | علامت گذاری کنید | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری پرنده | سامسون |
ستون های راه راه دار
استفاده کنید.table-success .table-striped-columns برای اضافه کردن خط گورخر به هر ستون جدول.
| # | اول | آخرین | دسته |
|---|---|---|---|
| 1 | علامت گذاری کنید | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری پرنده | سامسون |
ردیف های قابل شناور
اضافه کنید.table-hoverبرای فعال کردن حالت شناور در ردیفهای جدول داخل الف<tbody>.
| # | اول | آخرین | دسته |
|---|---|---|---|
| 1 | علامت گذاری کنید | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری پرنده | سامسون |
ردیف های قابل شناور تاریک
اضافه کنید.table-dark .table-hoverبرای فعال کردن حالت شناور روی میز ردیف های داخل a<tbody>.
| # | اول | آخرین | دسته |
|---|---|---|---|
| 1 | علامت گذاری کنید | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری پرنده | سامسون |
جداول فعال
یک ردیف یا سلول جدول را با افزودن a برجسته کنید.table-activeکلاس
| # | اول | آخرین | دسته |
|---|---|---|---|
| 1 | علامت گذاری کنید | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری پرنده | سامسون |
میزهای فعال دار
یک ردیف یا سلول جدول را با افزودن a برجسته کنید.table-dark .table-activeکلاس
| # | اول | آخرین | دسته |
|---|---|---|---|
| 1 | علامت گذاری کنید | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری پرنده | سامسون |
میز حاشیه دار
اضافه کنید.table-borderedبرای حاشیه های همه طرف میز و سلول ها
| # | اول | آخرین | دسته |
|---|---|---|---|
| 1 | علامت گذاری کنید | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری پرنده | سامسون |
جدول رنگ حاشیه
اضافه کنید.table-bordered & .border-primaryمی تواند باشد برای تغییر رنگ اضافه شده است.
| # | اول | آخرین | دسته |
|---|---|---|---|
| 1 | علامت گذاری کنید | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری پرنده | سامسون |
جداول بدون حاشیه
اضافه کنید.table-borderlessبرای یک میز بدون حاشیه..
| # | اول | آخرین | دسته |
|---|---|---|---|
| 1 | علامت گذاری کنید | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری پرنده | سامسون |
جداول بدون حاشیه دار
اضافه کنید.table-borderless .table-darkبرای یک میز بدون حاشیه و جدول تیره
| # | اول | آخرین | دسته |
|---|---|---|---|
| 1 | علامت گذاری کنید | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری پرنده | سامسون |
میزهای کوچک
اضافه کنید.table-sm تا هر میز را با برش دادن همه فشرده تر کنید لایه بندی سلولی به نصف
| # | اول | آخرین | دسته |
|---|---|---|---|
| 1 | علامت گذاری کنید | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری پرنده | سامسون |
میزهای کوچک دار
اضافه کنید.table-sm .table-dark برای ساختن هر میز با برش تمام لایه های سلولی به نصف، فشرده تر است.
| # | اول | آخرین | دسته |
|---|---|---|---|
| 1 | علامت گذاری کنید | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری پرنده | سامسون |
جداکننده های گروه جدول
یک حاشیه ضخیم تر، بین جدول تیره تر اضافه کنید گروه ها-<thead>, <tbody>، و<tfoot>- با.table-group-divider. با تغییر رنگ، رنگ را سفارشی کنیدborder-top-color(که ما در حال حاضر یک کلاس کاربردی برای این زمان ارائه نکنید).
| # | اول | آخرین | دسته |
|---|---|---|---|
| 1 | علامت گذاری کنید | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری پرنده | سامسون |
تراز عمودی
سلول های جدول از<thead>همیشه به صورت عمودی تراز می شوند پایین سلول های جدول در<tbody>آنها را به ارث می برند تراز از<table>و با بالا تراز می شوند پیش فرض استفاده کنیدعمودی تراز کردنکلاس ها برای تراز مجدد در صورت نیاز.
| سرفصل 1 | سرفصل 2 | سرفصل 3 | سرفصل 4 |
|---|---|---|---|
این سلول ارث می بردvertical-align: middle;از جدول | این سلول ارث می بردvertical-align: middle;از جدول | این سلول ارث می بردvertical-align: middle;از جدول | این در اینجا برخی از متن نگهدارنده است که در نظر گرفته شده است کمی فضای عمودی را اشغال کند، به نحوه عملکرد تراز عمودی را نشان دهید سلول های قبلی |
این سلول ارث می بردvertical-align: bottom;از ردیف جدول | این سلول ارث می بردvertical-align: bottom;از ردیف جدول | این سلول ارث می بردvertical-align: bottom;از ردیف جدول | این در اینجا برخی از متن نگهدارنده است که در نظر گرفته شده است کمی فضای عمودی را اشغال کند، به نحوه عملکرد تراز عمودی را نشان دهید سلول های قبلی |
این سلول ارث می بردvertical-align: middle;از جدول | این سلول ارث می بردvertical-align: middle;از جدول | این سلول به سمت بالا تراز شده است. | این در اینجا برخی از متن نگهدارنده است که در نظر گرفته شده است کمی فضای عمودی را اشغال کند، به نحوه عملکرد تراز عمودی را نشان دهید سلول های قبلی |
میز تودرتو
سبکهای حاشیه، سبکهای فعال و انواع جدول به ارث نمیرسند میزهای تو در تو
| # | اول | آخرین | دسته | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | علامت گذاری کنید | اتو | @mdo | ||||||||||||
| |||||||||||||||
| 3 | لری | پرنده | |||||||||||||
سر میز
مشابه جداول و جداول تیره، از کلاس های اصلاح کننده استفاده کنید.table-lightساختن<thead>s سبک به نظر می رسند یا خاکستری تیره
| # | اول | آخرین | دسته |
|---|---|---|---|
| 1 | علامت گذاری کنید | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری | پرنده |
سر میز دار
مشابه جداول و جداول تیره، از کلاس های اصلاح کننده استفاده کنید.table-darkساختن<thead>s سبک به نظر می رسند یا خاکستری تیره
| # | اول | آخرین | دسته |
|---|---|---|---|
| 1 | علامت گذاری کنید | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری | پرنده |
سر میز دار
مشابه جداول و جداول تیره، از کلاس های اصلاح کننده استفاده کنید.table-darkساختن<thead>s سبک به نظر می رسند یا خاکستری تیره
| # | اول | آخرین | دسته |
|---|---|---|---|
| 1 | علامت گذاری کنید | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری | پرنده | |
| پاورقی | پاورقی | پاورقی | پاورقی |
عنوان
A <caption>عملکردهایی مانند a رفتن به سمت یک میز این به کاربران دارای صفحه خوان کمک می کند تا جدول و بفهمند درباره چیست و تصمیم بگیرند که آیا می خواهند آن را بخوانند.
| # | اول | آخرین | دسته |
|---|---|---|---|
| 1 | علامت گذاری کنید | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری پرنده | سامسون |
عنوان
شما همچنین می توانید قرار دهید<caption>در بالای جدول با.caption-top
| # | اول | آخرین | دسته |
|---|---|---|---|
| 1 | علامت گذاری کنید | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری | پرنده |
همیشه پاسخگو
در هر نقطه شکست، استفاده کنید.table-responsiveبرای جدول های اسکرول افقی
| # | سرفصل | سرفصل | سرفصل | سرفصل | سرفصل | سرفصل | سرفصل | سرفصل | سرفصل |
|---|---|---|---|---|---|---|---|---|---|
| 1 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
| 2 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
| 3 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
با آواتار
لیستی از تمام کاربران موجود در حساب شما از جمله نام، عنوان، ایمیل آنها و نقش
| نام | عنوان | ایمیل | نقش | اقدام |
|---|---|---|---|---|
 تونی ام. کارتر | طراح | tonymcarter@jourrapide.com | عضو | ویرایش کنید |
 جیمز ای چمب | طراح UI/UX | jamesechambliss@teleworm.us | مدیر | ویرایش کنید |
 شارلوت جی تورس | کپی رایتر | charlotte@jourrapide.com | عضو | ویرایش کنید |
 مری جی. ژرمن | پشته کامل | maryjgermain@jourrapide.com | مدیر عامل | ویرایش کنید |
 کوین سی ریس | مدیر محصول | kevincreyes@jourrapide.com | عضو | ویرایش کنید |
با چک باکس
لیستی از تمام کاربران موجود در حساب شما از جمله نام، عنوان، ایمیل آنها و نقش
| نام | عنوان | ایمیل | نقش | اقدام | |
|---|---|---|---|---|---|
| تونی ام. کارتر | طراح | tonymcarter@jourrapide.com | عضو | ویرایش کنید | |
| جیمز ای چمب | طراح UI/UX | jamesechambliss@teleworm.us | مدیر | ویرایش کنید | |
| شارلوت جی تورس | کپی رایتر | charlotte@jourrapide.com | عضو | ویرایش کنید | |
| مری جی. ژرمن | پشته کامل | maryjgermain@jourrapide.com | مدیر عامل | ویرایش کنید | |
| کوین سی ریس | مدیر محصول | kevincreyes@jourrapide.com | عضو | ویرایش کنید |
میز تودرتو
سبکهای حاشیه، سبکهای فعال و انواع جدول به ارث نمیرسند میزهای تو در تو
| شماره فاکتور | مبلغ فاکتور | تایید توسط مشتری | تاریخ پرداخت برنامه ریزی شده | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| F-011221/21 | 879.500 دلار | 11/05/2023 | 12/05/2023 | ||||||||||||||||
| |||||||||||||||||||
| F-011221/19 | 93.250 دلار | 9/05/2023 | 10/05/2023 | ||||||||||||||||
