با استفاده از materialize می توانید جدول ها با مدل های مختلف ایجاد نمایید.
نام کلاس | توضیحات |
---|---|
None | یک جدول معمولی بدون هیچ حاشیه ای (border) را نمایش می دهد. |
stripped | یک جدول ساده ایجاد می کند. |
bordered | در تمامی سطرها برای جدول حاشیه ایجاد می کند. |
highlight | یک جدول را برجسه می کند. |
centered | تمامی محتوای متنی داخل جدول ار وسط چین می کند. |
responsive-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 برای نمایش کادرهای جدول
<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 برای وسط چین کردن محتوای جدول
<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>