مقدمه
در این مطلب نمی خواهیم در مورد روش منسوخ صفحه آرایی با جدول در 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.
خیلی خوبه, وقت کردی قابلیت های دیگشو هم توضیح بده
خیلی خوبه, وقت کردی قابلیت های دیگشو هم توضیح بده
عالی,وقت کردی قابلیت های دیگشو هم توضیح بده
عالی,وقت کردی قابلیت های دیگشو هم توضیح بده
آقا دمت گرم خیلی خوب بود
خدا به همرات
آقا دمت گرم خیلی خوب بود
خدا به همرات
در هر حال من از تیبل ها متنفرم؛ برای چسبوندن فوتر از فلکس ویا پوزیشن اسفاده کنم فکر کنم بهتر باشه! اینطور نیست؟!
استفاده از فلکس خیلی عالیه ولی مشکل پشتیبانی مرورگرها رو داره که در خیلی از پروژه ها نمیتونیم ازش استفاده کنیم.
ولی پوزیشن تاحدودی راحترین و امنترین راه حل برای انجام این کاره. در کل آقا فرید عزیز کار ما طوریه که باید روش های مختلف رو بدونیم تا بتونیم توی شرایط مختلف تصمیم درستو بگیریم. موفق باشید :)
در هر حال من از تیبل ها متنفرم؛ برای چسبوندن فوتر از فلکس ویا پوزیشن اسفاده کنم فکر کنم بهتر باشه! اینطور نیست؟!
استفاده از فلکس خیلی عالیه ولی مشکل پشتیبانی مرورگرها رو داره که در خیلی از پروژه ها نمیتونیم ازش استفاده کنیم.
ولی پوزیشن تاحدودی راحترین و امنترین راه حل برای انجام این کاره. در کل آقا فرید عزیز کار ما طوریه که باید روش های مختلف رو بدونیم تا بتونیم توی شرایط مختلف تصمیم درستو بگیریم. موفق باشید :)
ممنون. خیلی استفاده کردم.
عالی
یعنی ترکوندییییییییییییی
بی نظیرین
سلطان دمت گرم خیلی خوب توضیح میدی عالی بود.
سایت رو گسترش بده و جاوا اسکریپت هم آموزش بده.