استایل دهی به جدول در CSS | کد CSS برای جدول + 11 مثال عملی

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

کاربرد html در ساخت جدول

همانطور که میدانید اگر ما صفحات وب را یک ساختمان در نظر بگیریم html یا Hyper Text Markup Language در صفحات وب همانند اسکلت ساختمان عمل میکند و CSS وظیفه زیبا کردن آن ساختمان را به عهده دارد، اما شما برای استایل دهی به جدول های خود با css در ابتدا باید یک جدول از جنسhtml  را داشته باشید چرا که پایه ای این کار بر اساس این زبان نشانه گذاری نوشته میشود.

اگر هنوز اطلاعات زیادی درباره زبان نشانه گذاری html ندارید و دوست دارید با آن آشنا شوید پیشنهاد میکنم در ابتدا مقاله HTML چیست؟ را مطالعه کنید و یا اگر دوست دارید بدانید که چرا به HTML زبان نشانه گذاری گفته میشود میتوانید مقاله چرا HTML زبان برنامه نویسی نیست را مطالعه کنید، تا یک دید کلی نسبت به ساخت جدول با html و استایل دهی جدول با css پیدا کنید.

جدول در html چیست؟

حال ممکن است این سوال به ذهن شما خطور کند که جدول چیست؟ جدول های سطح وب با جدول هایی که در کتاب ها و ویدیو های آموزشی و در دنیای واقعی دیده ایم هیچ تفاوتی ندارد و نگران این نباشید که ساخت جدول در آموزش html قرار است کار دشواری باشد، در واقع قرار است که همان جدول هایی که در ابتدا از جنس کاغذ روی کتاب ها هستند به جنس کد دربیاوریم. جدول ها مجموعه ای از ردیف ها و ستون ها هستند که انواع گوناگونی از شکل و شمایل آن ها وجود دارد که از طریق آن ها میتوانیم هر نوع داده و اطلاعاتی که نیاز داریم را وارد آن ها کنیم، این کار باعث میشود تا اطلاعات ما یک دست باشند و خواندن ان ها برای کاربران راحت تر باشد. در انتها همین مقاله 11 نمونه از جدول سایت که با CSS استایل دهی شده اند را در اختیار شما گذاشته ایم.

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

جدول ها باعث به اشتراک گذاشته شدن اطلاعات در یک بستر مناسب میشدند، اما امروزه با وجود زبان CSS این کاربرد جداول اچ تی ام ال کم رنگ تر شده است البته نباید اینگونه به داستان نگاه کنیم که از این جداول هیچ استفاده ای نمیشود! در حالی که برای طراحی قالب ایمیل این table ها بیشترین استفاده و کارایی را دارند.

آموزش ایجاد جدول با HTML

برای اینکه بخواهیم با استفاده از html یک جدول ایجاد کنیم شما در مرحله اول میتوانید آموزش مقدماتی HTML را که رایگان است مشاهده کنید و یا تا ادامه این مقاله همراه ما باشید.
برای ساخت جدول با اچ تی ام ال ابتدا باید از تگ باز جدول یا <table> شروع کنیم حال پس از ایجاد این تگ برای اینکه بتوانیم از سطر ها و ستون ها استفاده کنیم از تگ های <tr> سطر ها را ترسیم کرده و برای ایجاد سلول ها یا ستون ها از تگ <td> میبایست استفاده کنیم. در تصویر زیر میتوانید نمونه یک جدول ایجاد شده با تگ <table> را مشاهده کنید.

تگ های ساخت جدول در html

برای اینکه آموزش برنامه نویسی را عملی تر جلو ببریم در اینجا لیستی از تگ های جدول در html را در اختیارتان گذاشته ایم که در ساخت جدول باید ان ها را در ذهن خود داشته باشید. برای به یاد سپردن این تگ ها نیازی به حفظ کردن ان ها نیست و سعی کنید با تمرین کردن این تگ ها را به ذهن خودتان بسپارید.

چند نکته مهم: سلول های جدول که به عنوان هدرهای ستون یا سرصفحه های ردیف عمل می کنند باید از عنصر <th> (هدر جدول) استفاده کنند.
برای تعریف ستون های جدول برای یک ظاهر طراحی شده می توانید از <col> و <colgroup>استفاده کنید. با این حال ، تعدادی از محدودیت ها با این عمل وجود دارد.با استفاده از عنصر <caption> می توان عنوان را به جدول اضافه کرد.

استایل دهی به جدول با css

در این قسمت بعد از اینکه جدول های خود را طراحی کردید سراغ استایل دهی جدول با css میرویم. اگر هنوز با زبان برنامه نویسی CSS اشنا نیستید پیشنهاد میکنم در ابتدا مقاله CSS چیست؟ را مطالعه کنید. البته این نکته را به یاد داشته باشید که جدول ها در ابتدا هیچ ظاهری ندارند و ما با استفاده از سی اس اس به ان ظاهر زیبا خواهیم داد. مانند جدول زیر:

ویژگی خطوط (table borders) در CSS

از این ویژگی در طراحی جدول میتوان به آن ها خطوط اضافه کرد که در مثال زیر میتوانید نمونه آن را مشاهده کنید:

همچنین در نمونه کد ویژگی خطوط (table borders) در CSS را میتوانید مشاهده کنید که در این عنصر table نام و نام خانوادگی افراد را نمایش دادیم حال برای اینکه بتوانیم مرز بین ستون های جدول را از هم دیگر جدا کنیم از ویژگی border که روی th، td و table تاثیر گذاشته است را تعیین کنیم که در نهایت تبدیل به جدول بالا میشود.

ویژگی یکی کردن خطوط جدول (collapse) در CSS

با این ویژگی در جدول شما میتوانید خطوط بین جداول را از بین ببرید و یک جدول واحد ایجاد کنید. در تصویر زیر میتوانید خاصیت استفاده از ویژگی collapse را مشاهده کنید.

همچنین در تصویر زیر میتوانید نمونه کد یکی کردن خطوط جدول در css را مشاهده کنید.

ویژگی عرض و ارتفاع جدول (High & width) در CSS

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

همچنین در تصویر زیر میتوانید نمونه کد ویژگی عرض و ارتفاع جدول در css را مشاهده کنید.

ویژگی تراز بندی محتوا درون جدول (text-align) در CSS

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

همچنین در تصویر زیر میتوانید نمونه کد ویژگی درون جدول (text-align) در CSS را مشاهده کنید.

ویژگی تنظیمات عمودی جدول (Vertical-align) در CSS

موقعیت قرار گیری محتوا را بر اساس محور عمودی جدول یعنی بالا،پایین و وسط را تعیین میکند که به صورت پیش فرض همه موارد در وسط قرار میگیرند.

همچنین در تصویر زیر میتوانید نمونه کد ویژگی تنظیمات عمودی جدول (Vertical-align) در CSS را مشاهده کنید.

ویژگی پدینگ (Padding) جدول در CSS

از ویژگی پدینگ برای کنترل فاصله border ها و محتوای داخل ستون ها استفاده میشود که نمونه ان را میتوانید در تصویر زیر مشاهده کنید.

در تصویر زیر میتوانید نمونه کد ویژگی padding در CSS را مشاهده کنید.

ویژگی Hover برای جدول در CSS

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

در تصویر زیر میتوانید نمونه کد ویژگی hover را مشاهده کنید.

ویژگی جدول های رنگی در CSS

از این ویژگی میتوان استفاده کرد تا سطر جدول ها هر کدام رنگ دلخواه خودمان را داشته باشد که میتوانید نمونه ان را ببینید.

جدول ریسپانسیو (Responsive) در CSS

واکنش گرایی یا responsive بودن در تمام صفحات وب مهم است شما میتوانید با این ویژگی جدولی واکنش گرا طراحی کنید که در صورت تغییر اندازه صفحه اطلاعات بهم ریخته و نامنظم نباشد برای اینکار این ویژگی یک اسکرولر افقی را در پایین جدول اضافه میکند تا افراد بتوانند راحت تر محتوای دیگر جدول را مشاهده کنند.

نتیجه گیری

در این مقاله سعی کردیم تا روش استایل دهی به جدول در css را به شما اموزش دهیم و اگر علاقه مند هستید تا اموزش های بیشتر زبان css را مشاهده کنید میتوانید به صفحه آموزش CSS مراجعه کنید. و یا اگر سوالی داشتید میتوانید در قسمت کامنت ها بپرسید هر چند با روش های گفته شده به راحتی میتوانید جدول های خود را استایل دهی کنید.