کادر جدول در 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 را نشانه گذاری کنید.