جلسه هفتم – کلاس های جدول بندی در متریالایز

طراحی واکنش گرا با متریالایز
 با استفاده از کلاس های متریالایز می توان جداول با ویژگی های مختلف نمایش داد در ادامه به بررسی کلاس های جدول در متریالایز می پردازیم.

با استفاده از materialize می توانید جدول ها با مدل های مختلف ایجاد نمایید.

نام کلاس توضیحات
None یک جدول معمولی بدون هیچ حاشیه ای (border)  را نمایش می دهد.
stripped یک جدول ساده ایجاد می کند.
bordered در تمامی سطرها برای جدول حاشیه ایجاد می کند.
highlight یک جدول را برجسه می کند.
centered تمامی محتوای متنی داخل جدول ار وسط چین می کند.
responsive-table یک جدول واکنشگرا ایجاد می کند، و باعث می شود که اگر صفه نمایش کوچک بود باز هم محتوای جدول بخوبی دیده شود.

 

مثال های زیر کاربرد کلاس های مختلف جدول در متریالایز را نشان می دهد:

نمایش جدول ساده

<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>

کلاس striped برای نواربندی و کلاس bordered برای نمایش کادرهای جدول

<table class=”striped 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>

کلاس centered برای وسط چین کردن محتوای جدول

<table class=”centered”>
<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>

کلاس responsive-table – برای ساخت جدول واکنش پذیر

<table class=”responsive-table”>
<thead>
<tr>
<th>Student</th><th>Class</th><th>Data #1</th>
<th>Data #2</th><th>Data #3</th><th>Data #4</th>
<th>Data #5</th><th>Data #6</th><th>Data #7</th>
<th>Data #8</th><th>Data #9</th><th>Data #10</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td><td>VI</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>
<td>16</td><td>17</td><td>19</td><td>20</td>
</tr>
<tr>
<td>Rahul Sharma</td><td>VI</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>
<td>16</td><td>17</td><td>19</td><td>20</td>
</tr>
<tr><td>Mohan Sood</td><td>VI</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>
<td>16</td><td>17</td><td>19</td><td>20</td>
</tr>
</tbody>
</table>

برچسب ها

محصولات پیشنهادی


نظرات کاربران


نظرات برای آموزش چارچوب متریالایز, مقالات فناوری و آموزشی | بدون نظر »

کاربر عزیز، لطفاً دیدگاه ارزشمند خود را از طریق فرم زیر برای ما ارسال کنید:

درباره کدنویسان
آکادمی کدنویسان جهت کمک به دانشجویان رشته های کامپیوتر و فناوری اطلاعات و همه علاقمندان به طراحی و برنامه نویسی برای ویندوز، وب و موبایل ایجاد شده است.
بیشتر آموزش های سایت کدنویسان، بصورت رایگان ارائه شده است و بعضی بسته های آموزشی تصویری و نیز نرم افزارهای پیاده سازی شده در ازای پرداخت، قابل دانلود هستند.
هر گونه نظر، انتقاد یا پیشنهادی در مورد مطالب یا عملکرد کدنویسان دارید، حتما با ما در میان بگذارید.
نمادهای اعتماد ما


تماس با ما
  • شماره همراه : ۰۹۱۵۱۶۰۴۰۶۸
  • آی دی تلگرام : @mmoha94
  • پست الکترونیکی : mohammadi.sm@gmail.com
  • آدرس پستی : بیرجند، خیابان پیروزی، پیروزی ۹، پلاک ۲۸
کلیه حقوق متعلق به سایت کدنویسان است، انتشار و کپی برداری از مطالب این سایت غیرمجاز بوده و پیگرد قانونی دارد.