استایل دهی به جداول در Bootstrap

همانطور که در آموزش HTML توضیح داده شد، جدول مجموعه ای از سطرها و ستون ها می باشد. در بخش مربوط به آموزش CSS نحوه استایل دهی به عناصر مختلف را آموزش دیدید. در این بخش قصد داریم داریم نحوه استفاده از کلاس های موجود جهت استفاده از جداول در Bootstrap را توضیح دهیم.

نحوه استفاده

هرچند تگ table یک تگ قدیمی HTML می باشد اما در مواردی مانند نمایش لیست محصولات، لیست کاربران و ... بهترین انتخاب می باشد. از این رو یادگیری نحوه استفاده از آن و همچنین استایل دهی طبق نیاز، اهمیت بسزایی در جلب نظر کاربران دارد.

برای استایل دهی به جداول توسط Bootstrap ابتدا باید توسط دستورات HTML یک جدول به شکل زیر تعریف نمایید.

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>نام</th>
      <th>نام خانوادگی</th>
      <th>مهارت</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2</td>
      <td>نازنین</td>
      <td>محمدزاده</td>
      <td>طراح سایت</td>
    </tr>
    <tr>
      <td>3</td>
      <td>محمد</td>
      <td>جهان زاده</td>
      <td>برنامه نویس موبایل</td>
    </tr>
    <tr>
      <td>4</td>
      <td>امین</td>
      <td>ناصری</td>
      <td>برنامه نویس</td>
    </tr>
  </tbody>
</table>

در صورتیکه قصد داشته باشید استایلی اولیه به جداول اعمال نمایید می توانید به آن کلاس table را اختصاص دهید.

<table class="table">

استایل اولیه به جدول

برای استایل دهی متفاوت به ردیف های زوج و فرد می توان کلاس table-striped را به جدول اضافه نمود.

<table class="table table-striped">

استایل دهی به ردیف های زوج و فرد

جهت اعمال تم رنگی تیره به جدول می توانید کلاس table-dark را به تنظیمات آن اضافه نمایید.

<table class="table table-dark table-striped">

تم تیره برای جداول

یکی دیگر از افکت هایی که باعث زیباتر شدن جداول موجود در صفحات وب می شود، تغییر رنگ ردیف ها هنگام انتقال اشاره ماوس است. بدین منظور می توانید کلاس table-hover را به جدول اضافه کنید.

<table class="table table-dark table-striped table-hover">

تغییر رنگ ردیف های جدول

بدین ترتیب با انتقال ماوس بر روی ردیف مورد نظر، بک گراند آن تغییری جزئی می کند که همین امر باعث تمایز آن نسب به سایر ردیف ها می گردد.

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

<table class="table table-striped table-hover table-bordered">

طبیعتا حاشیه جدول در حالتی که کلاس table-dark به آن اختصاص نداده اید قابل رویت خواهد بود.

شما می توانید تکنیک های فوق را با هم ترکیب کرده و با استفاده از مطالب آموزش داده شده در بخش رنگ ها، جداولی با تم رنگی دلخواه (تم آبی، سبز، قرمز و ...) بسازید.

همچنین اگر قصد داشته باشید جدولی را رنگ روشن اما تیترهای تیره داشته باشید، می توانید برای تگ thead آن از یک استایل رنگی استفاده نمایید.

<table class="table table-bordered">
  <thead class="thead-dark">
    <tr>
      <th>#</th>
      <th>نام</th>
      <th>نام خانوادگی</th>
      <th>مهارت</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2</td>
      <td>نازنین</td>
      <td>محمدزاده</td>
      <td>طراح سایت</td>
    </tr>
    <tr>
      <td>3</td>
      <td>محمد</td>
      <td>جهان زاده</td>
      <td>برنامه نویس موبایل</td>
    </tr>
    <tr>
      <td>4</td>
      <td>امین</td>
      <td>ناصری</td>
      <td>برنامه نویس</td>
    </tr>
  </tbody>
</table>

جدول با هدر مشکی