تنسيق الجداول HTML Table Styling

تنسيق جدول HTML
استخدم CSS لجعل الجداول تبدو أفضل.
خطوط الحمار الوحشي Table - Zebra Stripes

1	2	3	4
5	6	7	8
9	10	11	12
13	14	15	16
17	18	19	20

إذا أضفت لونًا للخلفية على كل صف جدول آخر ، فستحصل على تأثير خطوط حمار وحشي جميل.
لتصميم كل عنصر بعنصر من عناصر صف الجدول ، استخدم المحدد : nth-child (even) كما يلي:
مثال


<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #D6EEEE;
}
</style>
</head>
<body>
<h2> جدول مخطط حمار وحشي </h2>
<p> بالنسبة للجداول المخططة بالحمار الوحشي ، استخدم المحدد nth-child () وأضف لون الخلفية إلى جميع صفوف الجدول الزوجية (أو الفردية): </p>
<table>
  <tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Points</th>
  </tr>
  <tr>
  <td>Peter</td>
  <td>Griffin</td>
  <td>$100</td>
  </tr>
  <tr>
  <td>Lois</td>
  <td>Griffin</td>
  <td>$150</td>
  </tr>
  <tr>
  <td>Joe</td>
  <td>Swanson</td>
  <td>$300</td>
  </tr>
  <tr>
  <td>Cleveland</td>
  <td>Brown</td>
  <td>$250</td>
  </tr>
</table>
</body>
</html>

ملاحظة: إذا كنت تستخدم (فردي) بدلاً من (زوجي) ، فسيحدث التصميم في الصف 1،3،5 وما إلى ذلك بدلاً من 2،4،6 وما إلى ذلك.
خطوط حمار وحشي عمودية Table - Vertical Zebra Stripes
لعمل خطوط حمار وحشي عمودية ، صمم كل عمود آخر ، بدلاً من كل صف آخر.

1	2	3	4
5	6	7	8
9	10	11	12
13	14	15	16
17	18	19	20

عيّن: nth-child (even) لعناصر بيانات الجدول مثل هذا:
مثال

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

th:nth-child(even),td:nth-child(even) {
  background-color: #D6EEEE;
}
</style>
</head>
<body>

<h2> جدول مخطط </h2>
<p> بالنسبة للجداول المخططة بالحمار الوحشي ، استخدم المحدد nth-child () وأضف لون الخلفية إلى جميع صفوف الجدول الزوجية (أو الفردية): </p>
<table style="width:100%">
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
    <th>FRI</th>
    <th>SAT</th>
    <th>SUN</th>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

</body>
</html>

ملاحظة: ضع محدد: nth-child () على كل من العنصرين th و td إذا كنت تريد أن يكون النمط على كل من الرؤوس وخلايا الجدول العادية.
اجمع بين خطوط حمار وحشي رأسية وأفقية Vertical and Horizontal
يمكنك دمج التصميم من المثالين أعلاه وسيكون لديك خطوط في كل صف آخر وكل عمود آخر.
إذا كنت تستخدم لونًا شفافًا ، فستحصل على تأثير متداخل.

استخدم لون rgba () لتحديد شفافية اللون:
مثال

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

tr:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}

th:nth-child(even),td:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}
</style>
</head>
<body>

<h2> جدول مخطط </h2>
<p> بالنسبة للجداول المخططة بالحمار الوحشي ، استخدم المحدد nth-child () وأضف لون الخلفية إلى جميع صفوف الجدول الزوجية (أو الفردية): </p>
<table style="width:100%">
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
    <th>FRI</th>
    <th>SAT</th>
    <th>SUN</th>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

</body>
</html>

فواصل أفقية Horizontal Dividers

First Name	Last Name	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

إذا قمت بتحديد حدود فقط في الجزء السفلي من كل صف جدول ، فسيكون لديك جدول به فواصل أفقية.
أضف خاصية border-bottom لجميع عناصر tr للحصول على فواصل أفقية:
مثال

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

tr {
  border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<h2> فواصل منضدة بحدود </h2>
<p> أضف خاصية border-bottom إلى عناصر tr للفواصل الأفقية: </p>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

رفرفة الجداول Hoverable Table
استخدم: محدد التمرير hover على tr لتمييز صفوف الجدول عند مرورالماوس فوق العمود:

First Name	Last Name	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #DDD;
}

tr:hover {background-color: #D6EEEE;}
</style>
</head>
<body>
<h2> رفرفة متحركة للاعمدة </h2>
<p> حرك الماوس فوق صفوف الجدول لمشاهدة التأثير. </p>

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

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