مثال اساسی
برای یک ظاهر طراحی اولیه - بالشتک های سبک و .table to any
<table>.
| # | نام کوچک | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | علامت | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری | پرنده | @توییتر |
میز تاریک
همچنین می‌توانید رنگ‌ها را با متن روشن روی پس‌زمینه‌های تیره معکوس کنید.table-dark.
| # | نام کوچک | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | علامت | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری | پرنده | @توییتر |
سر میز
از یکی از دو کلاس اصلاح کننده برای ساخت استفاده کنید<thead>s appear light or dark gray.
| # | نام کوچک | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | علامت | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری | پرنده | @توییتر |
ردیف های راه راه
استفاده کنید.table-striped to add zebra-striping to any table row within the <tbody>.
| # | نام کوچک | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | علامت | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری | پرنده | @توییتر |
میز حاشیه دار
اضافه کردن.table-bordered for borders on all sides of the table and cells.
| # | نام کوچک | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | علامت | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری | پرنده | @توییتر |
میز بدون حاشیه
اضافه کردن.table-borderless for a table without borders.
| # | نام کوچک | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | علامت | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری | پرنده | @توییتر |
رنگ حاشیه جدول
اضافه کردن.table-bordered & .border-* for colored borders on all sides of the table and cells.
| # | نام کوچک | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | علامت | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری | پرنده | @توییتر |
رنگ حاشیه جدول
اضافه کردن.table-bordered & .border-* for colored borders on all sides of the table and cells.
| # | نام کوچک | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | علامت | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری | پرنده | @توییتر |
چیدمان عمودی
سلول های جدول در<tbody> inherit their alignment from <table> and are aligned to the the top by default. Use the vertical align classes to re-align where needed.
| # | نام کوچک | نام خانوادگی | عمل |
|---|---|---|---|
| 1 | علامت | اتو | |
| 2 | یعقوب | تورنتون | |
| 3 | لری | پرنده | |
| 4 | یعقوب | تورنتون |
لانه سازی
سبک‌های حاشیه، سبک‌های فعال و انواع جدول توسط جداول تودرتو به ارث نمی‌رسند.
| # | اولین | آخر | رسیدگی | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | علامت | اتو | @mdo | |||||||||
|
||||||||||||
| 3 | یعقوب | تورنتون | @چربی | |||||||||
ردیف های قابل شناور
اضافه کردن.table-hover to enable a hover state on table rows within a <tbody>.
| # | نام کوچک | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | علامت | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری | پرنده | @توییتر |
میز کوچک
اضافه کردن.table-sm to make tables more compact by cutting cell padding in half.
| # | نام کوچک | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | علامت | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری | پرنده | @توییتر |
| 4 | علامت | اتو | @mdo |
| 5 | یعقوب | تورنتون | @چربی |
کلاس های متنی
از کلاس های متنی برای رنگ آمیزی ردیف های جدول یا سلول های فردی استفاده کنید.
| # | عنوان ستون | عنوان ستون | عنوان ستون |
|---|---|---|---|
| 1 | محتوای ستون | محتوای ستون | محتوای ستون |
| 2 | محتوای ستون | محتوای ستون | محتوای ستون |
| 3 | محتوای ستون | محتوای ستون | محتوای ستون |
| 4 | محتوای ستون | محتوای ستون | محتوای ستون |
| 5 | محتوای ستون | محتوای ستون | محتوای ستون |
زیرنویس ها
آ<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.
| # | نام کوچک | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | علامت | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری | پرنده | @توییتر |
جدول پاسخگو
جداول ریسپانسیو را با قرار دادن هر کدام ایجاد کنید.table in .table-responsive
to make them scroll horizontally on small devices (under 768px).
| # | عنوان جدول | عنوان جدول | عنوان جدول | عنوان جدول | عنوان جدول | عنوان جدول |
|---|---|---|---|---|---|---|
| 1 | سلول جدول | سلول جدول | سلول جدول | سلول جدول | سلول جدول | سلول جدول |
| 2 | سلول جدول | سلول جدول | سلول جدول | سلول جدول | سلول جدول | سلول جدول |
| 3 | سلول جدول | سلول جدول | سلول جدول | سلول جدول | سلول جدول | سلول جدول |