‏مقدارهای جدولی display تو CSS به چه دردی می‌خورن؟

نویسنده تو این پست سراغ یه گوشهٔ کمتر دیده‌شدهٔ CSS رفته: مقدارهای جدولی ویژگی display. کنار مقدارهای آشنایی مثل block، flex و grid، مقدارهایی مثل table، table-row، table-cell و table-caption هم داریم. هر کدوم یه عنصر رو وادار می‌کنه مثل تگ HTML متناظرش رفتار کنه، مثلاً table-cell مثل تگ td و table-row مثل تگ tr. مقدار inline-table هم همون inline table هست که از CSS 2 مونده.

نکتهٔ اصلی اینه که این مقدارها فقط چیدمان جدول رو میارن، نه معنای اونو. تگ‌های واقعی جدول تو HTML نقش معنایی دارن؛ مثلاً tr نقش ARIA از نوع row داره، یعنی صفحه‌خوان می‌فهمه این یه ردیف جدوله. ولی وقتی یه div رو با CSS جدولی می‌کنی، هیچ‌کدوم از این نقش‌ها اضافه نمی‌شه. نویسنده تأکید می‌کنه اگه داده‌ات واقعاً جدولیه، همون تگ table رو بنویس.

تو دوره‌ای که هنوز flexbox و grid نبودن، این ترفند برای طراحی واکنش‌گرا به کار می‌اومد: روی دسکتاپ چیدمان جدولی، روی موبایل چیدمان inline، بدون اینکه HTML عوض بشه. کافی بود یه مشت div تو در تو رو این‌طوری جدول کنی:

#table {
	display: table;
	> div {
		display: table-row;
		> div {
			display: table-cell;
		}
	}
}

دو کاربرد معروفش این‌ها بود. اول ستون‌های هم‌قد: بلوک‌های معمولی ارتفاعشون رو با هم شریک نمی‌شن، ولی اگه والد display: table و بچه‌ها display: table-cell بگیرن، همه هم‌قد بلندترین خونه می‌شن. دوم وسط‌چین عمودی: vertical-align: middle روی بلوک‌ها کار نمی‌کنه ولی روی table-cell کار می‌کنه، اون هم نسبت به ارتفاع خود خونه، نه خط متن و فونت مثل inline-block.

یه کاربرد کمتر شناخته‌شده هم table-layout: fixed هست. حالت پیش‌فرض auto محتوای خونه‌ها رو بررسی می‌کنه تا عرض ستون‌ها رو حساب کنه، ولی fixed فقط عرض جدول، عرض ستون‌ها و حاشیه‌ها رو می‌بینه و برای همین سریع‌تره. نویسنده می‌گه این سرعت معمولاً اهمیتی نداره و فقط تو موارد خاص مثل لیست‌های خیلی طولانی شاید کمی کمک کنه. بعضی‌ها هم ازش استفاده می‌کنن تا ستون‌ها با محتوای ردیف‌های بعدی بی‌خودی پهن نشن.

جمع‌بندی نویسنده اینه که امروز احتمالاً نباید سراغ این مقدارها بری. اگه فکر می‌کنی لازمشون داری، به احتمال زیاد grid یا flexbox همون کارو بهتر انجام می‌ده و مشکل‌های دسترس‌پذیری هم درست نمی‌کنه.

نکات کلیدی:

• مقدارهایی مثل display: table و table-cell فقط چیدمان جدول رو میارن، نه نقش معنایی و ARIA اونو.
• inline-table سینتکس قدیمی CSS 2 هست و با inline table فرقی نداره.
• ستون‌های هم‌قد قدیمی با display: table روی والد و table-cell روی بچه‌ها ساخته می‌شد.
• vertical-align: middle روی table-cell نسبت به ارتفاع خود خونه وسط‌چین می‌کنه.
• table-layout: fixed محتوای خونه‌ها رو برای حساب عرض ستون نگاه نمی‌کنه و سریع‌تره.
• برای چیدمان‌های امروزی grid یا flexbox انتخاب بهتریه.