این آموزش در تاریخ ۱۴۰۲/۰۶/۲۶ آپدیت شده است.
آموزش نحوه کار با جداول یا Tables در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه کار با جداول یا Tables در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
نحوه کار با جداول یا Tables در CSS
همونطور که میدونید ما با استفاده از تگ Table در HTML میتونیم بدنه یا اسکلت جدول رو ایجاد کنیم، حال میخواهیم با استفاده از CSS به جدول مون استایل بدیم.
در ادامه میخواهیم با ویژگی های زیر که مرتبط با جدول ها هستند کار کنیم و یاد بگیریم که چجوری میتونیم یک جدول را استایل دهی کنیم و ظاهرش رو جذاب و زیبا کنیم.
- Width : مشخص کردن اندازه عرض جدول
- Border : خط دور لبه های جدول
- Border-Collapse : تک خطی کردن خط دور لبه های جدول
- Text-Align : ترازبندی افقی متن داخل سلول ها
- Vertical-Align : ترازبندی عمودی متن داخل سلول ها
- Padding : فاصله بین محتوا و بدنه سلول ها
Free-Learn
مشخص کردن اندازه عرض جدول
یک جدول بصورت پیش فرض خب اندازه خاصی نداره، ولی خب ما میتونیم با استفاده از ویژگی width برای جدول مون اندازه دلخواه مشخص کنیم.
مثال شماره ۱ : تمام عرض کردن جدول
در مثال زیر اندازه عرض جدول مون ۱۰۰درصد میشه، ولی خب هنوز جدول مون استایل خاصی نداره و باید در ادامه با ویژگی های بیشتری آشنا شویم.
|
1 2 3 4 5 6 7 |
<style> table{ width:100%; } </style> |
Free-Learn
خط دور لبه های جدول
آموزش کار با ویژگی border رو در جلسات قبلی بطور کامل یاد گرفتیم که در صورت تمایل میتوانید این آموزش را از طریق لینک زیر مشاهده / مطالعه نمایید.
آموزش کار با حاشیه ها یا Borders در CSS را مشاهده نمایید.
حال در جدول ها میخوایم با استفاده از این ویژگی یک خط به دور لبه های جدول یا سلول های جدول بکشیم، که نحوه استفاده از این ویژگی در جدول ها بصورت زیر می باشد.
|
1 2 3 |
table,th,td{ border:2px solid black; } |
Free-Learn
تک خطی کردن خط دور لبه های جدول
اگه به مثال قبلی توجه کرده باشید، خطی که به دور لبه های جدول ایجاد می شود بصورت پیش فرض ۲ خطه است، یعنی ۱ خط به دور بدنه جدول و ۱ خطم به دور لبه سلول ها کشیده می شود.
حال ما میخوایم با استفاده از ویژگی border-collapse این ۲ خط را به یک ۱ خط تبدیل کنیم ( یعنی دیگه کلا ۱خط به دور هم جدول هم سلول های جدول )
|
1 2 3 4 |
table{ width:100%; border-collapse:collapse; } |
Free-Learn
ترازبندی افقی متن داخل سلول ها
با استفاده از ویژگی text-align میتونیم مشخص کنیم که ترازبندی متن موجود در سلول های جدول به چه صورت باشد، یعنی مثلا در وسط قرار بگیرند یا در سمت راست و یا چپ.
|
1 2 3 |
td{ text-align:center; } |
Free-Learn
ترازبندی عمودی متن داخل سلول ها
با استفاده از ویژگی Vertical-Align میتوان تراز محتوای داخل سلول هارو بصورت عمودی مشخص کرد.
|
1 2 3 4 |
td{ height:60px; vertical-align:bottom; } |
Free-Learn
فاصله بین محتوا و بدنه سلول ها
بنده آموزش کار با ویژگی Padding را نیز در جلسات قبلی بطور کامل ارائه دادم که در صورت تمایل میتوانید این آموزش را از طریق لینک زیر مشاهده نمایید.
آموزش کار با ویژگی Padding در CSS را مشاهده نمایید.
مثال : ایجاد یک فضای خالی بین محتوا و دیواره سلول های جدول
|
1 2 3 |
td{ padding:15px; } |
Free-Learn
مثال های بیشتر
مثال شماره ۱ : وقتی ماوس میره روی خوده سلول ها، رنگ زمینه شون تغییر میکنه
|
1 2 3 4 |
td:hover{ background-color:#0f8693; color:#fff; } |
مثال شماره ۲ : استایل دادن به سطرهای فرد و زوج جدول
- tr:nth-child(odd) : سطرهای فرد
- tr:nth-child(even) : سطرهای زوج
|
1 2 3 4 5 6 7 8 9 10 |
/* برای سطرهای فرد */ table tr:nth-child(odd){ background-color:#f2f2f2; } /* برای سطرهای زوج */ table tr:nth-child(even){ background-color:#8AC007; color:#fff; } |
مثال شماره ۳ : استایل ۱
|
1 2 3 |
tr:nth-child(even){ background-color: #f2f2f2; } |
مثال شماره ۴ : استایل ۲
|
1 2 3 4 5 6 7 8 9 |
<style> th,td{ padding: 8px; text-align: center; border-bottom: 2px solid #ddd; } </style> |
مثال شماره ۵ : استایل ۳
|
1 2 3 |
tr:nth-child(even){ background-color: #f2f2f2; } |
مثال شماره ۶ : واکنش گرا کردن جدول
خیلی راحت کافیه جدول رو بزاریم داخل یه تگ DIV و به همین تگ DIV ویژگی overflow-x بدیم، یا هم براش کلاس تعریف کنیم بعدش به کلاس overflow-x بدیم فرقی نمیکنه.
|
1 2 3 4 5 |
<div style="overflow-x:auto;"> <table> ........ </table> </div> |
خب دوستان خسته نباشید به پایان این جلسه ( نحوه کار با جداول یا Tables در CSS ) رسیدیم، امیدوارم که هیچ مشکلی در این جلسه نداشته باشید.
