آموزش بخش بندی استایل Tables در CSS

استایل Tables در CSS بخشی مهم و کاربردی است. استایل Tables در CSS از نظر طول و عرض و رنگ و ضخامت بخش بندی شده و گزینه مناسب انتخاب می شود.

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

ظاهرسازی زیبا با استایل Tables در  CSS

فرض کنید قرار است جدولی داشته باشید که حاشیه دور آن مشخص باشد، می توانیم اینکار را از طریق css دنبال نماییم. به این ترتیب باید به سراغ خاصیت border برویم و از المان های مشخصی نیز استفاده کنیم. المان های استایل Tables در  CSS در زمینه حاشیه می تواند <table> ، <th> و <td> باشد. در صورتی که بخواهید از دو حاشیه نیز استفاده کنیم این المان ها به دردتان می خورد.و اگر تأکید شما بر روی یک حاشیه است که می بایست به سراغ خاصیت border-collapse بروید که البته بخش بعد این گزینه را به طور دقیق بررسی می کند. استایل Tables در  CSSباید طبق فضای کلی تعیین شود.

می خواهیم یک قطعه کد ساده بنویسیم. نظرتان چیست؟

table,th,td {


border: 1px solid black;


}

در این قطعه کد ما جدولی ساخته ایم که دو حاشیه دارد و 1 Px نیز عرض حاشیه در نظر گرفته شده است، این اعداد قابل تغییر است. استایل Tables در  CSSباید تنظیم عددی صحیحی داشته باشد.

خاصیت border-collapse در استایل Tables در CSS

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

table {

 

border-collapse: collapse;

 

}

 

Table, th, td {

 

Border:1px solid black;

 

}

موضوع دیگری که قطعاً در خصوص استایل Tables در  CSS مورد نیاز است طول و عرض جدول است، به طور کلی باید بدانیم که طول و عرض جدول را با خاصیت های height و width مشخص می کنیم. در نظر داشته باشید که قطعه کد زیر به این صورت است که پهنا 100 درصد و درازا با المان مشخصی همراه است و رقم آن 50px است. امتیازهای استایل Tables در  CSS مشخص هستند.

table, td, th{

 

border: 1px solid black;

 

}

 

table{

 

width: 100%;

 

}

 

th{

 

height: 50px;

 

}

ترازبندی متن استایل Tables در  CSS

متن ها در جدول باید به طور دقیق ترازبندی شود به این ترتیب خاصیت text-align وارد عمل می شود. در نظر داشته باشید که این خاصیت سبب می شود که متن شما راست چین، چپ چین و وسط چین باشد. روند پیش فرض نیز در این مسیر مشخص شده است در ابتدا متن را وسط چین می کند و سپس به سراغ چپ چین می رود که البته می توان این رویه را تغییر داد. اگر می خواهید درجه بندی استایل Tables در  CSS رعایت شود باید در ابتدا بدانیم که کدام جهت برای محتوای شما بهتر است.

یک مثال می زنیم که نوشته ها را به صورت چپ چین منظم می کند.

th {

 

text-align: left;

 

}

حال می خواهیم از ترازبندی های عمودی متن صحبت کنیم برای این کار نیاز به خاصیت vertical-align است که سبب می شود ترازبندی متن شما به صورت عمودی تعیین شود. در واقع متن در بخش بالا، پایین و وسط درون جدول قرار می گیرد که البته می تواند متغیر نیز باشد. به صورت پیش فرض نوشته در وسط جدول قرار می گیرد. استایل Tables در  CSS برای وسط چین تنظیمات بهتری را ارائه می دهد.

مثال ما به صورتی است که متن در پایین جدول قرار بگیرد.

td {

 

height: 50px;

 

vertical-align: bottom;

 

}

تنظیمات استایل Tables در  CSS

حال می خواهیم بررسی کنیم که چطور می توان فاصله بین حاشیه و محتوای یک جدول را تنظیم کرد. در این مسیر خاصیت padding را می توان روی المان های مشخصی اعمال کرد. پیشنهاد ما این است که قطعه کد زیر را یک دور خودتان با ارقام مختلف خودتان مورد بررسی قرار دهید. در یادگیری استایل Tables در  CSS باید کمی صبور باشید.

td {

 

padding: 15px;

 

}

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

آموزش box در استایل Tables در  CSS

می دانیم که تمامی عناصر HTML یک BOX محسوب می شوند که در CSS با عبارت Box Model شناخته شده است. در واقع قرار است که در خصوص طراحی این بخش صحبت کنیم.

در css یک box وجود دارد که به دور عناصر html کشیده شده است و شامل حاشیه ها، قاب ها و محتوای واقعی می شود.

در واقع این box اجازه می دهد که قابی ایجاد کنیم و رابطه عناصر مشخص شود. در این بخش استفاده از Margin سبب می شود که اطراف حاشیه پاک شود این خاصیت رنگ پس زمینه ندارد و شفاف است.

مورد بعدی که order نامیده می شود اطراف padding و content قرار دارد و به نوعی رنگ پیش زمینه را تغییر داده و بر آن تأثیر می گذارد.

بخش padding سبب می شود که نواحی اطراف محتوا پاک شود از رنگ پس زمینه box تأثیر می گیرد.

مورد آخر نیز content نامیده می شود که در این بخش در واقع متن و تصاویر ظاهر می شود.

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