کادر جدول در CSS (CSS Table Borders)
«کادر جدول در CSS» (Table Borders) ظاهر جداول HTML را حرفه ای می کند؛ بنابراین می توانید ضخامت، نوع و رنگ خطوط را تعریف کنید و سپس با ادغام کادرها، فاصله داخلی و فاصله بین سلول ها، خوانایی را افزایش دهید.
مروری سریع بر ویژگی های کادر جدول
ویژگی کوتاه نویسی border سه بخش دارد: border-width، border-style (ضروری) و border-color. مثال زیر برای عناصر <table>، <th> و <td> یک کادر 1px یکپارچه اعمال می کند:
table,th,td{ border:1px solid; }رنگ کادر جدول
برای تعیین رنگ، کافی است مقدار رنگ را به border اضافه کنید؛ بنابراین مرزها واضح تر نمایش داده می شوند:
table,th,td{ border:1px solid green; }نکته: اگر برای جدول و سلول ها هم زمان کادر بگذارید، «دوبل» دیده می شود. برای حذف آن، از border-collapse:collapse استفاده کنید.
ادغام کادرها با border-collapse
ویژگی border-collapse مشخص می کند کادرها جدا باشند یا ادغام شوند. مقدار collapse آن ها را به یک خط واحد تبدیل می کند.
table{ border-collapse:collapse; }فاصله داخلی سلول ها (padding)
برای کنترل فاصله محتوا تا کادر در سلول ها، padding را روی <td> و <th> تنظیم کنید؛ در نتیجه متن نفس می کشد:
th,td{ padding:10px; }فاصله بین کادر سلول ها (border-spacing)
با border-spacing فاصله بین کادر سلول های مجاور تعیین می شود؛ اما فقط وقتی کار می کند که border-collapse:separate باشد.
table{ border-collapse:separate; border-spacing:15px; }کادر فقط دور جدول
اگر فقط به یک کادر بیرونی نیاز دارید، ویژگی border را صرفاً برای تگ <table> اعمال کنید؛ بنابراین داخل جدول بدون مرز می ماند:
table{ border:1px solid; }مسیر مطالعه بیشتر
مطالب مرتبط: فهرست ها در CSS و اندازه و چیدمان جدول. همچنین این صفحه کادر جدول در CSS را نشانه گذاری کنید.