استایل جدول در CSS – تغییر ظاهر جدول در CSS
خوش اومدین به دهمین جلسه از دوره آموزش CSS. در این جلسه به سراغ جدول ها رفتیم و قصد داریم ظاهر جدول خودمون رو با استفاده از css تغییر بدیم. اگر دوره آموزش HTML رو دنبال کرده باشید، ماه در جلسه پنجم با رسم جدول در HTML آشنا شدیم. امروز ما با یادگیری استایل جدول در CSS میتونیم ظاهرهای متفاوت و زیبایی رو برای جداول خودمون بوجود بیاریم. این استایل دهی شامل خود جدول و ردیف ها و حتی سلول های جدول میشه. پس پیشنهاد میکنم این جلسه از دست ندید.
استایل جدول در CSS
ما میتونیم از ویژگی هایی که تا اینجا باهاشون آشنا شدیم برای تغییر ظاهر جدول ها استفاده کنیم. همونطور که میدونید ما چند تگ اصلی داریم که با استفاده از اونها یه جدول رو رسم میکنیم. حالا با استایل دهی به هرکدوم از تگ های table و tr و th و td میتونیم ظاهر جدول خودمون رو شخصی سازی کنیم. به عنوان نمونه جدول ها در حالت پیشفرض بدون border هستند. من میتونم بیام و برای اونها border تعریف کنم و با این کار کمک کنم که خطوط مرزی اونها دیده بشه. قطعه کد زیر رو ببینید:
table, th, td {
border: 1px solid;
}در قطعه کد بالا من با استفاده از ویژگی border برای سه تگ خودم خط مرزی تعریف کردم. نتیجه این کار رو در تصویر زیر ببینید:
من در تصویر بالا دو جدول دارم که اولی بدون استایل است و همونطو رکه میبینیم هیچ کادری نداره ولی دومی رو با استفاده از css استایل دهی کردم و تفاوت این دو در تصویر مشخص هست.
تغییر اندازه جدول در css
این امکان برامون وجود داره که ابعاد جدول رو با استفاده از ویژگی های width و height تنظیم کنیم. همینطور میتونیم با استفاده از این ویژگی ها بخش های مختلف یک جدول رو هم مقداردهی کنیم. مثال زیر رو ببینید:
همونطور که توی تصویر بالا میبینید ما میتونیم با استفاده از ویژگی های width و height عرض و ارتفاع جدول و سطرها و ستونهای جدول رو مشخص کنیم. ما میتونیم علاوه بر اینکه یک مقدار ثابت رو برای طول و ارتفاع تعیین کنیم (مثل 70px) از درصد هم استفاده کنیم، به این ترتیب این امکان وجود داره که عرض یا ارتفاع جدول یا سطر یا ستون جدول رو به نسبت صفحه خروجی تنظیم کنیم. مثلا زمانی که من عرض جدول خودم رو در تصویر بالا برابر ۱۰۰٪ تعریف کردم، جدول من عرض صفحه رو جدا از اینکه چند پیکسل باشه پر میکنه. اگر همین مقدار روی ۵۰٪ درصد میذاشتم طبیعتا نصف صفحه رو جدول من پر میکرد.
چینش متن در جدول
ما میتونیم چینش متن رو برای کل جدول، ستون خاص و حتی سلول خاصی از جدول شخصی سازی کنیم. کافیه برای اون قسمت از ویژگی text-align استفاده کنیم تا بتونیم چینش متن رو روی چپ چین، راست چین و وسط چین تنظیم کنیم. همچنین این امکان وجود داره که با استفاده از ویژگی vertical-align چینش متن رو نسبت به ارتفاع مشخص کنیم. ما میتونیم مقادیر بالا، پایین و وسط رو برای این ویژگی در نظر بگیریم. تصویر زیر رو ببینید:
همونطور که در تصویر بالا میبینید من با استفاده از vertical-align متن خودم در داخل td رو در قسمت پایین نمایش دادم. ما میتونیم با استفاده از text-align و vertical-align جایگاه دلخواه خودمون رو برای متن در داخل جدول ها بوجود بیاریم. در نظر داشته باشید که اگه قصد استفاده از vertical-algin رو برای استایل جدول در css دارید، باید ارتفاع td شما بیشتر از حد پیشفرض باشه وگرنه صرف استفاده از ویژگی متن به بالا یا پایین انتقال پیدا نمیکنه. همونطور که میبینید من در توی مثال بالا ارتفاع td رو روی 50px قرار دادم.
تغییر استایل جدول در css هنگام قرار گرفتن موس
تا اینجای کار تغییرات زیادی روی استایل جدول خودمون اعمال کردیم. ما از تمامی ویژگی هایی که در درس های قبلی یاد گرفتیم میتونیم برای استایل دهی متون استفاده کنیم. جدول هایی که فیلدهای زیادی دارند هنگام نمایش نیاز به استایل دهی خاص به ردیف ها دارند که خواننده بتونه به راحتی هر ردیف رو از ردیف دیگه تشخیص بده. یکی از این راهکارها تغییر استایل یه ردیف هنگام قرار گرفتن موس روی اون ردیف هست. ما با استفاده از سودو :hover میتونیم این قابلیت رو به جدول خودمون بدیم. مثال زیر رو ببینید:
همونطور که در تصویر بالا میبینید من برای تگ tr از وضعیت hover استفاده کردم. ما با این وضعیت در درس استایل لینک در css آشنا شدیم. این وضعیت زمانی است که موس روی تگ مورد نظرمون قرار میگیره.
حالا که توی این وضعیت رنگ پس زمینه رو تغییر دادم، میبینید که زمانی که موس روی هر ردیفی از جدول قرار میگیره رنگ پس زمینه اون تغییر میکنه. در واقع قطعه کد زیر باعث این اتفاق هست:
tr:hover {background-color: coral;}
