استایل‌دهی به جداول وب

مقدمه

جداول HTML از ظاهر پیش‌فرض مناسبی برخوردار نیستند. اما خوشبختانه این امکان وجود دارد که با استفاده از CSS و پراپرتی‌هایی که به جداول مربوط هستند، استایل‌های متفاوت و مناسبی را به جداول اختصاص داد. در این درس، با نحوه‌ی انجام این کار آشنا می‌شویم.

پراپرتی‌های مربوط به جدول

در ابتدای این درس، لیستی از پراپرتی‌های CSS که اختصاصاً برای استایل‌دهی به جداول تعریف شده‌اند، ارائه می‌‌دهیم و در ادامه، جزئیات مربوط به این پراپرتی‌ها را بررسی می‌کنیم.

در ادامه، هر یک از پراپرتی‌های جدول بالا را به صورت مجزا و مستقل بررسی می‌کنیم و با ارائه‌ی مثال‌هایی از نقش این پراپرتی‌ها مطلع می‌شویم.

تعیین وضعیت فریم سلول‌های جدول با پراپرتی border-collapse

برای تعیین اینکه آیا سلول‌های جدول دارای فریم‌های مجزا باشند و یا اینکه یک فریم مشترک داشته باشند، از پراپرتی border-collapse استفاده می‌شود. پراپرتی border-collapse می‌تواند یکی از مقادیر separate یا collapse را دریافت کند و مقدار پیش‌فرض این پراپرتی separate است که باعث می‌شود فریم‌های سلول‌های مجاور با هم ادغام نشوند. در کد زیر، هر یک از مقادیر collapse و separate را آزمایش کنید و تفاوت آنها را ببینید.

CSS

table, td{
  border: 2px solid green;
  border-collapse: collapse;
}

تعیین فاصله بین سلول‌ها با پراپرتی border-spacing

گفتیم که پراپرتی border-collapse دارای مقدار پیش‌فرض separate است که باعث نمایش فریم‌های مجزا برای سلول‌های جدول می‌شود. در این وضعیت، فاصله‌ی بین فریم‌های سلول های مجاور توسط پراپرتی border-spacing تعیین می‌شود. مستندات CSS مقدار اولیه‌ی صفر را برای این پراپرتی تعیین کرده اما اکثر مرورگرها از مقدار پیش‌فرض 2px استفاده می‌کنند.

اگر مقدار پراپرتی border-collapse روی collapse تنظیم شده باشد، استفاده از پراپرتی border-spacing نتیجه‌ای ندارد.

پراپرتی border-spacing می‌تواند یک یا دو مقدار طولی را دریافت کند. در صورت تخصیص دو مقدار به این پراپرتی، مقدار اول به عنوان فاصله‌ی افقی و دومی به عنوان فاصله‌ی عمودی تفسیر می‌شود.

دقت داشته باشید که پراپرتی border-spacing به جدول مربوط است نه به خانه‌ها یا سلول‌های جدول. بنابراین، مانند مثال زیر باید روی عنصر table اعمال شود:

CSS

.spacing{
  border-spacing: 5px 10px;
}

سلول‌های جدول دارای border و padding هستند اما فاقد margin و در عوض، دارای border-spacing هستند.

تعیین محل عنوان جدول با پراپرتی caption-side

می‌دانیم که عنصر caption یک عنوان کلی را برای جدول ایجاد می‌کند. پراپرتی caption-side مکان قرارگیری این عنوان را تعیین می‌کند.

عنوان ایجاد شده با استفاده از عنصر caption در حالت پیش‌فرض در بالای جدول قرار می‌گیرد اما با تخصیص مقدار bottom به پراپرتی caption-side می‌توان آن را در پایین جدول قرار داد. این پراپرتی باید روی عنصر caption اعمال شود اما امکان تنظیم آن برای عنصر table نیز وجود دارد چون از table به caption به ارث خواهد رسید. مثال زیر را ببینید.

CSS

.spacing{
  border: 1px solid gray;
  caption-side: bottom;
}

تعیین وضعیت سلول‌های خالی با پراپرتی empty-cells

اگر خانه یا سلولی از جدول فاقد محتوا باشد، همچنان فریم و پس‌زمینه‌ی آن نمایش داده می‌شود اما این رویه‌ی پیش‌فرض را می‌توان با استفاده از پراپرتی empty-cells تغییر داد. این پراپرتی دارای مقدار پیش فرض show است اما می‌توان آن را به hide تغیر داد تا فریم و بک‌گراند سلول‌های خالی مخفی شود. مثال زیر را ببینید.

CSS

.spacing{
  border: 2px solid black;
  empty-cells: hide;
}

پراپرتی table-layout

از پراپرتی table-layout برای تعیین ثابت یا منعطف بودن عرض خانه‌های جدول استفاده می‌شود. این پراپرتی بر خلاف سایر پراپرتی‌های مربوط به جداول، به فرزندان به ارث نمی‌رسد.

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

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