حدود الجدول HTML Table Borders

الدرس السابق الدرس التالي
 حدود جدول HTML
يمكن أن يكون لجداول HTML حدود من أنماط وأشكال مختلفة.
كيفية إضافة حد - Add a Border
عندما تضيف حدًا إلى جدول ، فإنك تضيف أيضًا حدودًا حول كل خلية في الجدول:
لإضافة حد ، استخدم خاصية CSS border في عناصر الجدول -table، والعناصرth ، والعناصر td:
مثال
 <!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<h2> جدول بحدود </h2>
<p> استخدم خاصية CSS border لإضافة حد إلى الجدول. </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>

حدود الجدول المنهارة - Collapsed Table Borders
لتجنب وجود حدود مزدوجة كما في المثال أعلاه ، قم بتعيين خاصية CSS border-collapse.
سيؤدي هذا إلى انهيار الحدود إلى حد واحد:
مثال
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>
<h2> انهيار الحدود </h2>
<p> إذا كنت تريد تصغير الحدود إلى حد واحد ، فأضف خاصية CSS لتصغير الحدود. </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>

حدود جدول النمط - style
إذا قمت بتعيين لون خلفية لكل خلية ، ومنحت الحد لونًا أبيض (مثل خلفية المستند) ، تحصل على انطباع  بحد-border غير مرئي:
  
مثال
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid white;
  border-collapse: collapse;
}
th, td {
  background-color: #96D4D4;
}
</style>
</head>
<body>
<h2> جدول ذات حدود غير مرئية </h2>
<p> صمم الجدول بحدود بيضاء ولون خلفية للخلايا لتكوين انطباع بحدود غير مرئية. </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>

حدود الجداول المستديرة - Round Table Borders
باستخدام خاصية border-radius ، تحصل الحدود على زوايا مستديرة:
 
مثال
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-radius: 10px;
}
</style>
</head>
<body>
<h2> جدول ذات حدود مستديرة </h2>
<p> استخدم خاصية CSS border-radius لإضافة زوايا مستديرة للحدود. </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>

حذف الحد حول الجدول من خلال استبعاد الجدول table من محدد css:
  
مثال
<!DOCTYPE html>
<html>
<head>
<style>
th, td {
  border: 1px solid black;
  border-radius: 10px;
}
</style>
</head>
<body>
<h2> جدول ذات حدود مستديرة </h2>
<p> استخدم خاصية CSS border-radius لإضافة زوايا مستديرة إلى خلايا الجدول. </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>

حدود الجدول المنقط - Dotted Table Borders
باستخدام خاصية نمط الحدود border-style ، يمكنك تعيين مظهر الحدود.
القيم التالية مسموح بها:
  • dotted       - منقط
  • dashed      - متقطع
  • solid         - صلب
  • double      -  مزدوج
  • groove      -  أخدود
  • ridge         -
  • inset          -    أقحم
  • outset        -  البداية
  • none          - لا حد
  • hidden       - مختفي 
<!DOCTYPE html>
<html>
<head>
<style>
th, td {
  border-style: dotted;
}
</style>
</head>
<body>
<h2> جدول بحدود منقطة </h2>
<p> استخدم خاصية CSS border-style لتعيين نمط الحدود. </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>
لون الحدود - border color
باستخدام خاصية لون الحدود border-color ، يمكنك تعيين لون الحد.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
th, td {
  border-style:solid;
  border-color: #96D4D4;
}
</style>
</head>
<body>
<h2> جدول بلون الحدود </h2>
<p> استخدم خاصية CSS border-color لتعيين لون الحدود. </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>
الدرس السابق الدرس التالي
القسم: