جدول چیست؟ چطور می توانیم جدول ها را زیباتر طراحی کنیم؟ منظور از استایل دهی به جدول ها چیست؟ در این جلسه قصد داریم به جدول ها در CSS بپردازیم و نحوه ی استایل دهی آنها را با هم یاد بگیریم پس با ما همراه باشید.

از آنجایی که جلسات آموزشی ما با هدف خاصی پشت سر هم قرار داده شده اند, در صورتی که هنوز  جلسه 15 از آموزش رایگان CSS  را مطالعه نکرده اید از لینک قرار داده شده, استفاده کنید و ابتدا این جلسه را مطالعه کنید.

جدول ها در HTML

در جلسه ی پنجم از آموزش HTML در مورد جدول ها و به طور مشخص در مورد ایجاد جدول ها صحبت کردیم. با استفاده از HTML نیز میتوان به جدول ها استایل دهی کرد اما CSS امکانات گسترده تری را در اختیار ما قرار داده است. پس با HTML میتوان یک جدول ایجاد و با CSS به طراحی و زیباتر کردن آن اقدام کرد. اما این استایل دهی به چه صورت انجام می گیرد؟

قبل از اینکه ادامه ی این جلسه را مطالعه کنید پیشنهاد می کنیم بار دیگر نگاهی به جلسه پنجم از آموزش HTML بیندازید و نحوه ی ایجاد یک جدول را مرور کنید.

ویژگی ها

ویژگی هایی که در استایل دهی جدول ها در CSS به ما کمک می کنند و در ادامه ی این جلسه قصد داریم به معرفی هر کدام بپردازیم در جدول زیر آمده اند. به نظر شما این جدول چطور میتواند بهتر استایل دهی شود؟

در آخر این آموزش شما قطعا می توانید جدولی بهتر از آنچه ما طراحی کرده ایم طراحی و استایل دهی کنید.

Border جدول ها

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

مثال؛

<style>
table {
border: 1px solid blue;
background: aliceblue;
}
th, td {
border: 1px solid lightblue;
padding: 10px;
}
</style>

خاصیت border-collapse

در مثال قبل دیدیم که به طور پیش فرض دو خط دور جدول کشیده می شود. برای اینکه این دوخط را به یک خط تبدیل کنیم باید از خاصیت border-collapse استفاده کنیم. مقادیری که این خاصیت می تواند دریافت کند در زیر آمده است؛

•  collapse
•  seperate

خاصیت collapse خط های جدول را به یک خط تبدیل می کند برای مثال نمونه جدول مثال قبل را با ویژگی collapse در زیر می بینید؛

table {
border: 1px solid blue;
background: aliceblue;
border-collapse: collapse;
}

🙋‍♀️خب حالا ویژگی seperate چه کاری انجام میدهد؟

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

خاصیت Text-Align

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

•  left برای چپ چین
•  center برای وسط چین
•  right برای راست چین

خاصیت vertical-align

خاصیت vertical-align نیز مانند خاصیت Text-Align برای تراز کردن متن موجود در جدول مورد استفاده قرار می گیرد. با این تفاوت که متن را به صورت عمودی تراز می کند.

خاصیت vertical-align می تواند سه مقدار زیر را دریافت کند؛

•  top
•  bottom
•  middle

مثال؛

table {
border: 1px solid blue ;
background: aliceblue;
border-collapse: collapse;
}
th, td {
border: 1px solid lightblue;
padding: 10px;
height: 60px;
width: 100px;
text-align: right;
vertical-align: bottom;
}

همانطور که در تصویر می بینید طبق کد نوشته شده متن سلول ها در سمت راست و در پایین سلول قرار گرفته است.

نکته؛ دقت کنید که برای اعمال دو خاصیت vertical-align و text-align لازم است که سلول های جدول فضای خالی برای ایجاد تغییرات را داشته باشند. یعنی ابتدا باید با استفاده از سایر خاصیت ها ابعاد سلول ها را بزرگ کنیم تا این تغییرات به خوبی نشان داده شوند.

padding در جدول

قطعا اگر محتوای سلول به دیواره های آن چسبیده باشد خیلی جدول جالبی نخواهیم داشت. خاصیت padding کمک می کند تا فضای بیشتری برای سلول ها تعریف کنیم.یعنی برای محتوا حاشیه ی داخلی تعریف کنیم.

th, td {
border: 1px solid lightblue;
text-align: center;
padding: 10px 30px;
}

ویژگی hover

ویژگی hover یکی از جذاب ترین ویژگی هایی است که CSS در اختیار ما قرار داده. با استفاده از این ویژگی میتوانیم تعریف کنیم که وقتی موس روی یک عنصر قرار گرفت, رنگ عنصر یا پس زمینه ی آن چه تغییری کند.

<style>
th:hover, td:hover {
background: #2395af;
color: #fff;
}
</style>

ویژگی nth-child

این ویژگی به ما این امکان را می دهد تا فرزندان یک عنصر را بر اساس ترتیبشان انتخاب کنیم. یکی از جذاب ترین استفاده ها از این ویژگی انتخاب آیتم های زوج و فرد از بین فرزندان یک عنصر است.
از این خاصیت زمانی استفاده می شود که میخواهیم ردیف های فرد یا زوج دارای رنگ پس زمینه ی مجزا باشند یا موارد مشابه این؛

<style>
thead tr {
background: #608990;
color: #fff;
}
tfoot {
background: #989898;
}
tbody tr:nth-child(odd) {
background: #e0fbff;
}
</style>

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

راهنمایی: برای استایل دهی عناصر از ویژگی nth-child استفاده کنید.

در پایان

در این جلسه با استایل دهی جدول ها آشنا شدیم. اگر نکته ای وجود دارد که متوجه آن نشده اید یا سوالی دارید, در بخش نظرات از ما بپرسید. ما در سریع ترین زمان به سوال ها و نظرات شما پاسخ خواهیم داد.