در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

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

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

نویسنده : ارسطو عباسی

منبع : انجمن تخصصی فناوری اطلاعات ایران

هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

#آموزش_گام_به_گام_css #آموزش_css #آموزش_سی_اس_اس #آموزش_مقدماتی_css
عنوان
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 چیست؟ رایگان
زمان و قیمت کل 0″ 0
1 نظر
MEHRAN NASR

موکاچوم

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره پاییزه می تونی امروز ارزونتر از فردا خرید کنی ....