حشو وتباعد الجدول Table Padding & Spacing html

الدرس السابق الدرس التالي
 حشو وتباعد جدول HTML
يمكن لجداول HTML ضبط المساحة المتروكة داخل الخلايا وكذلك المسافة بين الخلايا.
جدول HTML - حشو الخلية HTML Table - Cell Padding
مساحة الخلية هي المسافة بين حواف الخلية ومحتوى الخلية.
بشكل افتراضي ، يتم تعيين المساحة المتروكة على 0.
لإضافة مساحة متروكة على خلايا الجدول ، استخدم خاصية CSS padding:
مثال

  <!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> تحدد مساحة الخلية المسافة بين محتوى الخلية وحدودها. </p>

<table style="width:100%">
  <tr><th>الاسم</th>
    <th>اللقب</th> 
    <th>السن</th>
  </tr>
  <tr>
    <td>بدر</td>
    <td>البدوري</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>محمد</td>
    <td>احمد</td>
    <td>80</td>
  </tr></table>
<p><strong>Tip:</strong> حاول تغيير المساحة المتروكة إلى 5 بكسل.</p>
</body>
</html>

لإضافة مساحة متروكة أعلى المحتوى فقط ، استخدم خاصية padding-top.
والجوانب الأخرى مع خصائص padding-bottom و padding-left و padding-right:
مثال

  <!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> يمكننا تحديد حشوة مختلفة لجميع الجوانب الأربعة لمحتوى الخلية. </p>
<table style="width:100%">
  <tr>
    <th>الاسم</th>
    <th>اللقب</th> 
    <th>السن</th>
  </tr>
  <tr>
    <td>بدر</td>
    <td>البدوري</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>محمد</td>
    <td>احمد</td>
    <td>80</td>
  </tr>
</table>
</body>
</html>

جدول HTML - تباعد الخلايا
تباعد الخلايا هو المسافة بين كل خلية.
بشكل افتراضي ، يتم تعيين المساحة على 2 بكسل.
لتغيير المسافة بين خلايا الجدول ، استخدم خاصية CSS لتباعد الحدود border-spacing في عنصر table :
مثال

  <!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
table {
  border-spacing: 30px;
}
</style>
</head>
<body>
<h2> تباعد الخلايا </h2>
<p> غيّر المسافة بين الخلايا بخاصية تباعد الحدود. </p>
<table style="width:100%">
  <tr>
    <th>الاسم</th>
    <th>اللقب</th> 
    <th>السن</th>
  </tr>
  <tr>
    <td>كرم</td>
    <td>كريم</td>
    <td>50</td>
  </tr>
  <tr>
    <td>عيسى</td>
    <td>ماندو</td>
    <td>94</td>
  </tr>
  <tr>
    <td>احمد</td>
    <td>حميدو</td>
    <td>80</td>
  </tr>
</table>
</body>
</html>
الدرس السابق الدرس التالي
القسم: