فاصله گذاری و فاصله ی بین سلول ها در جداولHTML

فاصله‌گذاری و فاصله‌ی بین سلول‌ها در جداول HTML

جداول HTML می‌تونن فاصله داخلی سلول‌ها (padding) و همچنین فضای بین سلول‌ها (spacing) رو تنظیم کنن.

فاصله‌گذاری داخلی سلول‌های جدول HTML (Cell Padding)

فاصله‌گذاری داخلی سلول (Cell padding) به فضای بین لبه‌های سلول و محتوای درون اون گفته می‌شه. به صورت پیش‌فرض، این فاصله روی 0 تنظیم شده.

برای اضافه کردن فاصله‌گذاری داخلی به سلول‌های جدول، از ویژگی CSS padding استفاده کنید:

مثال:

th, td {
  padding: 15px;
}

برای اضافه کردن فاصله‌گذاری فقط بالای محتوا، از ویژگی padding-top استفاده کنید. برای اضافه کردن فاصله‌گذاری به سایر جهت‌ها هم از ویژگی‌های padding-bottom، padding-left و padding-right استفاده کنید:

مثال:

<style>
    th, td {
        padding-top: 10px;
        padding-bottom: 20px;
        padding-left: 30px;
        padding-right: 40px;
    }
</style>

فاصله‌ی بین سلول‌های جدول HTML (Cell Spacing)

فاصله‌ی بین سلول‌ها (Cell spacing) به فضای بین هر سلول گفته می‌شه. به صورت پیش‌فرض، این فاصله روی 2 پیکسل تنظیم شده.

برای تغییر فاصله‌ی بین سلول‌های جدول، از ویژگی CSS border-spacing روی عنصر table استفاده کنید:

مثال:

table {
  border-spacing: 30px;
}