آموزش برنامه نویسی ، پایگاه داده sql server
آموزشگاه برنامه نویسی تحلیل داده : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server


آموزشگاه برنامه نویسی مجتمع فنی تهران میرداماد : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server

آموزش Bootstrap > کار با CSS و Bootstrap
کار با جدول ها ( Tables ) در Bootstrap

کار با جدول ها ( Tables ) در Bootstrap :

به وسیله کلاس های آماده و تعریف شده برای جدول های HTML در bootstrap ، می توانید به سادگی و فقط با دادن نام کلاس به جدول مورد نظر خود ، قالب و استایل متفاوتی را به جدول خود بدهید .
در این درس به بررسی کلاس های bootstrap برای جدول ها خواهیم پرداخت . bootstrap دارای یک سری کلاس آماده جهت استایل دهی و افکت گذاری روی جدول های HTML است که کار شما را برای ساختن جدول های زیبا و واکنش گرا ، آسان می کند .
راهنمایی مهم : برای استفاده از خواص و افکت های هر کلاس ، کافی است نام آن کلاس را به خاصیت class تگ <table> موزد نظر خود اضافه کنید . برای هر جدول می توانید از یک یا چندین کلاس به صورت هم زمان ، بهره بگیرید .
در ادامه به بررسی هر یک از این کلاس ها خواهیم پرداخت .

کلاس table. - ایجاد یک جدول ساده :

کلاس table. ، یک فرم ساده ( با حاشیه درونی ( margin ) کم ) و خطوط جدا کننده افقی را به جدول می دهد . در این حالت جدول دارای حاشیه دور ( border ) و خطوط عمودی نمی باشد .
مثال زیر ، نحوه استفاده و خروجی این کلاس را نشان می دهد :

Example
<div class="container">
     <h2   style="text-align : center" >جدول ساده در بوت استرپ</h2>
     <table class="table">
      
 <thead>
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
          </tr>
       </thead>

    
  <tbody>
         <tr>
           <td>Ali</td>
           <td>Rezaee</td>
           <td>Ali@example.com</td>
         </tr>
         <tr>
           <td>Zahra</td>
           <td>Kiani</td>
           <td>Zahra@example.com</td>
        </tr>
        <tr>
           <td>Amir</td>
           <td>Sedighi</td>
           <td>Amir@example.com</td>
        </tr>
      </tbody>

     </table>

</div>
کد
خروجی


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نطر خودتان درباره این صفحه را با ما در میان گذاشته و در صورت تمایل از Developer1 حمایت نمایید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟      
حمایت از سایت Developer1