با استفاده از ابتدایی‌ترین نشانه‌گذاری جدول، در اینجا نحوه استفاده از جدول آمده است.table-based tables look in Bootstrap. You can use any example of below table for your table and it can be use with any type of bootstrap tables.

مثال 1: Table with outer spacing

استفاده کنید.table-striped to add zebra-striping to any table row within the <tbody>. This styling doesn't work in IE8 and below as :nth-child CSS selector isn't supported.

همچنین می‌توانید رنگ‌ها را با متن روشن روی پس‌زمینه‌های تیره معکوس کنید.table-inverse.

استفاده کنید.table-inverse with .table-striped to add zebra-striping to any inverse table row within the <tbody>. This styling doesn't work in IE8 and below as :nth-child CSS selector isn't supported.

همچنین می‌توانید رنگ‌ها را با متن روشن روی پس‌زمینه‌های تیره معکوس کنید.bg-info, .bg-success, .bg-warning and .bg-danger classes.

برای تنظیم رنگ پس زمینه روشن استفاده کنید.bg-[color] class where [color] is the value of your selected color from chameleon color palette. So for teal color background class will be .bg-teal. Refer HTML markup line no 1. Background color class is a optional if you don't it will take white background default.

برای تنظیم رنگ پس‌زمینه انتخابی، از روشن کردن استفاده کنید.bg-lighten-[*] class where [*] is the value between '1-5' of your selected lighten color from chameleon color palette. So for color lighten 4 background class will be .bg-lighten-4. Refer HTML markup line no 1. Background lighten color class is a optional if you don't it will take white background default.

مشابه جداول پیش فرض و معکوس، از یکی از دو کلاس اصلاح کننده استفاده کنید.thead-default or .thead-inverse to make <thead>s appear light or dark gray.

از کلاس های پس زمینه استفاده کنیدbg-* to make custom thead background. You can also use Chameleon Admin color palette classes for background.

اضافه کردن.table-bordered for borders on all sides of the table and cells.

استفاده کنید.table-striped with .table-bordered to add zebra-striping to any table row within the <tbody>.

استفاده کنید.table-inverse with .table-bordered to add zebra-striping to any table row within the <tbody>.

اضافه کردن.table-hover to enable a hover state on table rows within a <tbody>.

از کلاس های متنی برای رنگ آمیزی ردیف های جدول یا سلول های فردی استفاده کنید.

انواع پس‌زمینه جدول معمولی با جدول معکوس در دسترس نیستند، با این حال، می‌توانید از ابزارهای متن یا پس‌زمینه برای دستیابی به سبک‌های مشابه استفاده کنید.

آ<caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

جداول ریسپانسیو اجازه می دهد تا جداول به راحتی به صورت افقی پیمایش شوند. .table-responsive class on .table. Or, pick a maximum breakpoint with which to have a responsive table up to by adding .table-responsive{-sm|-md|-lg|-xl}.

همیشه پاسخگو

نقطه انفصال خاص

استفاده کنید.table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.