100% کامل شده تا

حاشیهٔ داخلی و فاصله در جدول اچ‌تی‌ام‌ال (HTML Table Padding & Spacing)

از موتو کد، دانشنامهٔ برنامه‌نویسی


جداول HTML می‌توانند حاشیهٔ داخلی سلول‌ها و همچنین فضای بین سلول‌ها را تنظیم کنند.[۱]


With Padding
hello hello hello
hello hello hello
hello hello hello
With Spacing
hello hello hello
hello hello hello
hello hello hello



جدول HTML - حاشیه داخلی سلول (HTML Table - Cell Padding)

حاشیهٔ داخلی سلول، فضای بین لبه‌های سلول و محتوای درون سلول است.

به‌طور پیش‌فرض حاشیهٔ داخلی روی ۰ تنظیم شده‌است.

برای افزودن حاشیهٔ داخلی روی سلول‌های جدول، از ویژگی padding در CSS استفاده کنید:

مثال

th, td {
  padding: 15px;
}

مثال

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
}
</style>
</head>
<body>

<h2>Cellpadding</h2>
<p>Cell padding specifies the space between the cell content and its borders.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

<p><strong>Tip:</strong> Try to change the padding to 5px.</p>

</body>
</html>

Responsive demo.svg


برای افزودن حاشیهٔ داخلی فقط در بالای محتوا، از ویژگی padding-top استفاده کنید.

و بقیه با ویژگی‌های padding-bottom، padding-left و padding-right:

مثال

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

مثال

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 40px;
}
</style>
</head>
<body>

<h2>Cellpadding - top - bottom - left - right </h2>
<p>We can specify different padding for all fours sides of the cell content.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

Responsive demo.svg



جدول HTML - فاصلهٔ سلول (HTML Table - Cell Spacing)

فاصلهٔ سلولی، فضای بین هر سلول است.

به‌طور پیش‌فرض این فاصله روی ۲ پیکسل تنظیم شده‌است.

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

مثال

table {
  border-spacing: 30px;
}

مثال

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
table {
  border-spacing: 30px;
}
</style>
</head>
<body>

<h2>Cellspacing</h2>
<p>Change the space between the cells with the border-spacing property.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

Responsive demo.svg



منابع آموزشی




به‌روزرسانی شده: ۳۷ روز پیش