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