وباکا

آموزش تخصصی برنامه نویسی وب

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

با استفاده از 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>

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

فهرست مطالب