آموزش طراحی متریال با Materialize (جلسه 8) - کار با جدول

دسته بندی: آموزش
زمان مطالعه: 8 دقیقه
۳۱ فروردین ۱۳۹۵

در این جلسه با ادامه موضوع مربوط به طراحی متریال با Materialize در خدمتتون هستم.getting-started-materialize-css-framework

Materialize کلاسهای مختلفی در مورد Table داره که میتونین با اعمال کردن اونا به Table مورد نظر، استایل زیبایی رو به اون بدید.

  • None : اگه هیچ کلاسی به Table مورد نظرتون ندید، جدول مورد نظر بدون border خواهد بود و استایلهای پیش فرض به اون اعمال میشه.
  • Stripped : با استفاده از این کلاس جدولتون یک سطر در میون رنگهای مختلف میگیره
  • highlight : با استفاده از این کلاس، ردیفهاتون زمانی که بر روی اون‌ها هاور میشه، رنگ پس زمینشون تغییر میکنه
  • bordered : با استفاده از این کلاس ردیفهای جدول یک border-bottom میگیرن
  • 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>

میبینید که هیچ کلاسی برای جدول قرار داده نشده. خروجی بصورت زیر هست:table1

جدول stripped و 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>

خروجی:Table2

جدول با سلولهای وسط چین

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

خروجی:table3

جدول واکنشگرا

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

خروجی:table4

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

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

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.