جلسه 19 آموزش CSS: جدول (Table) در CSS

احتمالاً تو هم مثل من وقتی اولین بار یه جدول HTML ساده بدون هیچ استایلی دیدی، با خودت گفتی : این دیگه چیه؟ چقدر بی‌روح و زشته! 😬 حق داری! جدول‌های HTML خام، واقعاً چنگی به دل نمی‌زنن. اما نگران نباش! CSS جادو میکنه و می‌تونه این جدول‌های ساده رو به جدول های زیبا و جذاب تبدیل کنه. ✨

تو این جلسه از سری آموزش های CSS رایا وردپرس می‌خوایم یاد بگیریم چطور با استفاده از CSS، جدول هامون رو از این رو به اون رو کنیم. قراره همه چیو کامل بهت توضیح بدم پس تا انتهای این مقاله با من همراه باش و چشم از صفحه برندار 🙂

نحوه کار با جدول (Table) در CSS

خب رفیق! یادت که هست؟ 😉 با تگ <table> توی HTML، ما فقط اسکلت و بدنه اصلی جدول رو می‌ساختیم. حالا وقتشه با جادوی CSS 🪄 بیایم سراغ این جدول و یه دستی به سر و روش بکشیم، رنگ و لعاب بهش بدیم و کاری کنیم که کلی خوشگل و جذاب بشه✨

قراره با چندتا ویژگی باحال CSS که دقیقاً برای کار با جدول‌ها ساخته شدن، حسابی کار کنیم و یاد بگیریم چطوری می‌تونیم یه جدول رو از این رو به اون رو کنیم: 👇

×

جلسه 15 آموزش CSS: فونت (Font) در CSS

مطالعه

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

• Width: اندازه عرض جدول رو مشخص کنیم (چقدر پهن باشه؟ )
• Border: دور جدول و سلول‌هاش خط و کادر خوشگل بکشیم
• Border-Collapse: اون خط‌های دوبل دور جدول رو یکی‌شون کنیم تا تمیزتر شه!
• Text-Align: نوشته‌های توی خونه‌های جدول (سلول‌ها) رو افقی تراز کنیم (بیان وسط، چپ یا راست؟ ↔️)
• Vertical-Align: نوشته‌ها رو عمودی هم تراز کنیم (برن بالا، وسط یا پایین سلول؟ ↕️)
• Padding: بین نوشته‌ها و دیواره سلول‌ها یه کم فاصله بدیم

جدول در HTML از تگ‌های اصلی مثل <table> (خود جدول)، <tr> (ردیف‌ها)، و <td> یا <th> (سلول‌ها) تشکیل شده. تو CSS می‌تونی به هر کدوم از این بخش‌ها استایل جداگانه بدی.

مثلاً برای استایل دادن به کل جدول، می‌تونی بنویسی:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

برای ردیف‌ها:

×

جلسه 18 آموزش CSS: لیست ها (List) در CSS

مطالعه

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

و برای سلول‌ها:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

اگه بخوای استایل خاص‌تری بدی، می‌تونی از کلاس‌ها یا آیدی‌ها استفاده کنی. مثلاً برای سرستون‌ها یه کلاس بذاری و فقط به اون‌ها استایل بدی. ساده‌ست، نه؟

مشخص کردن اندازه عرض جدول (Width)

یکی از اولین کارهایی که برای جدولت می‌کنی، تعیین عرضشه. تو CSS چند روش برای این کار داری:

• عرض ثابت (پیکسلی): اگه بخوای جدولت یه اندازه مشخص داشته باشه، مثلاً:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• عرض درصدی: اگه بخوای عرض جدولت نسبت به عرض والدش تنظیم بشه، مثلاً کل عرض صفحه رو پر کنه:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

خط دور لبه‌ های جدول (border)

وقتی می‌خوای دور جدول یک خط بکشی، یعنی به لبه‌های سلول‌ها و یا کل جدول یک «border» اضافه کنی. باید از ویژگی بردر کمک بگیری. برات یه مثال ساده می‌زنم تا دستت بیاد چجوریه 😊

×

جلسه 6 آموزش CSS: کار با متن ها (Texts) در CSS

مطالعه

در CSS، ویژگی border برای مشخص کردن سه تا چیز به کار می‌ره:

• ضخامت (مثلاً 1px یا 2px)
• نوع خط (مثلاً solid، dashed، dotted)
• رنگ (مثلاً black، #ff0000)

این ویژگی رو می‌تونی روی عناصر مثل <table>, <th>, <td> و هر تگ دیگه‌ای که نیاز به خط دور داره، اعمال کنی. 🎨

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

در مثال بالا یه خط 1 پیکسلی مشکی دور کل جدول کشیده میشه. اگه بخوای هر سلول هم خط داشته باشه باید به صورت زیر کد بزنی:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

تک خطی کردن خط دور لبه‌های جدول (Border-Collapse)

برای اینکه خطوط بین سلول‌ها تک خطی بشن و به هم نچسبن، از خاصیت border-collapse استفاده کن. این خاصیت دو تا مقدار اصلی داره:

×

جلسه 10 آموزش CSS: فاصله داخلی (Padding) در CSS

مطالعه

collapse

• مرزهای مشترک سلول‌ها با هم ادغام می‌شن و یک تک‌خط پیوسته ایجاد می‌کنن.
• مناسب وقتی می‌خوای ظاهر مرتب و یکدستی داشته باشی.

separate

• هر سلول مرز خودش رو داره و بین خطوطشون فاصله می‌افته.
• می‌تونی با border-spacing فاصله‌ها رو تنظیم کنی.

پس برای تک خطی کردن، بنویس:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

ترازبندی افقی متن داخل سلول‌ها (Text-Align)

می‌خوای متن داخل سلول‌ها رو تراز کنی؟ با خاصیت text-align می‌تونی این کار رو بکنی. چند تا گزینه داری:

×

جلسه 1 آموزش CSS: نحوه ایجاد فایل CSS و اتصال آن به HTML

مطالعه

• left: چپ‌چین
• right: راست‌چین
• center: وسط‌چین
• justify: تراز کامل (برای متن‌های بلند)

مثلاً اگه بخوای همه سلول‌ها وسط‌چین باشن:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

یا اگه میخای فقط سرستون‌ها وسط‌چین باشن و بقیه راست چین:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

هر جور که دوست داری می‌تونی تنظیمش کنی! و کاملا دستت بازه 🙂

ترازبندی عمودی متن داخل سلول‌ ها (Vertical-Align)

حالا اگه بخوای متن رو عمودی تراز کنی چی؟ مثلاً وقتی سلول‌ها ارتفاعشون کمی زیاده و می‌خوای متن بالا یا پایین باشه. از خاصیت vertical-align استفاده کن:

×

جلسه 9 آموزش CSS: کار با حاشیه (Border) در CSS

مطالعه

• top: می‌چسبه به بالا
• middle: می‌ره وسط (حالت پیش‌فرض)
• bottom: می‌چسبه به پایین

مثلاً اگه بخوای متن رو بالا بذاری:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

این کار باعث می‌شه جدولت حسابی منظم به نظر بیاد.

فاصله بین محتوا و بدنه سلول‌ها (Padding)

آخرین چیزی که قراره یاد بگیری، تنظیم فاصله داخل سلول‌هاست. با خاصیت padding می‌تونی فضای خالی بین محتوا و لبه‌های سلول رو تنظیم کنی. مثلاً:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

در مثالا بالا، 10 پیکسل فضای خالی دور محتوا گذاشتیم. اگه بخوای جهت‌های مختلف فرق کنه:

×

جلسه 12 آموزش CSS: ویژگی width و height در CSS

مطالعه

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

اینجا 15 پیکسل بالا و پایین، و 20 پیکسل چپ و راست فاصله میگیره متن از بدنه سلول. جدولت حالا خیلی شیک‌تر و خواناتر میشه!

واکنش گرا کردن جداول (Responsive Table)

جداول HTML ذاتاً برای نمایش اطلاعات ساختاریافته عالی هستن، اما در صفحه‌نمایش‌های کوچک (مثل موبایل) میتونن مشکل ساز بشن. دلیل اونم این هست که عرض جدول معمولاً بر اساس محتوای ستون‌ها تعیین میشه و اگر تعداد ستون‌ها زیاد یا محتوا طولانی باشه، عرض کلی جدول از عرض صفحه‌نمایش بیشتر میشه. در این حالت، قسمتی از جدول از دید کاربر خارج میشه و ممکنه حتی چیدمان کلی صفحه به هم بریزه.

برای واکنش‌گرا کردن جدول (Responsive Table) به شکلی که در دستگاه‌های با صفحه‌نمایش کوچک (مثل موبایل) به‌خوبی نمایش داده بشه و کاربر بتونه محتوای جدول رو به‌صورت افقی اسکرول کنه، از یه تکنیک ساده‌ استفاده میکنیم. جدول رو داخل یه تگ <div> میزاریم و به اون والد ویژگی overflow-x: auto; میدیم. اینطوری وقتی جدول بزرگ‌تر از باکس بشه، نوار اسکرول افقی ظاهر می‌شه و کاربر می‌تونه به راحتی جدول رو جا‌به‌جا کنه.

ساختار کلی کد:

×

جلسه 15 آموزش CSS: فونت (Font) در CSS

مطالعه

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

پایان

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

اگه سوالی داری، حتماً بپرس. من همیشه هستم که بهت کمک کنم. حالا برو و خودت یه جدول بساز و تمرین کن، چون با تمرین همه چیز بهتر می‌شه! 💪 تا جلسه بعدی، موفق باشی! 👋

×

جلسه 22 آموزش CSS: شبه عناصر (pseudo elements) در CSS

مطالعه