چگونه یک جدول HTML شیک و پاسخگو بسازیم

در این آموزش، نحوه ساخت یک میز شیک و اصلاح طرح آن را برای تطبیق با اندازه های مختلف صفحه می آموزیم.

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

جداول پاسخگو در HTML

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

چندین راه حل برای این مسئله وجود دارد: ظروف قابل پیمایش که جدول را می پیچند، سلول های جمع شونده، استفاده از نشانه گذاری های متفاوت (کمتر معنایی). ما از Flexbox برای نمایش سلول های جدول خود به صورت شبکه ای در صفحه نمایش های کوچکتر استفاده می کنیم.

1. با نشانه گذاری HTML شروع کنید

نشانه گذاری ساده خواهد بود: یک جدول با شش ردیف در داخل یک ظرف.

در اینجا چگونه به نظر می رسد:

<div class="container">  
  <table>
    <thead class="visible@l">
      <tr>
        <th>Title</th>
        <th>Year</th>
        <th>Stars</th>
        <th>Plot</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <strong class="hidden@l">Title:</strong> 
          ...
        </td>
        <td>
          <strong class="hidden@l">Year:</strong> ...
          <img width="140" height="209" src=" alt=">
        </td>
        <td>
          <strong class="hidden@l">Stars:</strong> 
          ...
        </td>
        <td>
          <strong class="hidden@l">Plot:</strong> 
          ...
        </td>
      </tr>
      
      <!-- more table rows here -->

    </tbody>
  </table>
</div>

توجه کنید visible@l و hidden@l کلاس ها. اینها به ما کمک می‌کنند تا عناصر خاصی را بسته به اندازه نمای درت تغییر دهیم.

2. اضافه کردن سبک ها

بیشتر، ما یک رویکرد موبایل اول را برای سبک های خود دنبال می کنیم. همانطور که در بالا ذکر شد، ما به دو کلاس کمکی نیاز داریم:

@media (max-width: 999px) {
  .visible\@l {
    display: none;
  }
}

@media (min-width: 1000px) {
  .hidden\@l {
    display: none;
  }
}

در هر نقطه، جدول ما دارای ردیف های راه راه گورخری خواهد بود. ما استفاده خواهیم کرد :nth-child() CSS شبه کلاس برای تولید آنها.

در صفحه‌های کوچک و متوسط، هدر جدول پنهان می‌شود. در این مرحله، عددی را نشان می‌دهیم که شماره فیلم را نشان می‌دهد. سرفصل های جدول را با تعدادی جایگزین می کنیم strong عناصری که در داخل هر سلول ظاهر می شوند.

بنابراین، در صفحه نمایش های کوچک، به این صورت خواهد بود:

در صفحه های متوسط، جدول یک شبکه دو ستونی خواهد بود:

در صفحه نمایش های بزرگ، تمام سلول های جدول دارای عرض 25٪ خواهند بود. به علاوه، عناوین جدول قابل مشاهده خواهند بود.

هر بار که ماوس را روی یک ردیف می گذاریم، یک تصویر مرتبط ظاهر می شود. همچنین، یک گلوله سیاه کوچک در سمت راست وسط قرار می گیرد تا ردیف فعال را نشان دهد.

با در نظر گرفتن تمام موارد فوق، در اینجا بخشی از این سبک ها آورده شده است. توجه کنید که چگونه با استفاده از ردیف های جدول خود شروع می کنیم display: flex; flex-wrap: wrap;، با display: table-row; زمانی که به نقطه شکست 1000 پیکسل رسیدیم وارد عمل می شویم:

/*CUSTOM VARIABLES HERE*/

table {
  margin: 50px 0 20px;
  text-align: left;
  border-collapse: collapse;
  border: 1px solid var(--table-border);
}

table th {
  color: var(--white);
  background: var(--darkblue);
  padding: 20px;
}

table td {
  width: 100%;
  padding: 10px;
}

table tbody tr {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  counter-increment: counter;
}

table tbody tr::before {
  content: counter(counter);
  position: absolute;
  top: 20px;
  right: 20px;
  width: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  font-weight: bold;
  color: var(--white);
  background: var(--black);
  z-index: 1;
}

table tbody tr:nth-of-type(even) > * {
  background: var(--lightblue);
}

table img {
  display: none;
  position: absolute;
  top: 20px;
  left: 45%;
  max-width: 150px;
  z-index: 1;
}

@media (min-width: 700px) and (max-width: 999px) {
  table tbody {
    display: flex;
    flex-wrap: wrap;
  }

  table tbody tr {
    width: 50%;
  }
}

@media (min-width: 1000px) {
  table th,
  table td {
    width: 25%;
  }

  table tbody tr {
    display: table-row;
  }
}

@media (hover: hover) and (min-width: 1000px) {
  table tbody tr:hover {
    cursor: pointer;
  }
  table tbody tr:hover img {
    display: block;
  }

  table tbody tr:hover td:first-child::before {
    display: block;
  }
}

می توانید با کلیک بر روی همه آنها را بررسی کنید CSS برگه نسخه ی نمایشی

نتیجه

در این آموزش کوتاه روشی را برای ایجاد یک جدول واکنش گرا که در صفحه نمایش های مختلف عالی به نظر می رسد را توضیح دادیم. در صفحه های کوچک و متوسط، ما آن را مانند یک شبکه رفتار می کنیم، در حالی که در صفحه نمایش های بزرگتر، ما یک جدول معمولی با سلول داریم.

در اینجا یادآور چیزی است که ما ساختیم:

مثل همیشه، خیلی ممنون که خواندید!