رفتن به محتوا
HarmoniQHarmoniQزبان طراحی هارمونیک

جدول

وضعیت: در حال بازبینی
نقطه‌های شکست گرید وب
اندازه شروع از (پیکسل) ستون
کوچک۰۴
متوسط۶۷۲۸
بزرگ۱۰۵۶۱۲
خیلی بزرگ۱۳۱۲۱۲
 
<div class="hq-table-wrap">
  <table class="hq-table">
    <caption>نقطه‌های شکست گرید وب</caption>
    <thead>
      <tr>
        <th scope="col">اندازه</th>
        <th scope="col" class="hq-table__num">شروع از (پیکسل)</th>
        <th scope="col" class="hq-table__num">ستون</th>
      </tr>
    </thead>
    <tbody>
      <tr><th scope="row">کوچک</th><td class="hq-table__num">۰</td><td class="hq-table__num">۴</td></tr>
      <tr><th scope="row">متوسط</th><td class="hq-table__num">۶۷۲</td><td class="hq-table__num">۸</td></tr>
      <tr><th scope="row">بزرگ</th><td class="hq-table__num">۱۰۵۶</td><td class="hq-table__num">۱۲</td></tr>
      <tr><th scope="row">خیلی بزرگ</th><td class="hq-table__num">۱۳۱۲</td><td class="hq-table__num">۱۲</td></tr>
    </tbody>
  </table>
</div>

چه وقت استفاده کنیم

Section titled “چه وقت استفاده کنیم”
  • برای مقایسهٔ چند مورد روی چند ویژگی مشترک، یا نمایش فهرستی از رکوردها.
  • وقتی خواننده باید مقدارها را زیر هم بخواند و با هم بسنجد.

چه وقت استفاده نکنیم

Section titled “چه وقت استفاده نکنیم”
  • برای چیدمان صفحه. چیدمان با گرید ساخته می‌شود.
  • برای یک عدد یا دو عدد؛ از آمار استفاده کنید.
  • برای روند در طول زمان؛ نمودار روشن‌تر می‌گوید (بخش نمودارها).

قواعد برندبوک

Section titled “قواعد برندبوک”
  • متن راست‌چین؛ عددها با ارقام هم‌عرض و یک دقت در هر ستون.
  • واحد در سرستون یا زیرنویس می‌آید، نه در همهٔ خانه‌ها.
  • سرستون SemiBold به رنگ text-secondary با خط ۲ پیکسلی زیرش؛ ردیف‌ها با خط مویی؛ بدون خط عمودی و بدون ردیف‌های راه‌راه.
  • ردیف جمع Bold با خط ink بالایش.
  • ستون یا خانهٔ مهم با زمینهٔ accent-subtle برجسته می‌شود، نه با رنگ متن.
  • در اسلاید حداکثر حدود ۸ ستون و ۱۲ ردیف؛ جدول بزرگ‌تر به پیوست می‌رود و خلاصه‌اش روی اسلاید می‌آید.
  • امتیاز کیفی با توپ هاروی به رنگ ink، هرگز با سبز و زرد و قرمز.

گونه‌ها

Section titled “گونه‌ها”
بخش کلاس کاربرد
ستون عددی hq-table__num عدد، تاریخ و هر مقداری که باید زیر هم هم‌تراز شود
برجسته hq-table__highlight یک ستون یا خانه که پیام اصلی است
جمع tfoot یا hq-table__total ردیف مجموع
توپ هاروی hq-harvey امتیاز کیفی
مرتب‌شدنی hq-table__sort سرستونی که کاربر با آن مرتب می‌کند

ردیف جمع و ستون برجسته

Section titled “ردیف جمع و ستون برجسته”
نمونهٔ ساختگی برای نمایش ساختار: ساعت کار پروژه
مرحله برنامه (ساعت) واقعی (ساعت)
تشخیص۴۰۴۴
طراحی۶۰۵۸
اجرا۸۰۸۲
جمع۱۸۰۱۸۴
 
<div class="hq-table-wrap">
  <table class="hq-table">
    <caption>نمونهٔ ساختگی برای نمایش ساختار: ساعت کار پروژه</caption>
    <thead>
      <tr>
        <th scope="col">مرحله</th>
        <th scope="col" class="hq-table__num">برنامه (ساعت)</th>
        <th scope="col" class="hq-table__num hq-table__highlight">واقعی (ساعت)</th>
      </tr>
    </thead>
    <tbody>
      <tr><th scope="row">تشخیص</th><td class="hq-table__num">۴۰</td><td class="hq-table__num hq-table__highlight">۴۴</td></tr>
      <tr><th scope="row">طراحی</th><td class="hq-table__num">۶۰</td><td class="hq-table__num hq-table__highlight">۵۸</td></tr>
      <tr><th scope="row">اجرا</th><td class="hq-table__num">۸۰</td><td class="hq-table__num hq-table__highlight">۸۲</td></tr>
    </tbody>
    <tfoot>
      <tr><th scope="row">جمع</th><td class="hq-table__num">۱۸۰</td><td class="hq-table__num hq-table__highlight">۱۸۴</td></tr>
    </tfoot>
  </table>
</div>

امتیاز کیفی

Section titled “امتیاز کیفی”
نمونهٔ ساختگی برای نمایش ساختار: مقایسهٔ دو گزینه
معیارگزینهٔ اولگزینهٔ دوم
هزینه
سرعت اجرا
ریسک
 
<div class="hq-table-wrap">
  <table class="hq-table">
    <caption>نمونهٔ ساختگی برای نمایش ساختار: مقایسهٔ دو گزینه</caption>
    <thead>
      <tr><th scope="col">معیار</th><th scope="col">گزینهٔ اول</th><th scope="col">گزینهٔ دوم</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row">هزینه</th><td><span class="hq-harvey hq-harvey--4" role="img" aria-label="کامل"></span></td><td><span class="hq-harvey hq-harvey--2" role="img" aria-label="نیمه"></span></td></tr>
      <tr><th scope="row">سرعت اجرا</th><td><span class="hq-harvey hq-harvey--2" role="img" aria-label="نیمه"></span></td><td><span class="hq-harvey hq-harvey--3" role="img" aria-label="سه‌چهارم"></span></td></tr>
      <tr><th scope="row">ریسک</th><td><span class="hq-harvey hq-harvey--1" role="img" aria-label="یک‌چهارم"></span></td><td><span class="hq-harvey hq-harvey--4" role="img" aria-label="کامل"></span></td></tr>
    </tbody>
  </table>
</div>
مرحلهساعت
طراحی۶۰
انجام بدهیک ستون برجسته با زمینهٔ accent-subtle، و واحد فقط در سرستون.
مرحلهساعت
طراحی۶۰ ساعت
انجام ندهتکرار واحد در هر خانه و برجسته‌کردن با رنگ متن.