استفاده از ویژگی های جدول در Css

کاربردهای مفید جدول در CSS

مقدمه

در این مطلب نمی خواهیم در مورد روش منسوخ صفحه آرایی با جدول در HTML صحبت کنیم (خدایی نکرده) بلکه می خواهیم چند استفاده مفید از ویژگی های جدول را در CSS, بررسی کنیم.

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


table    { display: table }
tr       { display: table-row }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
caption  { display: table-caption }

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

قرار دادن یک عنصر در وسط راستای عمود به صورت پویا

 

See the Pen zGKWyQ by Mojtaba Seyedi (@seyedi) on CodePen.

 

قرار دادن یک عنصر در وسط راستای افق به صورت پویا

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



.center {
  display: table;
  margin: 0 auto;
}


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

 

See the Pen Centering anything horizontally by Mojtaba Seyedi (@seyedi) on CodePen.

 

فوتر چسبان

یکی از دغدغه ها زمانی که فوتر صفحه طراحی می شود این است که می خواهیم زمانی که محتوا از ارتفاع صفحه کمتر است فوتر به پایین صفحه بچسبد و زمانی که محتوا بیشتر از ارتفاع صفحه شد فوتر هم به سمت پایین حرکت کند. تصویر زیر را ببیند.

فوتر چسبان

برای رسیدن به این هدف در CSS باید از ویژگی های جدول استفاده کنیم. فرض کنید ساختار HTML به صورت زیر است و main قسمت اصلی محتوا می باشد.


<body>
 <main></main>
 <footer></footer>
</body>

در CSS داریم:



html {
  height: 100%;
}

body {
  display: table;
  height: 100%;
  width: 100%;
}

main {
  height: 100%;
}

footer {
  display: table-row;
  height: 1px;
}


مثال زیر را بررسی کنید, با افزایش محتوای قسمت اصلی متوجه عملکرد فوتر خواهید شد.

 

See the Pen XbjqZm by Mojtaba Seyedi (@seyedi) on CodePen.


 

11 دیدگاه برای “کاربردهای مفید جدول در CSS

    1. استفاده از فلکس خیلی عالیه ولی مشکل پشتیبانی مرورگرها رو داره که در خیلی از پروژه ها نمیتونیم ازش استفاده کنیم.
      ولی پوزیشن تاحدودی راحترین و امنترین راه حل برای انجام این کاره. در کل آقا فرید عزیز کار ما طوریه که باید روش های مختلف رو بدونیم تا بتونیم توی شرایط مختلف تصمیم درستو بگیریم. موفق باشید :)

    1. استفاده از فلکس خیلی عالیه ولی مشکل پشتیبانی مرورگرها رو داره که در خیلی از پروژه ها نمیتونیم ازش استفاده کنیم.
      ولی پوزیشن تاحدودی راحترین و امنترین راه حل برای انجام این کاره. در کل آقا فرید عزیز کار ما طوریه که باید روش های مختلف رو بدونیم تا بتونیم توی شرایط مختلف تصمیم درستو بگیریم. موفق باشید :)

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