HTML — جداول - فاصله گذاری و حاشیه گذاری (Table Padding & Spacing)

آخرین بروزرسانی: 1404/07/05

قبلی: جداول - سرفصل ها (Table Headers) بعدی: جداول Colspan و Rowspan

جداول - فاصله گذاری و حاشیه گذاری (Table Padding & Spacing) در HTML

در جداول HTML می توان فاصله داخلی سلول ها (Cell Padding) و فاصله بین سلول ها (Cell Spacing) را تغییر داد. این قابلیت باعث خوانایی بهتر داده ها و زیبایی بیشتر جدول می شود.

فاصله داخلی سلول ها (Cell Padding)

فاصله داخلی یا Padding همان فاصله بین محتوای سلول و لبه های آن است. مقدار پیش فرض آن 0 است. برای تنظیم Padding از ویژگی padding در CSS استفاده می کنیم.

th, td {
  padding: 15px;
}

می توانید هر سمت سلول را به طور جداگانه با ویژگی هایی مانند padding-top، padding-bottom، padding-left و padding-right کنترل کنید.

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

فاصله بین سلول ها (Cell Spacing)

فاصله بین سلول ها یا Spacing مقدار پیش فرض 2 پیکسل دارد. برای تغییر این فاصله از ویژگی border-spacing روی عنصر <table> استفاده کنید.

table {
  border-spacing: 30px;
}

خلاصه

padding فاصله داخلی سلول و محتوا را مشخص می کند.
border-spacing فاصله بین سلول ها را کنترل می کند.
برای طراحی بهتر جداول می توانید این دو ویژگی را ترکیب کنید.