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

لبه های جدول(Border)

از خصوصیت border برای مشخص کردن لبه های جدول استفاده می شود.

همان طور که می دانید برای ساخت جدول در HTML از تگ <table> استفاده می گردد.

خاصیت border در css

این خواص در CSS به شما اجازه می دهد تا رنگ و سبک یا Style لبه های یک عنصر را مشخص کنید.

زمانی که از خاصیت border استفاده می کنید، توجه داشته باشید که ترتیب مقادیر به صورت زیر خواهد بود:

  1. border-width
  2. border-style
  3. border-color

border:5px solid red

اگر یکی از مقادیر بالا قید نشود مشکلی پیش نخواهد آمد البته همان طور که قبلاً گفته شد خاصیت border-style مورد نیاز است، تنها چیزی که باید رعایت شود ترتیب مقادیر است.

مقادیر خاصیت border-style

none: هیچ لبه ای نمایش داده نمی شود

dotted: لبه ها به صورت نقطه نقطه ای نمایش داده می شود

dashed: لبه ها به صورت خط تیره نمایش داده می شود

solid: لبه ها به صورت خالص و یکپارچه نمایش داده می شود

double: دو لبه نمایش داده می شود

groove: یک لبه سه بعدی گود دار نمایش داده می شود

شاید از این مقاله خوشتون بیاد:  آموزش css جلسه چهارم: تنظیم پشت زمینه در css

ridge: یک لبه سه بعدی برجسته نمایش داده می شود

inset: یک لبه سه بعدی inset نمایش داده می شود

outset: یک لبه سه بعدی outset نمایش داده می شود

حال که با خاصیت border آشنا شدید، در css برای فرمت دهای به جدول باید به صورت زیر عمل کنیم.

فرمت دهی جداول در css

 

 

 

توجه داشته باشید که جدول مثال بالا دو لبه خواهد داشت. این به خاطر این است که هم برای table و هم برای th/td به صورت جداگانه border تنظیم شده است.

اگر می خواهید فقط یک لبه داشته باشید از خاصیت border-collapse استفاده کنید.

یکی کردن Borderها

برای تبدیل لبه های دوخطی به لبه های یک خطی و مجزا از خاصیت border-collapse استفاده می گردد:

فرمت دهی جداول در css

 

 

 

 

 

 

عرض و ارتفاع یک جدول (Width/height )

عرض و ارتفاع یک جدول با خصوصیات Width و height تعریف می شود.

در مثال زیر عرض جدول ۱۰۰% و ارتفاع آن با ۵۰px تنظیم شده است:

table{
width:100%
}

th{
height:50px
}

 تراز بندی متن جدول(Alignment)

در ادامه آموزش فرمت دهی جداول در css ، با خصوصیات text-align و vertical-align که می توان متن داخل یک سلول جدول را تراز بندی کرد آشنا می شویم.

خصوصیت text-align متن را در جهت محور X تنظیم می کند (مثل چپ ، راست یا وسط)

td{
text-align:right
}

Padding یک جدول

برای کنترل فاصله بین لبه ها و متن در جدول می توان از خصوصیت padding استفاده کرد:

td{
padding:15px
}

همانطور که خودنون متوجه شدید، فرمت دهی جداول در css کار اصلا سختی نیست. و با کمی تمرین و ممارست می توانید آن را یاد بگیرید. موفق باشید.

شاید از این مقاله خوشتون بیاد:  چه مواردی باید در تست سایت طراحی شده بررسی شود؟ (بخش اول)


غلامرضا بهشتیان

من غلامرضا بهشتیان، عاشق نوشتن مقاله های مفید در حوزه ی وب هستم. امیدوارم مقالات نوشته شده نظر شما خوانندگان عزیز را جلب نماید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *