HTML الجداول

---

تحديد الجداول

يتم تعريف الجدول بـ <table>

يتم تعريف كل صف جدول بـ <tr>. يتم تعريف رأس الجدول بـ <th>. تبعًا للإعدادات الافتراضية ، تكون عناوين الجدول غامقة ومركزة. يتم تعريف جدول / خلية الجدول بـ <td>.

<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>
</table>

 

ملاحظة: إن <td> هي حاويات البيانات من الجدول. 
يمكن أن تحتوي على جميع أنواع عناصر HTML ؛ النص والصور والقوائم والجداول الأخرى ، إلخ.

---

جدول HTML – إضافة الحدود

إذا لم تحدد حدًا للجدول ، فسيتم عرضه بدون حدود.

تم تعيين حد باستخدام border :

table, th, td {
  border: 1px solid black;
}

 

تذكر أن تحدد الحدود لكل من الجدول وخلايا الجدول.

---

جدول HTML – الحدود المتقطعة

إذا كنت ترغب في تقطيع الحدود ، فقم بإضافة border-collapse :

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

 

---

جدول HTML – إضافة خلية الحشو

تحدد حشوة الخلية المسافة بين محتوى الخلية وحدودها.

إذا لم تحدد حشوة ، فسيتم عرض خلايا الجدول دون حشوة.

لتعيين الحشو ، استخدم padding :

th, td {
  padding: 15px;
}

 

---

جدول HTML – المحاذاة

تبعًا للإعدادات الافتراضية ، تكون عناوين الجدول غامقة وتتركز.

لمحاذاة عناوين الجدول ، استخدم text-align :

th {
  text-align: left;
}

 

---

جدول HTML – إضافة تباعد الحدود

يحدد تباعد الحدود المسافة بين الخلايا.

لتعيين تباعد الحدود لجدول ، استخدم border-spacing :

table {
  border-spacing: 5px;
}

 

---

جدول HTML – الخلايا التي تمتد على العديد من الأعمدة

لجعل امتداد الخلية أكثر من عمود واحد ، استخدم colspan:

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

 

---

HTML الجدول – الخلايا التي تمتد العديد من الصفوف

لجعل امتداد الخلية أكثر من صف واحد ، استخدم rowspan:

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

 

---

جدول HTML – إضافة تعليق

لإضافة تعليق إلى جدول ، استخدم <caption>:

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

 

ملاحظة: يجب إدخال <caption> مباشرة بعد <table>.

---

نمط خاص لجدول واحد

لتعريف نمط خاص لجدول خاص ، أضف id إلى الجدول:

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

يمكنك الآن تحديد نمط خاص لهذا الجدول:

table#t01 {
  width: 100%; 
  background-color: #f1f1c1;
}

 

وإضافة المزيد من الأنماط:

table#t01 tr:nth-child(even) {
  background-color: #eee;
}
table#t01 tr:nth-child(odd) {
  background-color: #fff;
}
table#t01 th {
  color: white;
  background-color: black;
}

 

---

ملخص الفصل

• استخدم <table> لتعريف جدول
• استخدم <tr> لتعريف صف الجدول
• استخدم <td> لتعريف بيانات الجدول
• استخدم <th> لتعريف عنوان الجدول
• استخدم <caption> لتعريف تسمية توضيحية للجدول
• استخدم border لتحديد الحدود
• استخدم border-collapseلطي حدود الخلية
• استخدم padding لإضافة الحشو إلى الخلايا
• استخدم text-align لمحاذاة نص الخلية
• استخدم border-spacing لضبط التباعد بين الخلايا
• استخدم colspan لإنشاء خلية تمتد على العديد من الأعمدة
• استخدم rowspan لإنشاء خلية تمتد على العديد من الصفوف
• استخدم id لتعريف جدول واحد بشكل فريد

---

العلامات

السمات	الوصف
<table>	يحدد الجدول
<th>	يحدد خلية رأس في الجدول
<tr>	يحدد صفًا في الجدول
<td>	يعرّف الخلية في الجدول
<caption>	يحدد شرح الجدول
<colgroup>	يحدد مجموعة من عمود واحد أو أكثر في الجدول للتنسيق
<col>	يحدد خصائص العمود لكل عمود داخل عنصر <colgroup>
<thead>	يقوم بتجميع محتوى الرأس في الجدول
<tbody>	مجموعات محتوى الجسم في الجدول
<tfoot>	مجموعات محتوى تذييل الصفحة في الجدول