HTML Table Padding & Spacing
در HTML، جداول به طور معمول برای نمایش داده‌ها به صورت ساختاریافته استفاده می‌شوند. فاصله (Padding) و فاصله بین سلول‌ها (Spacing) جنبه‌های مهم طراحی جدول هستند که بر ظاهر و خوانایی جدول تأثیر می‌گذارند. در اینجا نحوه مدیریت فاصله و فاصله بین سلول‌ها در جداول HTML آورده شده است:
▎۱. فاصله (Padding) جدول
فاصله به فضایی اشاره دارد که بین محتوای یک سلول و مرز آن وجود دارد. شما می‌توانید فاصله را با استفاده از CSS کنترل کنید.
▎مثال:
<!DOCTYPE html>
<html lang=“fa”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>مثال فاصله جدول</title>
<style>
table {
border-collapse: collapse; /* اطمینان از عدم وجود فاصله بین مرزها */
width: 100%;
}
th, td {
border: 1px solid black;
padding: 15px; /* فاصله داخل سلول‌ها */
}
</style>
</head>
<body>
<table>
<tr>
<th>سرعنوان ۱</th>
<th>سرعنوان ۲</th>
</tr>
<tr>
<td>داده ۱</td>
<td>داده ۲</td>
</tr>
<tr>
<td>داده ۳</td>
<td>داده ۴</td>
</tr>
</table>
</body>
</html>
▎۲. فاصله بین سلول‌ها (Spacing)
فاصله بین سلول‌ها به فضایی اشاره دارد که بین مرزهای سلول‌های مجاور وجود دارد. در HTML، شما می‌توانید فاصله را با استفاده از ویژگی border-spacing در CSS کنترل کنید. توجه داشته باشید که باید border-collapse: separate; تنظیم شود تا border-spacing تأثیر بگذارد.
▎مثال:
<!DOCTYPE html>
<html lang=“fa”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>مثال فاصله بین سلول‌ها</title>
<style>
table {
border-collapse: separate; /* اجازه می‌دهد تا فاصله بین مرزها وجود داشته باشد */
border-spacing: 10px; /* فاصله بین سلول‌ها */
width: 100%;
}
th, td {
border: 1px solid black;
padding: 15px; /* فاصله داخل سلول‌ها */
}
</style>
</head>
<body>
<table>
<tr>
<th>سرعنوان ۱</th>
<th>سرعنوان ۲</th>
</tr>
<tr>
<td>داده ۱</td>
<td>داده ۲</td>
</tr>
<tr>
<td>داده ۳</td>
<td>داده ۴</td>
</tr>
</table>
</body>
</html>
▎خلاصه
• فاصله (Padding) با استفاده از ویژگی padding در CSS کنترل می‌شود که فضای داخل سلول را بین محتوا و مرز سلول اضافه می‌کند.
• فاصله بین سلول‌ها (Spacing) با استفاده از ویژگی border-spacing در CSS کنترل می‌شود که فضای بین سلول‌های مجاور را اضافه می‌کند. اطمینان حاصل کنید که border-collapse به separate تنظیم شده باشد تا تأثیر بگذارد.
با تنظیم این ویژگی‌ها، شما می‌توانید خوانایی و جذابیت بصری جداول خود را به طرز چشمگیری افزایش دهید.
دیدگاهتان را بنویسید