ساخت جدول responsive در بوت استرپ

جلسه هفتم - ساخت جدول ریسپانسیو

در این ویدئوی آموزشی به طور کامل با استایل دادن به به جدول های html توسط کلاس های بوت استرپ آشنا می شویم و در انتها یک جدول ریسپانسیو را طراحی میکنیم

ویدئو آموزش ساخت جدول ریسپانسیو در بوت استرپ

در جلسه قبلی آموزش بوت استرپ با نحوه ریسپانسیو کردن تصاویر آشنا شدیم و در این جلسه نحوه ایجاد کردن جدول های ریسپانسیو در بوت استرپ را آموزش می دهیم.

ساخت جدول ریسپانسیو در بوت استرپ

در بوت استرپ ورژن 3 برای استایل دادن به جداول کلاس های مختلفی در اختیار طراحان قرار گرفته است. مهمترین این کلاس ها، کلاس table است. کافی است که ساختار جدول خود را در html کد نویسی کنید و به تگ table کلاس table را اختصاص دهید. فیلم آموزشی کلاس های بیشتری را معرفی میکنیم. در قطعه کد زیر یک جدول ریسپانسیو را مشاهده می کنید.

<div class="table-responsive">          
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>City</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
      </tr>
    </tbody>
  </table>
  </div>

 


ارسال نظر درباره این موضوع


  • علیرضا (دو شنبه, 26 اسفند 1398 ساعت 20:07:46)
    بسیار عالی

  • mahdi (پنج شنبه, 30 مرداد 1399 ساعت 02:57:00)
    من میخوام اطلاعات جدولم وسطش درج بشه چی کار کنم؟

    • (شنبه, 01 شهریور 1399 ساعت 09:13:40)

      شما باید خودتون یه فایل css جدا داشته باشید و یه کلاس تعریف کنید  و بهش مقدار  text-align: center; بدید و اون کلاس رو به جدولتون اضافه کنید