سبک دهی به جدول ها با CSS
هنگامی که یک جدول را در HTML بدون هیچگونه سبک یا خصوصیتی می سازید، مرورگرها آنها را بدون هیچگونه حاشیه ای نشان می دهند. سبک دهی به یک جدول با CSS می تواند ظاهر آن را تا حد زیادی بهتر کند.
در بخش های زیر نحوه کنترل چیدمان و ارائه عناصر جدول را با استفاده از CSS برای ایجاد جداول زیبا و سازگار نشان خواهیم داد.
اضافه کردن حاشیه ها به جدول ها
ویژگیborder در CSS بهترین روش برای تعریف حاشیه ها برای جداول است.
مثال زیر یک حاشیه سیاه رنگ برای عناصر < table>، < تعیین می کند.
مثال
table, th, td {
border: 1px solid black;
}
یکی کردن حاشیه های جدول
اگر خروجی مثال قبلی را مشاهده کرده باشید، متوجه شده اید که هر سلول جدول دارای حاشیه های جداگانه ای است و بین حاشیه های سلول های مجاور نیز فاصله وجود دارد. چراکه به طور پیش فرض، حاشیه های سلول جدول از هم جدا می شوند. اما می توانید با استفاده از ویژگی border-collapse در عنصر حاشیه های جداگانه جدول را روی یک حاشیه قرار دهید.
قوانین سبک در مثال زیر حاشیه های سلول جدول را به صورت یک حاشیه سیاه رنگ یک پیکسلی روی هم قرار می دهد، روی عناصر جدول و سلول جدول نیز اعمال می شود.
مثال
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
همچنین می توان فاصله بین حاشیه های سلول در جدول را با تنظیم مقدار صفر برای ویژگیborder-spacing حذف کنید. با این حال، این روش فقط فضا را از بین می برد اما حاشیه ها را مانند ویژگی border-collapse را با یکی نمی کند.
توجه: اگر در سند HTML مشخص نشده باشد، ویژگیborder-collapse در CSS نتایج غیر منتظره ای ایجاد خواهد کرد.
تنظیم فضای داخل جدول ها
به طور پیش فرض، مرورگر سلول های جدول را به اندازه ای بزرگ می کند تا داده های موجود در سلول ها جاگیر شوند. برای افزودن فضای بیشتر به محتوا در سلول های جدول، می توانید از ویژگی padding در CSS استفاده کنید:
مثال
th, td {
padding: 15px;
}
اگر حاشیه های جدول با دیگر فاصله داشته باشند (پیش فرض فاصله دارند.)، می توانید فاصله بین حاشیه های سلول را نیز با استفاده از border-spacing در CSS تنظیم کنید.
قوانین سبک در مثال زیر فاصله ۱۰ پیکسل را بین همه حاشیه ها در یک جدول اعمال می کند:
مثال
table {
border-spacing: 10px;
}
کنترل طرح بندی جدول
به طور پیش فرض یک جدول تا زمانی گسترش می یابد و بزرگ می شود که داده ها را در خود جای دهد. تا جایی که فضا وجود داشته باشد، جدول با داده ها پر و جدول بزرگ می شود. گرچه، گاهی اوقات برای مدیریت طرح بندی لازم است تا عرض جدول را به صورت ثابت تنظیم کنید.
این کار را می توانید با کمک ویژگی table-layout در CSS انجام دهید. این ویژگی الگوریتمی را برای چیدمان سلول ها، سطرها و ستون های جدول تعریف می کند. این ویژگی یکی از دو مقدار زیر را دارد:
- auto – از یک الگوریتم طرح بندی خودکار برای جدول استفاده می کند. با استفاده از این الگوریتم، عرض های جدول و سلول های آن متناسب با محتوا تنظیم می شوند. این مقدار پیش فرض است.
- fixed – از الگوریتم طرح بندی ثابت برای جدول استفاده می کند. با استفاده از این الگوریتم، طرح افقی جدول به محتویات سلول بستگی ندارد. فقط به عرض جدول، عرض ستون ها و حاشیه ها یا فاصله سلولی بستگی دارد.
قوانین سبک در مثال زیر نشان می دهد که جدول با استفاده از الگوریتم طرح ثابت و دارای عرض ثابت ۳۰۰ پیکسل تنظیم شده است.
آموزش جدول ها در css به زبان ساده
جدول ,حاشیه ,های ,سلول ,ها ,استفاده ,حاشیه های ,جدول را ,با استفاده ,می کند ,های سلول
درباره این سایت