آموزش نحوه کار با جداول یا Tables در CSS

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

آموزش نحوه کار با جداول یا Tables در CSS

Free-Learn

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

در این جلسه از سری آموزش های قدم به قدم زبان CSS میخواهیم با جدول ها در این زبان کار کنیم، و یاد بگیریم که چگونه میتوانیم به جدول استایل داد و یا با استفاده از یکسری ویژگی آن را زیبا و جذاب کرد.

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

ولی زبان HTML بخودی خود نمیتونه و این قدرتو نداره بخواد استایل هایی که زبان HTML میده به جدول اونم به جدول ها بده، نکه در کل نتونه هیچ استایلی بده! نه ، ولی به اندازه و قدرت CSS نمیتونه اینکارو کنه.

پس در اینجا CSS میاد به کمک ما که بتونیم با استفاده از این زبان استایل های خاص و مورد نیازمون رو به جداول ها بدیم و اونارو جذاب و زیباتر کنیم.

نمونه جدول ایجاد شده در HTML

آموزش نحوه کار با جداول یا Tables در CSS

نمونه جدول استایل دهی شده در CSS

آموزش نحوه کار با جداول یا Tables در CSS

Free-Learn

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

در این جلسه و در ادامه میخواهیم با ویژگی های زیر که مرتبط با جدول ها هستند کار کنیم و یاد بگیریم که چجوری میتونیم یک جدول را استایل دهی کنیم و ظاهرش رو جذاب و زیبا کنیم.

  • border : برای کشیدن خط به دور لبه های جدول
  • border-collapse : برای تک خطی کردن خط دور لبه های جدول
  • Text-align : برای ترازبندی متن سلول های جدول
  • Vertical-align : برای تنظیم تراز متن بصورت عمودی
  • Padding : برای ایجاد فاصله بین متن و بدنه سلول ها
  • hover : برای وقتی ماوس میره رو سلول های جدول
  • nth-child() : تنظیم سطرهای زوج و فرد

Free-Learn

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

آموزش کار با ویژگی border رو در جلسات قبلی بطور کامل یاد گرفتیم که در صورت تمایل میتوانید این آموزش را از طریق لینک زیر مشاهده / مطالعه نمایید.

آموزش کار با حاشیه ها یا Borders در CSS را مشاهده نمایید.

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

امتحان کنید

Free-Learn

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

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

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

امتحان کنید

Free-Learn

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

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

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

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

امتحان کنید

Free-Learn

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

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

امتحان کنید

Free-Learn

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

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

آموزش کار با ویژگی Padding در CSS را مشاهده نمایید.

مثال :

امتحان کنید

Free-Learn

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

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

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

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

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

امتحان کنید

Free-Learn

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

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

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

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

امتحان کنید

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

امتحان کنید

Free-Learn

مثال های بیشتر از جدول ها در CSS

مثال شماره ۱ :

امتحان کنید

Free-Learn

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