آموزش کار با جداول در CSS
آموزش جدول ها در CSS
فهرست عناوین
در این جلسه از سری آموزش های قدم به قدم زبان CSS میخواهیم با جدول ها در این زبان کار کنیم، و یاد بگیریم که چگونه میتوانیم به جدول استایل داد و یا با استفاده از یکسری ویژگی آن را زیبا و جذاب کرد.
همونطور که میدونید ما با استفاده از زبان HTML میتونیم خوده جدول را ایجاد کنیم، یعنی در واقع ایجاد کننده ساختار و بدنه اصلی یک جدول زبان HTML می باشد.
ولی زبان HTML بخودی خود نمیتونه و این قدرتو نداره بخواد استایل هایی که زبان HTML میده به جدول اونم به جدول ها بده، نکه در کل نتونه هیچ استایلی بده! نه ، ولی به اندازه و قدرت CSS نمیتونه اینکارو کنه.
پس در اینجا CSS میاد به کمک ما که بتونیم با استفاده از این زبان استایل های خاص و مورد نیازمون رو به جداول ها بدیم و اونارو جذاب و زیباتر کنیم.
نمونه جدول ایجاد شده در HTML
نمونه جدول استایل دهی شده در CSS
نحوه کار با جداول یا Tables در CSS
در این جلسه و در ادامه میخواهیم با ویژگی های زیر که مرتبط با جدول ها هستند کار کنیم و یاد بگیریم که چجوری میتونیم یک جدول را استایل دهی کنیم و ظاهرش رو جذاب و زیبا کنیم.
- border : برای کشیدن خط به دور لبه های جدول
- border-collapse : برای تک خطی کردن خط دور لبه های جدول
- Text-align : برای ترازبندی متن سلول های جدول
- Vertical-align : برای تنظیم تراز متن بصورت عمودی
- Padding : برای ایجاد فاصله بین متن و بدنه سلول ها
- hover : برای وقتی ماوس میره رو سلول های جدول
- nth-child() : تنظیم سطرهای زوج و فرد
ایجاد خط به دور لبه های جدول با Border
آموزش کار با ویژگی border
رو در جلسات قبلی بطور کامل یاد گرفتیم که در صورت تمایل میتوانید این آموزش را از طریق لینک زیر مشاهده / مطالعه نمایید.
حال در جدول ها میخوایم با استفاده از این ویژگی یک خط به دور لبه های جدول یا سلول های جدول بکشیم، که نحوه استفاده از این ویژگی در جدول ها بصورت زیر می باشد.
1 2 3 4 5 6 7 |
<style> table,th,td{ border:2px solid black; } </style> |
تک خطی کردن خط دور لبه جدول با ویژگی Border-Collapse
اگه به مثال قبلی توجه کرده باشید، خطی که به دور لبه های جدول ایجاد می شود بصورت پیش فرض ۲ خطه است، یعنی ۲ خط در کنار هم به دور لبه های جدول و سلول ها کشیده می شود.
حال ما میخوایم با استفاده از ویژگی border-collapse
این ۲ خط را به یک ۱ خط تبدیل کنیم و عملا فقط یک خط به دور لبه های جدول و سلول ها کشیده شود.
1 2 3 4 5 6 7 8 |
<style> table{ width:100%; border-collapse:collapse; } </style> |
تنظیم ترازبندی سلول ها بصورت افقی با Text-Align
با استفاده از ویژگی text-align ما میتونیم مشخص کنیم که ترازبندی متن موجود در سلول های جدول به چه صورت باشد، یعنی مثلا در وسط قرار بگیرند یا در سمت راست و یا چپ.
بصورت پیش فرض تراز تمامی متن های ایجاد شده در HTML در سمت چپ می باشد.
حال ما با استفاده از ویژگی text-align
میتونیم تراز متن ها را بصورت افقی مشخص کنیم، که در مثال زیر میتوانید نحوه استفاده از این ویژگی را در جدول ها مشاهده نمایید.
1 2 3 4 5 6 7 |
<style> td,th{ text-align:center; } </style> |
تنظیم ترازبندی سلول های بصورت عمودی با Vertical-Align
با استفاده از ویژگی Vertical-Align
میتوان تراز متن را بصورت عمودی مشخص کرد، لطفا به مثال زیر و نحوه استفاده از این ویژگی در جدول ها در CSS توجه نمایید.
1 2 3 4 5 6 7 8 9 |
<style> td{ height: 50px; text-align:center; vertical-align:bottom; } </style> |
ایجاد فضای خالی بین محتوای سلول و بدنه سلول با ویژگی Padding
بنده آموزش کار با ویژگی Padding
را نیز در جلسات قبلی بطور کامل ارائه دادم که در صورت تمایل میتوانید این آموزش را از طریق لینک زیر مشاهده نمایید.
مثال :
1 2 3 4 5 6 7 8 |
<style> td{ text-align:center; padding:10px; } </style> |
تنظیم استایل برای وقتی که ماوس میره روی جدول با ویژگی hover
یکی از ویژگی های جذابی که در CSS داریم همین Hover می باشد، این ویژگی موقعی عمل میکند که ماوس بروی یک عنصر قرار بگیرد.
یعنی ما میتونیم تعریف کنیم که وقتی مثلا ماوس رفت روی فلان تگ ، رنگ پس زمینش یا رنگ متنش یا هر کاردیگه که بخوایم روی اون عنصر انجام بگیره.
حال در این جلسه یعنی ( نحوه کار با جداول یا Tables در CSS ) ما با استفاده از این ویژگی میخوایم کاری کنیم که وقتی ماوس روی سلول های جدول ها رفت رنگ زمینشون آبی بشه.
(در مثال زیر وقتی ماوس میره رو سلول های جدول رنگ زمینشون عوض میشه)
1 2 3 4 5 6 7 8 |
<style> td:hover{ background-color:#2196F3; color:#fff; } </style> |
تنظیم سطرهای رنگی یک در میان متفاوت با ویژگی nth-child
یکی دیگر از جذابترین ویژگی های CSS برای جدول ها ، ویژگی nth-child می باشد، یعنی اینکه انتخاب کن فرزند فلان را از یک عنصر و سپس ویژگی های مورد نظرمو روش اعمال کن.
حال در جدول ها ما میتونیم بگیم مثلا سطرهای زوج رنگ زمینه شون فلان رنگ باشه و سطرهای فرد فلان رنگ، یا دیگر ویژگی هایی که ما میتونیم روشون اعمال کنیم.
مثال شماره ۱ : تغییر رنگ زمینه سطرهای زوج (even)
1 2 3 4 5 6 7 8 |
<style> tr:nth-child(even){ background-color:#F44336; color:#fff; } </style> |
مثال شماره ۲ : تغییر رنگ زمینه سطرهای فرد (odd)
1 2 3 4 5 6 7 8 |
<style> tr:nth-child(odd){ background-color:#F44336; color:#fff; } </style> |
دوستان خسته نباشید به پایان این جلسه ( نحوه کار با جداول یا Tables در CSS ) رسیدیم، امیدوارم که هیچ مشکلی در این جلسه نداشته باشید.
بیشتر بخوانیم:
دیدگاهتان را بنویسید