آموزش display:table در CSS

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

قبلا درمورد بخشی از مبحث display ها مقاله جامعی را منتشر کردیم که می‌توانید از لینک زیر به آن دسترسی داشته باشید :

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

در CSS مقادیر display و مقادیر نمایشی بسیار زیاد هستند که display از نوع جدول با چندین عملکرد مهم به شما کمک خواهد کرد تا قسمت‌های خاصی از طراحی پروژه را بهتر و اصولی کنترل کنید .

عملکرد display از نوع table

این display درکل برای این طراحی شده است که شما توسط آن ، به یک المان که عموما div است ، این نوع display را اعمال کرده و به فرزندان داخل این div که آنها نیز عموما div هستند ، display از نوع table-cell اعمال کنید .

در حقیقت توسط دستور display می‌توانیم یک جدول را بدون استفاده از تگ table و tr و … ایجاد کنیم . زمانی که از display با مقدار table و همچنین table-cell استفاده می‌کنیم ، تمامی فرزندان داخل div با نوع نمایش table ، به یک اندازه ارتفاع خواهند گرفت یا به عبارتی ، ارتفاع تمامی سلول‌ها به اندازه ارتفاع بزرگترین سلول خواهد بود .

برای درک بهتر موضوع ، ابتدا به ساختار HTML زیر دقت کنید :

<div class="table-main">
	<div class="table-cell">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</p>
	</div>
	<div class="table-cell">
	</div>
</div>

اکنون برای دو کلاس بالا یعنی table-main و table-cell استایل‌های زیر را در نظر می‌گیریم :

.table-main {
	display:table;
	background-color:#414141;
}
.table-cell {
	display:table-cell;
	background-color:#919191;
	padding: 1rem;
}

اکنون به خروجی کد بالا دقت کنید :

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

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

اگر تصمیم داشتید تا محتواهای داخل خانه‌های جدول یا همان سلول‌ها در یک ردیف و در وسط ستون نمایش داده شوند ، می‌توانید از دستورات vertical-align استفاده کنید مثلا :

.table-cell {
	vertical-align: middle;
}

اگر قصد دارید تا باکس‌هایی با ارتفاع یکسان داشته باشید ، می‌توانید از این نوع دستورات استفاده کنید . در حقیقت آن را به حساب یک ترفند بگذارید .

شما می‌توانید توسط دستور width ، عرض هر المان را نیز تعیین کنید چون اکنون در مثال بالا مشاهده می‌کنید که عرض بخشی که داخل آن متن وجود دارد ، بیشتر از باکس کناری آن است . پس اکنون استایل سلول‌ها را بصورت زیر تغییر می‌دهیم :

display: table-cell;
vertical-align: middle;
background-color:#919191;
padding: 1rem;
width: 50%;

خروجی بصورت زیر خواهد بود :

اما از این نوع display می‌توان برای کارهای دیگری نیز استفاده کرد !

وسط چین کردن المان‌ها توسط display:table

یکی دیگر از کاربردهای این نوع display ، وسط چین کردن المان‌ها در بخش‌هایی است که امکان قراردادن آنها در وسط صفحه وجود ندارد . برای مثال تصمیم دارید تا یک تصویر را در وسط قرار دهید ، در این حالت برای این تصویر بهترین دستور می‌تواند بصورت زیر باشد :

img {
	display:table;
	margin : 0 auto;
}

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

توجه داشته باشید که این نوع از نمایش ( table ) در حالت کلی استفاده کمتری دارد . ازجمله روش‌هایی که برای قراردادن المان‌ها کنار هم استفاده می‌شد ( البته در گذشته ) روش table بود اما اکنون باوجود روش‌هایی همچون CSS-Flex و همچنین CSS-Grid نیازی به استفاده از این متدهای قدیمی نیست . امید داریم این محتوا نیز برای شما مفید و کاربردی بوده باشد . موفق باشید و ادامه دهید .

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

اشتراک گذاری محتوا