تخفیف ویژه

آموزش استفاده از mjml برای ساخت ایمیلهای واکنشگرا (جلسه 16) - آموزش قرار دادن جدول و موقعیت

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

mjml

در این جلسه با ادامه آموزش mjml در خدمت شما هستیم.

در جلسه قبل در مورد قرار دادن متن و divider توضیحاتی رو خدمتتون گفتیم. در این جلسه قصد داریم در مورد قرار دادن جدول با استفاده از تگ mj-table و قرار دادن موقعیت مکانی با استفاده از mj-location توضیح بدیم.

قرار دادن جدول با استفاده از تگ mj-table

با استفاده از این تگ میتونین درون ایمیل‌های خودتون جدول قرار بدین و اون رو بصورتی که مدنظرتون هست، پر کنید. کد زیر رو در نظر بگیرید:

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-table>
            <tr style="border-bottom:1px solid #ecedee;text-align:left;padding:15px 0;">
              <th style="padding: 0 15px 0 0;">Year</th>
              <th style="padding: 0 15px;">Language</th>
              <th style="padding: 0 0 0 15px;">Inspired from</th>
            </tr>
            <tr>
              <td style="padding: 0 15px 0 0;">1995</td>
              <td style="padding: 0 15px;">PHP</td>
              <td style="padding: 0 0 0 15px;">C, Shell Unix</td>
            </tr>
            <tr>
              <td style="padding: 0 15px 0 0;">1995</td>
              <td style="padding: 0 15px;">JavaScript</td>
              <td style="padding: 0 0 0 15px;">Scheme, Self</td>
            </tr>
          </mj-table>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

همونطور که دیدید کدنویسی اون شبیه به HTML هست. در ابتدا تگ mj-table رو قرار میدیم و برای ساخت هر ردیف از tr و برای ساخت هر سلول یا ستون از td استفاده میکنیم. همونطور که در بالا میبینید، سلولهایی که در ردیف اول قرار داده شدن، th هستن و مخفف table heading هستن. با اینکار متنهایی که در ردیف اول قرار دارن، ضخیم‌تر نمایش داده میشن. برای هر tr یا td یک ویژگی style قرار دادیم و ویژگی هایی رو برای اونا مشخص کردیم. بیشتر در بالا با استفاده از padding، فاصله متن از چارچوب سلول رو مشخص کردیم. خروجی بصورت زیر خواهد بود:mjml table

ویژگی‌های قابل استفاده برای این تگ:

  • color : مشخص کردن رنگ متن
  • cellpadding : فاصیه بین سلولها رو مشخص میکنه و بر حسب پیکسل هست
  • cellspacing : فاصله بین سلول و border رو مشخص میکنه
  • font-family : نام فونت جدول رو مشخص میکنه
  • font-size : سایز فونت رو مشخص میکنه و مقدار پیش فرض اون 13 پیکسل هست
  • line-height : فاصله بین خطوط رو مشخص میکنه
  • padding : فاصله از اطراف رو مشخص میکنه
  • width : عرض جدول رو مشخص میکنه و مقدار پیش فرض اون 100% هست
  • table-layout : قالب جدول رو مشخص میکنه

قرار دادن موقعیت مکانی با استفاده از تگ mj-location

با استفاده از این تگ میتونین یک لینک از موقعیت مکانی با استفاده از Google maps قرار بدین. برای مثال کد زیر رو در نظر بگیرید:

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-location address="خیابان ولیعصر, تهران, استان تهران" />
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

همونطور که دیدید تگ mj-location قرار داده شده و درون ویژگی address اون، آدرس موقعیت مکانی مورد نظر قرار داده شده. خروجی اون در مرورگر بصورت زیر خواهد بود:mjml location

اگر شما فیلترشکن نداشته باشید، آیکون قرمز براتون نمایش داده نمیشه. اگر بر روی آیکون یا لینک موجود در عکس بالا کلیک کنید، یک تب جدید باز میشه و این آدرس درون Google Maps به شما نمایش داده میشه. با اینکار میتونین موقعیت مکانی مورد نظرتون رو برای کسانی که براشون ایمیل میفرستید نمایش بدین. این تگ ویژگی‌های زیر رو قبول میکنه:

  • color : رنگ لینک رو مشخص میکنه و مقدار پیش فرض اون #3aa7ed هست
  • font-family : فونت متن رو مشخص میکنه
  • font-size : سایز فونت رو مشخص میکنه و مقدار پیش فرض اون 18 پیکسل هست
  • font-weight : ضخامت فونت رو مشخص میکنه و پیش فرض اون 500 هست
  • padding : فاصله اون از اطراف رو مشخص میکنه
  • img-src : آدرس آیکونی که قراره نمایش داده بشه رو مشخص میکنه. میتونین آدرس آیکون مورد نظر خودتون رو قرار بدین. آدرس پیش فرض اون http://i.imgur.com/DPCJHhy.png هست.

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

موفق باشید

یا علی

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

جلسات دوره

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

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

نیاز به لاگین

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