جداول کاربرد بسیاری در نمایش اطلاعات دارد. در زیر به کلاسهای مرتبط با جداول اشاره خواهد شد.
جدول پایه
یک جدول ساده به صورت پیش فرض به شکل زیر میباشد.
LTR
#
First Name
Last Name
Position
1
Omid
Moridi
WidgetNas Creator
2
Reza
Rahmani
Developer
3
Mohammad Keshavarz
Marketing
RTL
#
نام
نام خانوادگی
عنوان
1
امید
مریدی
سازنده ویجت نس
2
رضا
رحمانی
برنامه نویس
3
محمد کشاورز
بازاریابی
انواع جدول
شما میتوانید با استفاده از کلاسهای اصلی تم، رنگبندی جدول را تغییر دهید
LTR
#
First Name
Last Name
Position
1
Omid
Moridi
WidgetNas Creator
2
Reza
Rahmani
Developer
3
Mohammad Keshavarz
Marketing
#
First Name
Last Name
Position
1
Omid
Moridi
WidgetNas Creator
2
Reza
Rahmani
Developer
3
Mohammad Keshavarz
Marketing
#
First Name
Last Name
Position
1
Omid
Moridi
WidgetNas Creator
2
Reza
Rahmani
Developer
3
Mohammad Keshavarz
Marketing
#
First Name
Last Name
Position
1
Omid
Moridi
WidgetNas Creator
2
Reza
Rahmani
Developer
3
Mohammad Keshavarz
Marketing
RTL
#
نام
نام خانوادگی
عنوان
1
امید
مریدی
سازنده ویجت نس
2
رضا
رحمانی
برنامه نویس
3
محمد کشاورز
بازاریابی
#
نام
نام خانوادگی
عنوان
1
امید
مریدی
سازنده ویجت نس
2
رضا
رحمانی
برنامه نویس
3
محمد کشاورز
بازاریابی
#
نام
نام خانوادگی
عنوان
1
امید
مریدی
سازنده ویجت نس
2
رضا
رحمانی
برنامه نویس
3
محمد کشاورز
بازاریابی
#
نام
نام خانوادگی
عنوان
1
امید
مریدی
سازنده ویجت نس
2
رضا
رحمانی
برنامه نویس
3
محمد کشاورز
بازاریابی
جدول راه راه
برای آنکه هر ردیف از ردیف قبلی قابل تفکیک باشد میتوانید از کلاس زیر استفاده کنید
LTR
#
First Name
Last Name
Position
1
Omid
Moridi
WidgetNas Creator
2
Reza
Rahmani
Developer
3
Mohammad Keshavarz
Marketing
#
First Name
Last Name
Position
1
Omid
Moridi
WidgetNas Creator
2
Reza
Rahmani
Developer
3
Mohammad Keshavarz
Marketing
RTL
#
نام
نام خانوادگی
عنوان
1
امید
مریدی
سازنده ویجت نس
2
رضا
رحمانی
برنامه نویس
3
محمد کشاورز
بازاریابی
#
نام
نام خانوادگی
عنوان
1
امید
مریدی
سازنده ویجت نس
2
رضا
رحمانی
برنامه نویس
3
محمد کشاورز
بازاریابی
ردیف های حساس به اشاره گر
اگر تمایل دارید با حرکت اشاره گر بر روی هر ردیف آن ردیف تحریک شود، از کلاس زیر استفاده کنید.
LTR
#
First Name
Last Name
Position
1
Omid
Moridi
WidgetNas Creator
2
Reza
Rahmani
Developer
3
Mohammad Keshavarz
Marketing
#
First Name
Last Name
Position
1
Omid
Moridi
WidgetNas Creator
2
Reza
Rahmani
Developer
3
Mohammad Keshavarz
Marketing
RTL
#
نام
نام خانوادگی
عنوان
1
امید
مریدی
سازنده ویجت نس
2
رضا
رحمانی
برنامه نویس
3
محمد کشاورز
بازاریابی
#
نام
نام خانوادگی
عنوان
1
امید
مریدی
سازنده ویجت نس
2
رضا
رحمانی
برنامه نویس
3
محمد کشاورز
بازاریابی
کادر جداول
اگر تمایل دارید جدول دارای کادر باشد از کلاس زیر استفاده کنید
LTR
#
First Name
Last Name
Position
1
Omid
Moridi
WidgetNas Creator
2
Reza
Rahmani
Developer
3
Mohammad Keshavarz
Marketing
#
First Name
Last Name
Position
1
Omid
Moridi
WidgetNas Creator
2
Reza
Rahmani
Developer
3
Mohammad Keshavarz
Marketing
#
First Name
Last Name
Position
1
Omid
Moridi
WidgetNas Creator
2
Reza
Rahmani
Developer
3
Mohammad Keshavarz
Marketing
RTL
#
نام
نام خانوادگی
عنوان
1
امید
مریدی
سازنده ویجت نس
2
رضا
رحمانی
برنامه نویس
3
محمد کشاورز
بازاریابی
#
نام
نام خانوادگی
عنوان
1
امید
مریدی
سازنده ویجت نس
2
رضا
رحمانی
برنامه نویس
3
محمد کشاورز
بازاریابی
#
نام
نام خانوادگی
عنوان
1
امید
مریدی
سازنده ویجت نس
2
رضا
رحمانی
برنامه نویس
3
محمد کشاورز
بازاریابی
ارتفاع ردیف متفاوت
در برخی مواقع نیاز است که جداول با ارتفاع متفاوتی نمایش داده شوند. شما میتوانید از مقدارهای اندازه xs تا xxxl استفاده کنید.
LTR
#
First Name
Last Name
Position
1
Omid
Moridi
WidgetNas Creator
2
Reza
Rahmani
Developer
3
Mohammad Keshavarz
Marketing
#
First Name
Last Name
Position
1
Omid
Moridi
WidgetNas Creator
2
Reza
Rahmani
Developer
3
Mohammad Keshavarz
Marketing
#
First Name
Last Name
Position
1
Omid
Moridi
WidgetNas Creator
2
Reza
Rahmani
Developer
3
Mohammad Keshavarz
Marketing
RTL
#
نام
نام خانوادگی
عنوان
1
امید
مریدی
سازنده ویجت نس
2
رضا
رحمانی
برنامه نویس
3
محمد کشاورز
بازاریابی
#
نام
نام خانوادگی
عنوان
1
امید
مریدی
سازنده ویجت نس
2
رضا
رحمانی
برنامه نویس
3
محمد کشاورز
بازاریابی
#
نام
نام خانوادگی
عنوان
1
امید
مریدی
سازنده ویجت نس
2
رضا
رحمانی
برنامه نویس
3
محمد کشاورز
بازاریابی
چینش عمودی متن
به صورت پیش فرض متن ها از بالا به پایین پر میشوند، در صورتیکه تمایل به تغییر وضعیت چینش دارید از کلاسهای va-? استفاده کنید.
LTR
va-top
va-middle
va-bottom
This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This is test message
This is test message
This is test message
RTL
va-top
va-middle
va-bottom
این در اینجا متن متغیرهایی است که قصد دارد فضای عمودی زیادی را اشغال کند ، تا نشان دهد چگونه ترازبندی عمودی در سلولهای قبلی کار می کند.
این یک متن آزمایشی است
این یک متن آزمایشی است
این یک متن آزمایشی است
جداول تو در تو
در برخی مواقع نیاز است یک جدول در جدولی دیگر نمایش داده شود. خصوصیات رنگی جدول والد به جدول زیر مجموعه ارث داده میشود.
LTR
#
First Name
Last Name
Position
1
Omid
Moridi
WidgetNas Creator
2
#
First Name
Last Name
Position
1
Omid
Moridi
WidgetNas Creator
2
Reza
Rahmani
Developer
3
Mohammad Keshavarz
Marketing
3
Mohammad Keshavarz
Marketing
#
First Name
Last Name
Position
1
Omid
Moridi
WidgetNas Creator
2
#
First Name
Last Name
Position
1
Omid
Moridi
WidgetNas Creator
2
Reza
Rahmani
Developer
3
Mohammad Keshavarz
Marketing
3
Mohammad Keshavarz
Marketing
RTL
#
نام
نام خانوادگی
عنوان
1
امید
مریدی
سازنده ویجت نس
2
#
نام
نام خانوادگی
عنوان
1
امید
مریدی
سازنده ویجت نس
2
رضا
رحمانی
برنامه نویس
3
محمد کشاورز
بازاریابی
3
محمد کشاورز
بازاریابی
#
نام
نام خانوادگی
عنوان
1
امید
مریدی
سازنده ویجت نس
2
#
نام
نام خانوادگی
عنوان
1
امید
مریدی
سازنده ویجت نس
2
رضا
رحمانی
برنامه نویس
3
محمد کشاورز
بازاریابی
3
محمد کشاورز
بازاریابی
فوتر و عنوان در جدول
در برخی مواقع نیاز است یک جدول در جدولی دیگر نمایش داده شود. خصوصیات جدول والد به جدول زیر مجموعه ارث داده نمیشود.
LTR
List of users caption top
#
First Name
Last Name
Position
1
Omid
Moridi
WidgetNas Creator
2
Reza
Rahmani
Developer
3
Mohammad Keshavarz
Marketing
Foot
Foot
Foot
List of users caption auto
#
First Name
Last Name
Position
1
Omid
Moridi
WidgetNas Creator
2
Reza
Rahmani
Developer
3
Mohammad Keshavarz
Marketing
Foot
Foot
Foot
RTL
لیست کاربرها، عنوان بالا
#
نام
نام خانوادگی
عنوان
1
امید
مریدی
سازنده ویجت نس
2
رضا
رحمانی
برنامه نویس
3
محمد کشاورز
بازاریابی
فوتر
فوتر
فوتر
لیست کاربرها، عنوان خودکار
#
نام
نام خانوادگی
عنوان
1
امید
مریدی
سازنده ویجت نس
2
رضا
رحمانی
برنامه نویس
3
محمد کشاورز
بازاریابی
فوتر
فوتر
فوتر
جداول واکنش گرا یا ریسپانسیو
برای آنکه جدول در محیطهای مختلف به درستی قابل نمایش باشند، میتواند از خاصیت div با کلاس responsive استفاده نمایید. هر چند که این تکنیک برای هر موضوع دیگری قابل استفاده است.