جستجو برای:
  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت
 
  • 02144824488
  • info@myhamyar.com
  • بلاگ
  • تماس با ما
  • درباره ما
همیارِمَن  | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیک
دسترسی سریع
  • پشتیبان سایت
0

ورود و ثبت نام

  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت

بلاگ

همیارِمَن | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیکبلاگدوره های رایگانآموزش کار با جداول در CSS

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

24 شهریور 1400
ارسال شده توسط همیار من
دوره های رایگان
500 بازدید
css

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

فهرست عناوین

  • آموزش جدول ها در CSS
  • نحوه کار با جداول یا Tables در CSS
  • ایجاد خط به دور لبه های جدول با Border
  • تک خطی کردن خط دور لبه جدول با ویژگی Border-Collapse
  • تنظیم ترازبندی سلول ها بصورت افقی با Text-Align
  • تنظیم ترازبندی سلول های بصورت عمودی با Vertical-Align
  • ایجاد فضای خالی بین محتوای سلول و بدنه سلول با ویژگی Padding
  • تنظیم استایل برای وقتی که ماوس میره روی جدول با ویژگی hover
  • تنظیم سطرهای رنگی یک در میان متفاوت با ویژگی nth-child

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

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

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

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

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

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

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

آموزش نحوه کار با جداول یا Tables در 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 ) رسیدیم، امیدوارم که هیچ مشکلی در این جلسه نداشته باشید.

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

  • برترین افزونه های جدول ساز وردپرس
  • آموزش رایگان HTML مقدماتی تا پیشرفته
  • قالب بندی متون در HTML
  • UMT چیست؟ راهنمای کامل برای استفاده از UTM
اشتراک گذاری:
برچسب ها: CSSTablesآموزشآموزش CSSآموزش css pdfآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش CSS مقدماتیآموزش css و htmlآموزش css3آموزش css3 pdfآموزش css3 پیشرفتهآموزش css3 رایگانآموزش کار با جداول در CSS
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

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

لوگو ادمین سایت
آموزش انیمیشن‌سازی با CSS
در این قسمت از آموزش انیمشن‌سازی در CSS قصد داریم به طور کلی به آموزش...
همیارمن
نحوه اضافه کردن کد PHP در وردپرس
اگر به دنبال اضافه کردن کد php در وردپرس به صفحات در وردپرس هستید به...
دوره رایگان طراحی فروشگاه اینترنتی!
در حال آپدیت... امروزه شاهد سایت های فروشگاهی بسیاری هستیم. افراد بسیاری وجود دارند که...
آموزش ایجاد لیست کشویی وابسته به هم در HTML
در این مقاله در همیار من قصد داریم یکی از مطالب بسیار مهم و کاربردی...
ترفندهای عکاسی حرفه‌ای با موبایل (ساده و بدون هزینه!)
ساده و بدون هزینه ترفند های عکاسی حرفه ای با موبایل را یاد بگیرید
یکی از وسایلی که امروزه تقریبا با همه ما همراه شده است و ساعت‌ها آن...
لوگو ادمین سایت
DOM چیست و چه کاربردی دارد؟
DOM عبارتی است که بیشتر آنرا در زبان جاوا اسکریپت می‌شنویم. در این مقاله در...

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

جستجو در همیارمَن
جستجو برای:
  • آموزش مجازی
  • اخبار سینما
  • افزونه وردپرس
    • آموزش افزونه وردپرس
  • بازی
  • پیشنهادی
  • دسته‌بندی نشده
  • دوره های رایگان
  • سریال
  • فناوری
  • فیلم
    • اکشن
    • تاریخی
    • ترسناک
    • جنایی
    • کمدی
    • مستند
    • معمایی
    • هیجان انگیز
    • ورزشی
  • قالب HTML
  • قالب وردپرس
    • قالب خبری و وبلاگ
    • قالب شرکتی
    • قالب نمونه کار
    • قالب های چند منظوره
  • مقالات
    • بازایابی دیجیتال
    • برنامه نویسی
    • تولید و بازاریابی محتوا
    • طراحی و گرافیک
آخرین مطالب سایت
  • آموزش انیمیشن‌سازی با CSS
  • بهترین فیلم های اسلشر تاریخ سینما
  • نقد فیلم Cure – یک فیلم هیپنوتیزم کننده
  • نقد فیلم یتیم Orphan: First Kill
  • کسب درآمد از آموزش آنلاین چگونه است؟
برچسب‌ها
CSS HTML آموزش آموزش CSS آموزش css3 آموزش css3 pdf آموزش css3 رایگان آموزش css3 پیشرفته آموزش css pdf آموزش css حرفه ای آموزش css و html آموزش css پروژه محور آموزش css پیشرفته آموزش افزونه وردپرس آموزش تولید محتوا آموزش رایگان html همیارمن آموزش رایگان زبان html آموزش وب سایت افزونه وردپرس بازاریابی بازاریابی دیجیتال بازی بررسی بررسی بازی تولید محتوا دانلود افزونه وردپرس دانلود قالب وردپرس دوره دوره رایگان دیجیتال مارکتینگ سایت فناوری فیلم قالب قالب سایت قالب وب سایت قالب وردپرس نقد نقد بازی نقد فیلم نقد و بررسی نقد و بررسی بازی نقد و بررسی فیلم وردپرس ووکامرس

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت