مقدمه
با سلام خدمت کاربران گرامی سایت پی وی لرن و آن دسته از کاربرانی که علاقمند به دوره آموزش Pure CSS هستند. در جلسه گذشته در کنار هم طراحی دکمه ها در Pure CSS را آموختیم و یاد گرفتیم که برای طراحی دکمه ها سه کلاس اختصاصی در Pure CSS وجود دارد. این سه کلاس عبارت بودند از : pure-button : این کلاس استانداردهایی را برای ایجاد دکمه ها در نظر می گیرد که می تواند برای استایل یک لینک و دکمه به کار برده شود. pure-button-disabled : از این کلاس برای نمایش یک دکمه به صورت غیر فعال استفاده می شود تا به بتوان آن را در کنار pure-button به کار برد. و کلاس pure-button-active که از آن برای نشان دادن یک دکمه در حال فشردن استفاده می شود تا به بتوان آن را در کنار pure-button به کار رود. در ادامه این دوره آموزش طراحی جداول در Pure CSS را به علاقمندان این دوره ارائه می کنیم.
آموزش طراحی جداول در Pure CSS
در Pure CSS استایل های زیادی برای نمایش جدول ها pure-table وجود دارد. در ادامه تعدادی از این استایل ها را به شما معرفی می نماییم.
| شماره کلاس | توضیحات |
| ۱ | pure-table
این کلاس جدول پایه را نمایش می دهد که در آن padding ها، border ها و header ها به صورت پیش فرض مشخص اند. |
| ۲ | pure-table-bordered
این کلاس مرز border جدول ها و سطرهای آن را مشخص می نماید. |
| ۳ | pure-table-horizontal
این کلاس به تعیین خط های افقی می پردازد. |
| ۴ | pure-table-striped
این کلاس خطوط جدول را مشخص می نماید. |
| ۵ | pure-table-odd
اگر این کلاس بر روی هر tr دیگر اعمال شود، پس زمینه سطر را تغییر می دهد و اثر zebra-styled را ایجاد می کند. |
مثال
purecss_tables.htm
مثال :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | <html> <head> <title>The PURE.CSS Tables</title> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css"> </head> <body> <h2>Tables Demo</h2> <hr/> <h3>Simple Table</h3> <table class = "pure-table"> <thead> <tr> <th>Student</th> <th>Class</th> <th>Grade</th> </tr> </thead> <tbody> <tr> <td>Mahesh Parashar</td> <td>VI</td> <td>A</td> </tr> <tr> <td>Rahul Sharma</td> <td>VI</td> <td>B</td> </tr> <tr> <td>Mohan Sood</td> <td>VI</td> <td>A</td> </tr> </tbody> </table> <h3>Bordered Table</h3> <table class="pure-table pure-table-bordered"> <thead> <tr>< th>Student</th> <th>Class</th> <th>Grade</th> </tr> </thead> <tbody> <tr> <td>Mahesh Parashar</td> <td>VI</td> <td>A</td> </tr> <tr> <td>Rahul Sharma</td> <td>VI</td> <td>B</td> </tr> <tr> <td>Mohan Sood</td> <td>VI</td> <td>A</td> </tr> </tbody> </table> <h3>Table with Horizontal Borders</h3> <table class="pure-table pure-table-horizontal"> <thead> <tr> <th>Student</th> <th>Class</th> <th>Grade</th> </tr> </thead> <tbody> <tr> <td>Mahesh Parashar</td> <td>VI</td> <td>A</td> </tr> <tr> <td>Rahul Sharma</td> <td>VI</td> <td>B</td> </tr> <tr> <td>Mohan Sood</td> <td>VI</td> <td>A</td> </tr> </tbody> </table> <h3>Stripped Table</h3> <table class = "pure-table pure-table-striped"> <thead> <tr> <th>Student</th> <th>Class</th> <th>Grade</th> </tr> </thead> <tbody> <tr> <td>Mahesh Parashar</td> <td>VI</td> <td>A</td> </tr> <tr> <td>Rahul Sharma</td> <td>VI</td> <td>B</td> </tr> <tr> <td>Mohan Sood</td> <td>VI</td> <td>A</td> </tr> </tbody> </table> </body> </html> |
نتیجه
نتیجه را تأیید کنید.
نتیجه به صورت تصویر زیر آشکار خواهد شد.
آموزش طراحی جداول در Pure CSS
کلام آخر
در این جلسه با آموزش طراحی جداول در Pure CSS همراه شما بودیم.
جلسه بعدی به آموزش کار با تصاویر در Pure CSS خواهیم پرداخت.
با پی وی لرن همراه باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
