جداول پایه
مثال پایه
برای یک ظاهر طراحی اولیه - بالشتک های سبک و فقط تقسیم کننده های
افقی - کلاس پایه را .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حالت شناور در ردیف‌های جدول در یک
<tbody>.
| # | اول | آخرین | دسته |
|---|---|---|---|
| 1 | علی | محمدی | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری پرنده | سامسون |
جداول فعال
با اضافه کردن یک کلاس، یک ردیف یا سلول جدول را برجسته کنید
.table-active.
| # | اول | آخرین | دسته |
|---|---|---|---|
| 1 | علی | محمدی | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری پرنده | سامسون |
میزهای فعال دار
با اضافه کردن یک کلاس، یک ردیف یا سلول جدول را برجسته کنید
.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 | لری | پرنده | |
| پاورقی | پاورقی | پاورقی | پاورقی |
عنوان
عملکرد یک <caption>عنوان مانند یک جدول است.
این به کاربران دارای صفحه‌خوان کمک می‌کند تا جدولی را پیدا کنند و بفهمند درباره چیست
و تصمیم بگیرند که آیا می‌خواهند آن را بخوانند.
| # | اول | آخرین | دسته |
|---|---|---|---|
| 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 | ||||||||||||||||
