همونطوری که تا الان توی دوره آموزش CSS یاد گرفتیم همه چی رو میشه با استفاده از کدهای CSS خوشگل تر کرد ! جدول ها هم مستثنی ازین قضیه نیستن و میشه کلی کار روی جدول ها انجام داد طبق سلیقه که ظاهر قشنگ تری داشته باشن . تو این جلسه از دوره آموزش CSS میخوایم به کدنویسی CSS برای جدول ها صحبت کنیم .
حاشیه دهی به جدول ها
تکرار مکررات هستش ولی میشه با استفاده از قابلیت border ها بیایم به حدول هامون حاشیه بدیم طبق کدی که در سی اس اس یا CSS درج می کنیم .
table, th, td {
border: 1px solid;
}
تعیین عرض جدول
با استفاده از قابلیت هایی که تا الان یاد گرفتیم هم میتوینم بیایم با خصوصیت width عرض جدول رو تغییر بدیم و بهش بگیم در چه عرضی باید ظاهر بشه .
table {
width: 100%;
}
تعیین ارتفاع جدول
با استفاده از قابلیت height هم میتونیم بیایم برای هر کدوم از انواع المان های جدول چه هدر باشه چه دیتا ارتفاع خاصی مشخص کنیم و ظاهر جدولمون رو بهتر کنیم طبق سلیقه مون !
table {
width: 100%;
}
th {
height: 70px;
}
تعیین محل قرار گیری متن های جدول
برای اینکه بتونیم محل افقی قرار گیری متن ها رو مشخص کنیم از قابلیتی که در جلسه های قبل یاد گرتفیم که text-align هست استفاده می کنیم . برای این هم که بتونیم بیایم در ارتفاع عمودی محل قرار گیری رو تنظیم کنیم هم از گزینه vertical-align استفاده می کنیم . مثال های زیر رو ببینین کاملا واضح هستش :
th {
text-align: left;
}
td {
text-align: center;
}
td {
height: 50px;
vertical-align: bottom;
}
فاصله گذاری داخلی برای جدول ها
برای این کار هم از قابلیت padding استفاده می کنیم. مثال های زیر واضح هستن :
th, td {
padding: 15px;
text-align: left;
}
ایجاد جداکننده در هر سطر جدول
برای ایجاد جداکننده هر سطر هم میتونیم از قابلیت border برای هر کدوم از تگ ها استفاده کنیم . مثال زیر رو ببینین :
th, td {
border-bottom: 1px solid #ddd;
}
تغییر رنگ زمانی که موس روی المان می رود
این عملیات لازم هست که یکم حرفه ای تر بشین ! یک چیزی توی CSS وجود داره به اسم hover که میاد وضعیت اون المان رو مشخص میکنه توی سلکتور . اگر خاطرتون باشه قبلا در جلسه آموزش لینک ها اومدیم برای لینک ها وضعیت تعیین کردیم . گفتیم اگر لینک بازدید شده بود یا موس میره روش یا کلیک میشه همون لحظه و … از قابلیت hover هم برای وضعیت المان میشه استفاده کنیم ( هر المانی کار میکنه ! ) و میتونیم بهش بگیم وقتی موس رفت روش چه شکلی بشه اون المان ! مثال زیر رو ببینین:
tr:hover {background-color: coral;}
الان با این خط کد CSS وقتی موس بر روی tr که تگ هر سطر هست توی جدول نویسی بره بک گراند اون المان یعنی tr رنگش عوض میشه به این کدی که اینجا زدیم.
تغییر رنگ هر سطر بصورت هوشمند یک در میان
توضیحش سخته ! بهش میگیم گورخری ! یعنی یه خط یه رنگه و خط بعدی یه رنگ دیگه هستش ! حالا برای اینکه ما بخوایم بیایم این قابلیت رو درست کنیم مجبوریم به تک تک المان های سطر کد CSS بنویسیم در حالیکه مسخره بازی هستش ! چرا که نمیدونیم ممکنه یه جدول ۱۰ سطر باشه یکی ۳ سطر و یکی دیگه ۵۰ خط ! و ما نمیتونیم بیایم واسه تک تک سطر های جدول این کد رو بزنیم . میایم از قابلیت بچه ها یا همون child توی CSS استفاده می کنیم . میتونیم انتخاب کنیم برای این قسمت که این child رو قراره ما چه شکلی سلکت کنیم !؟ بر اساس عدد فرد و زوج . یعنی اگر سطر ما اولین بود میشه فرد ! دومی زوج و سومی تا انتها . مرورگر هم میاد بر اساس این سلکتور ما تمام سطرها رو رنگ میکنه و کدمون رو اجرا میکنه روشون . مثال زیر رو ببینین :
tr:nth-child(even) {background-color: #f2f2f2;}
