آموزش طراحی جدول حرفه‌ای با HTML برای المنتور

سلام دوستان عزیز! 🌟
آیا تا به حال شده که بخواهید در سایت وردپرسی خود، یک جدول زیبا و حرفه‌ای نمایش دهید اما با محدودیت‌های افزونه‌ها مواجه شوید؟ 🤔 در این آموزش یاد می‌گیرید که چگونه با استفاده از HTML و CSS، بدون نیاز به هیچ افزونه‌ای، یک جدول شیک و شخصی‌سازی‌شده طراحی کنید که در المنتور قابل استفاده باشد! 😍

کدهای استفاده شده در آموزش:

<!-- amirrezarahmani.ir -->
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
/* اگر نوشته ها فارسی بود، کد چیدمان را به کد زیر تغییر بدید */
/* text-align: right; */
td, th {
  border: 1px solid #cbcbcb;
  text-align: left;
  padding: 10px;;
}
/* ظاهر هاور کردن رو ردیف ها */
tr:hover {
  background-color: #afcfff !important;
  transition: all 1s;
}
/* ظاهر ردیف های زوج */
tr:nth-child(even) {
  background-color: #e4e4e4;
}
/* ظاهر ردیف اول */
.first-row {
  background-color: #a13535;
  color: #ffff
}
</style>
 <!-- tr = ردیف - th = ستون -->
<table>
  <tr class="first-row">
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
    <th>Column 4</th>
    <th>Column 4</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>Orange</td>
    <td>Pen</td>
    <td>Desk</td>
    <td>Desk</td>
  </tr>
  <tr>
    <td>Carbon</td>
    <td>Teacher</td>
    <td>Footer</td>
    <td>Desktop</td>
    <td>Desktop</td>
  </tr>
  <tr>
    <td>Woo</td>
    <td>WP</td>
    <td>Elementor</td>
    <td>Mouse</td>
    <td>Mouse</td>
  </tr>
  <tr>
    <td>Windows</td>
    <td>Door</td>
    <td>Father</td>
    <td>Sister</td>
    <td>Sister</td>
  </tr>
  <tr>
    <td>System</td>
    <td>CUP</td>
    <td>Cat</td>
    <td>Dog</td>
    <td>Dog</td>
  </tr>
  <tr>
    <td>Universal</td>
    <td>Home</td>
    <td>Bike</td>
    <td>GTA 6</td>
    <td>GTA 6</td>
  </tr>
  <tr>
    <td>Universal</td>
    <td>Home</td>
    <td>Bike</td>
    <td>GTA 6</td>
    <td>GTA 6</td>
  </tr>
</table>

🔹 چرا باید از کدنویسی برای طراحی جدول استفاده کنیم؟

• انعطاف‌پذیری بالا 🎨 (می‌توانید رنگ‌ها، فونت‌ها و استایل‌ها را کاملاً مطابق با سلیقه خود تنظیم کنید.)
• عدم نیاز به افزونه‌های اضافی 🚀 (سرعت سایت را کاهش نمی‌دهد و باعث سنگین شدن آن نمی‌شود.)
• سازگاری بالا ✅ (این جداول در همه صفحه‌سازها از جمله المنتور به‌راحتی قابل استفاده‌اند.)

حالا بریم سراغ کدها! 👇

📌 آموزش موشکافانه کد HTML و CSS

۱. تنظیم استایل جدول با CSS

در بخش style کد، ویژگی‌های ظاهری جدول را تعریف کرده‌ایم:

table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; }

✅ فونت جدول را روی Arial تنظیم کرده‌ایم.
✅ border-collapse باعث می‌شود که حاشیه‌های جدول به هم بچسبند و ظاهری یکپارچه داشته باشند.
✅ عرض جدول را 100% تنظیم کرده‌ایم تا در تمام صفحه گسترده شود.

۲. تنظیم ظاهر سلول‌های جدول

td, th { border: 1px solid #cbcbcb; text-align: left; padding: 10px; }

✅ تمامی سلول‌های جدول (td) و عنوان‌های ستون (th) دارای یک حاشیه خاکستری با ضخامت ۱ پیکسل هستند.
✅ متن‌ها درون سلول‌ها چپ‌چین (text-align: left) شده‌اند.
✅ فاصله داخلی (padding: 10px) اضافه شده تا متن‌ها خواناتر باشند.

📌 اگر متن‌ها فارسی باشند، می‌توانید کد چیدمان را به این تغییر دهید:

text-align: right;

۳. استایل‌دهی به سطرهای جدول

tr:hover { background-color: #afcfff !important; transition: all 1s; }

📌 تغییر رنگ پس‌زمینه هنگام هاور (hover) شدن روی ردیف‌ها

✅ وقتی موس روی هر ردیف (tr) برود، پس‌زمینه آن آبی ملایم می‌شود.
✅ با transition: all 1s این تغییر رنگ با یک افکت نرم و جذاب نمایش داده می‌شود.

📌 ایجاد تفاوت بین ردیف‌های زوج و فرد

tr:nth-child(even) { background-color: #e4e4e4; }

✅ این کد باعث می‌شود ردیف‌های زوج (2، 4، 6، …) رنگ پس‌زمینه خاکستری روشن داشته باشند، تا خوانایی جدول بیشتر شود.

📌 استایل خاص برای ردیف اول (سربرگ جدول)

.first-row { background-color: #a13535; color: #fff; }

✅ ردیف اول (سربرگ) رنگ قرمز تیره دارد و نوشته‌های داخل آن سفید هستند، که باعث جلب توجه بیشتر می‌شود.

🎯 نتیجه نهایی

جدول ساخته‌شده با این کدها به شکل زیر خواهد بود:

🎉 حالا شما می‌توانید این کد را در هر بخش از سایت خود، داخل المنتور یا ویرایشگر وردپرس قرار دهید و از آن استفاده کنید!

اگر این آموزش براتون مفید بود، لایک کنید ❤️ و برای دوستانتون بفرستید!

موفق باشید! 🚀