جدولهای پایه
نمونه پایه
برای جدول های پایه دارای فقط خطوط افقی، کلاس .table
را به هر <table>
اضافه کنید.
# | نام | نام خانوادگی | نام کاربری |
---|---|---|---|
1 | مارک | زاکربرگ | @mdo |
2 | بیل | گیتس | @fat |
3 | پاول | دوروف |
جدول تیره
همچنین میتوانید با استفاده از کلاس .table-dark
رنگ جدول را معکوس به رنگ تیره با متن روشن کنید.
# | نام | نام خانوادگی | نام کاربری |
---|---|---|---|
1 | مارک | زاکربرگ | @mdo |
2 | بیل | گیتس | @fat |
3 | پاول | دوروف |
سرتیتر جدول
از یکی از دو کلاس کاربردی .thead-light
یا .thead-dark
بر روی <thead>
جهت نمایش آن به صورت روشن یا تیره استفاده کنید.
# | نام | نام خانوادگی | نام کاربری |
---|---|---|---|
1 | مارک | زاکربرگ | @mdo |
2 | بیل | گیتس | @fat |
3 | پاول | دوروف |
سطر های راه راه
از کلاس .table-striped
برای افزودن طرح راه راه به سطر های داخل <tbody>
استفاده کنید.
# | نام | نام خانوادگی | نام کاربری |
---|---|---|---|
1 | مارک | زاکربرگ | @mdo |
2 | بیل | گیتس | @fat |
3 | پاول | دوروف |
جدول دور خط دار
از کلاس .table-bordered
برای نمایش دور خط در همه جهت های جدول و خانه های جدول استفاده کنید.
# | نام | نام خانوادگی | نام کاربری |
---|---|---|---|
1 | مارک | زاکربرگ | @mdo |
2 | بیل | گیتس | @fat |
3 | پاول | دوروف |
جدول بدون دور خط
از کلاس .table-borderless
برای داشتن یک جدول بدون خط استفاده کنید.
# | نام | نام خانوادگی | نام کاربری |
---|---|---|---|
1 | مارک | زاکربرگ | @mdo |
2 | بیل | گیتس | @fat |
3 | پاول | دوروف |
سطر های قابل Hover
ااز کلاس .table-hover
برای فعال کردن وضعیت هاور بر روی سطر های داخل <tbody>
استفاده کنید.
# | نام | نام خانوادگی | نام کاربری |
---|---|---|---|
1 | مارک | زاکربرگ | @mdo |
2 | بیل | گیتس | @fat |
3 | پاول | دوروف |
جدول کوچک
از کلاس .table-sm
برای داشتن جدول های فشرده تر استفاده کنید.
# | نام | نام خانوادگی | نام کاربری |
---|---|---|---|
1 | مارک | زاکربرگ | @mdo |
2 | بیل | گیتس | @fat |
3 | پاول | دوروف | |
4 | مارک | زاکربرگ | @mdo |
5 | بیل | گیتس | @fat |
کلاس های کاربردی
از کلاس های کمکی برای مشخص کردن رنگ سطر ها و یا خانه های جدول استفاده کنید.
# | عنوان ستون | عنوان ستون | عنوان ستون |
---|---|---|---|
1 | محتویات ستون | محتویات ستون | محتویات ستون |
2 | محتویات ستون | محتویات ستون | محتویات ستون |
3 | محتویات ستون | محتویات ستون | محتویات ستون |
4 | محتویات ستون | محتویات ستون | محتویات ستون |
5 | محتویات ستون | محتویات ستون | محتویات ستون |
عناوین
یک <caption>
مانند یک تیتر برای جدول عمل می کند. این المان به کاربران دارای screen reader کمک میکند تا یک جدول را یافته و موضوع آن را درک کنند و در مورد خواندن جدول تصمیم گیری کنند.
# | نام | نام خانوادگی | نام کاربری |
---|---|---|---|
1 | مارک | زاکربرگ | @mdo |
2 | بیل | گیتس | @fat |
3 | پاول | دوروف |
جدولهای واکنشگرا
جدول های واکنش گرا را با قرار دادن هر .table
داخل .table-responsive
میتوانید ایجاد کنید تا در دستگاه های کوچک (زیر 768px) به صورت افقی اسکرول شوند.
# | لورم ایپسوم متن | لورم ایپسوم متن | لورم ایپسوم متن | لورم ایپسوم متن | لورم ایپسوم متن | لورم ایپسوم متن |
---|---|---|---|---|---|---|
1 | لورم ایپسوم | لورم ایپسوم | لورم ایپسوم | لورم ایپسوم | لورم ایپسوم | لورم ایپسوم |
2 | لورم ایپسوم | لورم ایپسوم | لورم ایپسوم | لورم ایپسوم | لورم ایپسوم | لورم ایپسوم |
3 | لورم ایپسوم | لورم ایپسوم | لورم ایپسوم | لورم ایپسوم | لورم ایپسوم | لورم ایپسوم |