ساخت جدول 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>

 


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

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

  • علیرضا
    بسیار عالی

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