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