جدول‌های پایه

  1. جداول
  2. جدول‌های پایه

مثال پایه

برای یک ظاهر طراحی شده پایه ، لایه باز سبک و فقط تقسیم کننده های افقی ، کلاس پایه را اضافه کنید .table به هر جدولی <table>.

#نامنام خانوادگینام کاربری
1ملیکااوتوا@mdo
2جمیلهتورتن@fat
3لعیاپرنده@twitter

جدول تیره

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

#نامنام خانوادگینام کاربری
1ملیکااوتوا@mdo
2جمیلهتورتن@fat
3لعیاپرنده@twitter

هد جدول

از دو کلاس برای تعیین رنگ هد جدول مانند زیر میتوانید استفاده کنید<thead>تیره و روشن

#نامنام خانوادگینام کاربری
1ملیکااوتوا@mdo
2جمیلهتورتن@fat
3لعیاپرنده@twitter

ردیف راه راه

از کلاس رو به رو .table-striped برای اعمال این حالت به جدول استفاده کنید در کد <tbody>.

#نامنام خانوادگینام کاربری
1ملیکااوتوا@mdo
2جمیلهتورتن@fat
3لعیاپرنده@twitter

جدول خط دار

کلاس رو به رو را اضافه کنید .table-bordered برای خط دار شدن همه جدول

#نامنام خانوادگینام کاربری
1ملیکااوتوا@mdo
2جمیلهتورتن@fat
3لعیاپرنده@twitter

جدول بدون خط

کد رو به رو را برای جدول بدون خط .table-borderless اضافه کنید

#نامنام خانوادگینام کاربری
1ملیکااوتوا@mdo
2جمیلهتورتن@fat
3لعیاپرنده@twitter

ردیف قابل هاور شدن

کد های روبه رو را مانند نمونه زیر به جدول خود اضافه کنید .table-hover to تا قابلیت هاور شدن فعال شود <tbody>.

#نامنام خانوادگینام کاربری
1ملیکااوتوا@mdo
2جمیلهتورتن@fat
3لعیاپرنده@twitter

جدول کوچک

با افزودن کلاس رو به رو .table-sm اندازه جدول شما به نصف کاهش پیدا میکند

#نامنام خانوادگینام کاربری
1ملیکااوتوا@mdo
2جمیلهتورتن@fat
3لعیاپرنده@twitter
4ملیکااوتوا@mdo
5جمیلهتورتن@fat

کلاس های متنی

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

#عنوان ستونعنوان ستونعنوان ستون
1محتوای ستونمحتوای ستونمحتوای ستون
2محتوای ستونمحتوای ستونمحتوای ستون
3محتوای ستونمحتوای ستونمحتوای ستون
4محتوای ستونمحتوای ستونمحتوای ستون
5محتوای ستونمحتوای ستونمحتوای ستون

کپشن

با استفاده از کپشن <caption>می توانید به کاربرانی که جدول را میبینند به طور خلاصه توضیح دهید که جدول در چه موردی است

لیست کاربران
#نامنام خانوادگینام کاربری
1ملیکااوتوا@mdo
2جمیلهتورتن@fat
3لعیاپرنده@twitter

جدول رسپانسیو

با استفاده از کد رو به رو .table در .table-responsiveمی توانید جدول را رسپانسیو کنید در در تمامی دستگاه ها خوب به نظر برسد

#عنوان جدولعنوان جدولعنوان جدولعنوان جدولعنوان جدولعنوان جدول
1سلول جدولسلول جدولسلول جدولسلول جدولسلول جدولسلول جدول
2سلول جدولسلول جدولسلول جدولسلول جدولسلول جدولسلول جدول
3سلول جدولسلول جدولسلول جدولسلول جدولسلول جدولسلول جدول