فاصله داخلی و بیرونی جدول (Padding & Spacing)
«فاصله سلول جدول» یعنی جای خالی دور متن. «پدینگ (Padding)» داخل سلول است. «اسپیسینگ (Spacing)» بین سلول هاست. مثل حاشیه دفتر: داخل خط ها و فاصله بین جدول ها.
پدینگ سلول ها با padding
برای فاصله داخلی، روی <th> و <td> ویژگی CSS «padding» بگذار.
<style>
th, td {
padding: 15px;
}
</style>
نکته: پیش فرض پدینگ صفر است؛ پس خودت مقدار بده.
پدینگ متفاوت برای هر سمت
می خواهی بالا، پایین، چپ، راست فرق کند؟ از padding-top و بقیه استفاده کن.
<style>
th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}
</style>
اسپیسینگ بین سلول ها با border-spacing
برای فاصله بیرونی بین سلول ها، روی تگ <table> «border-spacing» بگذار.
<style>
table {
border-spacing: 30px;
}
</style>
هشدار: اگر border-collapse: collapse; داری، border-spacing اثر نمی کند.
گام های عملی
- روی سلول ها
paddingبگذار. - برای هر سمت پدینگ جدا تنظیم کن.
- روی جدول
border-spacingتعیین کن.
برای مرور جدول ها به صفحه جداول برو. همچنین «مرزهای جدول» و «سربرگ های جدول» را ببین. لینک با تمرکز: فاصله سلول جدول.
جمع بندی سریع
paddingفاصله داخل سلول است.border-spacingفاصله بین سلول هاست.- پدینگ پیش فرض صفر است.
- با
collapse، اسپیسینگ کار نمی کند.