آموزش کار با جداول در 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 رو در جلسات قبلی بطور کامل یاد گرفتیم که در صورت تمایل میتوانید این آموزش را از طریق لینک زیر مشاهده / مطالعه نمایید.

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

<style>
 
table,th,td{
 border:2px solid black;
}
 
</style>

<style>

table,th,td{

border:2px solid black;

}

</style>

تک خطی کردن خط دور لبه جدول با ویژگی Border-Collapse

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

حال ما میخوایم با استفاده از ویژگی border-collapse این ۲ خط را به یک ۱ خط تبدیل کنیم و عملا فقط یک خط به دور لبه های جدول و سلول ها کشیده شود.

<style>

table{
 width:100%;
 border-collapse:collapse;
}

</style>

<style>

table{

width:100%;

border-collapse:collapse;

}

</style>

تنظیم ترازبندی سلول ها بصورت افقی با Text-Align

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

بصورت پیش فرض تراز تمامی متن های ایجاد شده در HTML در سمت چپ می باشد.

حال ما با استفاده از ویژگی text-align میتونیم تراز متن ها را بصورت افقی مشخص کنیم، که در مثال زیر میتوانید نحوه استفاده از این ویژگی را در جدول ها مشاهده نمایید.

<style>

td,th{
 text-align:center;
}

</style>

<style>

td,th{

text-align:center;

}

</style>

تنظیم ترازبندی سلول های بصورت عمودی با Vertical-Align

با استفاده از ویژگی Vertical-Align میتوان تراز متن را بصورت عمودی مشخص کرد، لطفا به مثال زیر و نحوه استفاده از این ویژگی در جدول ها در CSS توجه نمایید.

<style>

td{
 height: 50px;
 text-align:center;
 vertical-align:bottom;
}

</style>

<style>

td{

height: 50px;

text-align:center;

vertical-align:bottom;

}

</style>

ایجاد فضای خالی بین محتوای سلول و بدنه سلول با ویژگی Padding

بنده آموزش کار با ویژگی Padding را نیز در جلسات قبلی بطور کامل ارائه دادم که در صورت تمایل میتوانید این آموزش را از طریق لینک زیر مشاهده نمایید.

مثال :

<style>

td{
 text-align:center;
 padding:10px;
}

</style>

<style>

td{

text-align:center;

padding:10px;

}

</style>

تنظیم استایل برای وقتی که ماوس میره روی جدول با ویژگی hover

یکی از ویژگی های جذابی که در CSS داریم همین Hover می باشد، این ویژگی موقعی عمل میکند که ماوس بروی یک عنصر قرار بگیرد.

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

حال در این جلسه یعنی ( نحوه کار با جداول یا Tables در CSS ) ما با استفاده از این ویژگی میخوایم کاری کنیم که وقتی ماوس روی سلول های جدول ها رفت رنگ زمینشون آبی بشه.

(در مثال زیر وقتی ماوس میره رو سلول های جدول رنگ زمینشون عوض میشه)

<style>

td:hover{
 background-color:#2196F3;
 color:#fff;
}

</style>

<style>

td:hover{

background-color:#2196F3;

color:#fff;

}

</style>

تنظیم سطرهای رنگی یک در میان متفاوت با ویژگی nth-child

یکی دیگر از جذابترین ویژگی های CSS برای جدول ها ، ویژگی nth-child می باشد، یعنی اینکه انتخاب کن فرزند فلان را از یک عنصر و سپس ویژگی های مورد نظرمو روش اعمال کن.

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

مثال شماره ۱ : تغییر رنگ زمینه سطرهای زوج (even)

<style>

tr:nth-child(even){
 background-color:#F44336;
 color:#fff;
}

</style>

<style>

tr:nth-child(even){

background-color:#F44336;

color:#fff;

}

</style>

مثال شماره ۲ : تغییر رنگ زمینه سطرهای فرد (odd)

<style>

tr:nth-child(odd){
 background-color:#F44336;
 color:#fff;
}

</style>

<style>

tr:nth-child(odd){

background-color:#F44336;

color:#fff;

}

</style>

دوستان خسته نباشید به پایان این جلسه ( نحوه کار با جداول یا Tables در CSS ) رسیدیم، امیدوارم که هیچ مشکلی در این جلسه نداشته باشید.

بیشتر بخوانیم:

آموزش کار با جداول در CSS

آموزش جدول ها در CSS

نحوه کار با جداول یا Tables در CSS

ایجاد خط به دور لبه های جدول با Border

تک خطی کردن خط دور لبه جدول با ویژگی Border-Collapse

تنظیم ترازبندی سلول ها بصورت افقی با Text-Align

تنظیم ترازبندی سلول های بصورت عمودی با Vertical-Align

ایجاد فضای خالی بین محتوای سلول و بدنه سلول با ویژگی Padding

تنظیم استایل برای وقتی که ماوس میره روی جدول با ویژگی hover

تنظیم سطرهای رنگی یک در میان متفاوت با ویژگی nth-child

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

آموزش جدول ها در CSS

نحوه کار با جداول یا Tables در CSS

ایجاد خط به دور لبه های جدول با Border

تک خطی کردن خط دور لبه جدول با ویژگی Border-Collapse

تنظیم ترازبندی سلول ها بصورت افقی با Text-Align

تنظیم ترازبندی سلول های بصورت عمودی با Vertical-Align

ایجاد فضای خالی بین محتوای سلول و بدنه سلول با ویژگی Padding

تنظیم استایل برای وقتی که ماوس میره روی جدول با ویژگی hover

تنظیم سطرهای رنگی یک در میان متفاوت با ویژگی nth-child

مطالب زیر را حتما مطالعه کنید

آموزش رایگان HTML مقدماتی تا پیشرفته بخش پاراگراف

UI چیست؟

برترین فریم ورک های جاوا اسکریپت در 2021

آموزش رایگان افزونه فید اینستاگرام

آموزش رایگان کار با لایه ها و پالت Color & Swatches در فتوشاپ

آموزش رایگان و کامل کار با توابع یا Functions در CSS3

دیدگاهتان را بنویسید لغو پاسخ