هدر سایت

به رایا وردپرس خوش آمدید

آموزش CSS

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

آخرین بروزرسانی: 1 اردیبهشت 1404
بدون دیدگاه
زمان مطالعه: 6 دقیقه

آموزش CSS

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

ادیتور کد آنلاین رایاوردپرس کدهای این مقاله را می‌توانید در ادیتور آنلاین ما تست کنید تا مفاهیم را بهتر یاد بگیرید! امتحان کن احتمالاً تو هم مثل من وقتی اولین بار یه جدول HTML ساده بدون هیچ استایلی دیدی، با خودت گفتی : این دیگه چیه؟ چقدر بی‌روح و زشته!

ادیتور کد آنلاین رایاوردپرس

کدهای این مقاله را می‌توانید در ادیتور آنلاین ما تست کنید تا مفاهیم را بهتر یاد بگیرید!

امتحان کن

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

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

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

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

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

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

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

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

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

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|

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

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|

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

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|

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

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

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

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

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|

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

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|

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

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

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

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

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

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|

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

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|

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

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

collapse

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

separate

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

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

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|

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

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

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

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

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|

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

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|

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

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

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

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

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

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|

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

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

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

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|

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

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|

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

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

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

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

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

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|

پایان

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

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

5/5 - (2 امتیاز)

جلسه 2 آموزش CSS: سینتکس CSS – اصول پایه و قواعد نوشتاری

جلسه 2 آموزش CSS: سینتکس CSS – اصول پایه و قواعد نوشتاری

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

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

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

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

اگه از مطالب سایت استفاده کردی و کارت رو راه انداخته، می‌تونی با یه حمایت کوچیک بهمون انگیزه بدی تا با قدرت کار تولید محتوای خفن تر و جذاب تر رو پیش ببریم 😉🥰

❤️ حمایت از رایا وردپرس

ارسال نظر ( 0 نظر تایید شده )

8 نفر در حال مطالعه

1190 بازدید اخیر

5 این پست رو بوکمارک کردن

6 دقیقه مطالعه

ما رو در شبکه های اجتماعی دنبال کن 😉❤️

سعید

400 مقاله

عاشق یادگیری و پیشرفت در برنامه نویسی و ارتقا مهارت هام هستم. سعی میکنم دانش و تجربیات ارزشمندم رو در رایا وردپرس باهاتون به اشتراک بزارم :)

مشاهده همه مقالات