حدود الجدول 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>

الدرس السابق الدرس التالي

	<!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>