درخواست های ارتباط
جستجو
لیست دوستان من
صندوق پیام
همه را دیدم
  • در حال دریافت لیست پیام ها
صندوق پیام
رویدادها
همه را دیدم
  • در حال دریافت لیست رویدادها
همه رویدادهای من
تخفیف های وب سایت
همه تخفیف ها

عضویت در

کانال تلگرام

توسینسو

اطلاعات مطلب
مدرس/نویسنده
ارسطو  عباسی
امتیاز: 25051
رتبه:26
60
85
8
229
ارسطو هستم، نویسنده، وبلاگ‌نویس و توسعه‌دهنده وبسایت: Arastoo.net پروفایل کاربر

آموزش گام به گام CSS قسمت نهم: جداول

تاریخ 32 ماه قبل
نظرات 1
بازدیدها 200
در قسمت قبلی از این سری آموزش به استایل های موجود برای لینک ها و لیست ها پرداختیم. در این جلسه می خواهیم به چگونگی استایل دادن به جداول بپردازیم. همانطور که در سری آموزش HTML مشاهده کردید، جداول از مهمترین عنصرهای یک صفحه وب است. می توانید توسط این عنصر داده های مورد نظرتان را به صورت مرتب جدول بندی کنید. تگ های اصلی این عنصر table , tr, th, td است.
Table Borders: در حالت کلی یک جدول باید دارای حاشیه باشد، اما با ساخت جدول در HTML خام هیچگونه حاشیه ای وجود ندارد. توسط این استایل که قبلا با آن آشنا شده اید می توانید خیلی راحت حاشیه جدولتان را تولید کنید.
table , th, td
{
	border:solid 1px ;
}
به موقعیت خطوط حاشیه توجه کنید. اگر توجه کنید در این حالت چندین حاشیه داخل هم قرار گرفته است که کمی محیط داخل جدول را شلوغ کرده است. برای جلوگیری از این حالت باید استایل border-collapse: collapse; را به table نسبت دهید. به مثال زیر توجه کنید.
table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}
Table Color: خیلی آسان می شود رنگ های یک جدول چه پشت زمینه چه رنگ قلم را کنترل کنید. اگر می خواهید کل جدول دارای یک پشت زمینه و رنگ قلم باشد می توانید این خاصیت ها را به المنت table نسبت دهید. به مثال زیر توجه کنید:
table
{
	background: #ff00ff;
	color:#ffff00;
}
Striped Tables: معنی تحت الفظی این آیتم جداول نواری است. اما برای آنکه بهتر متوجه شوید منظور چیست باید خدمتتون بگم که بعضی اوقات مثلا در برنامه های درسی برای درست خواندن نوشته سطرها رنگ سطر اول و دوم با هم متفاوت است. تصویر زیر می تواند بهتر منظورم را برساند:
آموزش گام به گام CSS قسمت نهم: جداول

برای اینکار کافی است از آرگومن nth-child() برای المنت tr استفاده کنید. به مثال زیر توجه کنید:
tr:nth-child(even)
{
background-color: #f2f2f2
}
خاصیت hover: یکی از جالبترین امکانات CSS مدیریت رویدادهای ماوس است، که در قسمت لینک ها با آن نیز آشنا شدید. می توانید در جداول از این خاصیت زمانی بهره ببرید که با حرکت ماوس روی هر سطر یکی از آنان تغییر رنگ پیدا کند.
tr:hover 
{
background-color: #f5f5f5
}
overflow-x:auto;: در جلسه های مربوط به درس HTML گفتیم که اگر بخواهیم چندین المنت را به صورت همزمان استایل دهی یا کنترل کنیم باید آنها را داخل یک بلاک یا اصطلاحا div قرار دهیم. گاهی اوقات نیز زمانی استفاده می شود که استایل مورد نظر برای یک المنت وجود ندارد اما برای بلاک ها می توان استفاده شود. برای مثال استایل overflow-x:auto; برای table موجود نیست اما می شود table را داخل بلاکی قرار داد و آن خاصیت را به بلاک نسبت دهید.
اگر زمانی مقادیر جدول از طرف عرض صفحه خارج شد چگونه می توان به آن دسترسی داشت؟ کافی است استایل overflow-x:auto; را به بلاک نسبت دهید. به مثال زیر توجه کنید:
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
نکته مهم: از آنجا که تعداد استایل ها برای هر المنت بسیار زیاد است به همین خاطر متاسفانه نمی توانیم تمام آن ها را برای المنت ها بررسی کنیم. در این مثال خودتان سعی کنید که از خاصیت های padding , margin بهره ببرید.

نویسنده : ارسطو عباسی
منبع : انجمن تخصصی فناوری اطلاعات ایران
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

برچسب ها
ردیف عنوان
1 آموزش گام به گام CSS قسمت اول : معرفی و آشنایی با نوشتن دستورات و کامنت
2 آموزش گام به گام CSS قسمت دوم: شیوه های استفاده از CSS
3 آموزش گام به گام CSS قسمت سوم : رنگ ها و پشت زمینه ها
4 آموزش گام به گام CSS قسمت چهارم: حاشیه ها
5 آموزش گام به گام CSS قسمت پنجم: Margin , Padding , height , Width
6 آموزش گام به گام CSS قسمت ششم: متون
7 آموزش گام به گام CSS قسمت هفتم : فونت‌ و قالب‌های متنی
8 آموزش گام به گام CSS قسمت هشتم: لینک ها و لیست ها
9 آموزش گام به گام CSS قسمت نهم: جداول
10 آموزش گام به گام CSS قسمت دهم: Display و Max-width
11 آموزش گام به گام CSS قسمت یازدهم: موقعیت ها , Overflow
12 آموزش گام به گام CSS قسمت دوازدهم: جهت ها, تراز ها و غلظت
13 آموزش گام به گام CSS قسمت سیزدهم: شفافیت
14 آموزش گام بە گام CSS: قسمت چهاردهم: واکنشگرایی چیست؟
15 آموزش گام بە گام CSS: قسمت پانزدهم: Viewport چیست؟
دوره مجموعه کل دوره
مطالب مرتبط

در حال دریافت اطلاعات

نظرات

برای ارسال نظر ابتدا به سایت وارد شوید