مثال على جدول HTML

اسم الطالبالصفالدرجة
احمد الاول93%
عادل الثاني84%
اسلام الثاني94%
بيشوي الرابع 88%
خالد الثالث67%
ابانوب الاول72%

جربها بنفسك “


تحديد جدول HTML

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

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

مثال

<!DOCTYPE html>
<html>
<body dir="rtl">
<h2>جدول html</h2>
<table style="width:100%">
  <tr>
    <th>الاسم الاول</th>
    <th>الاسم الاخير</th> 
    <th>العمر</th>
  </tr>
  <tr>
    <td>احمد</td>
    <td>القاضي</td>
    <td>22</td>
  </tr>
  <tr>
    <td>بيشوي </td>
    <td>يوسف</td>
    <td>20</td>
  </tr>
  <tr>
    <td>خالد</td>
    <td>محمد</td>
    <td>27</td>
  </tr>
</table>
</body>
</html>

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


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

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

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

مثال

<!DOCTYPE html>
<html>
  <head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body dir="rtl">
<h2>جدول html</h2>
<table style="width:100%">
  <tr>
    <th>الاسم الاول</th>
    <th>الاسم الاخير</th> 
    <th>العمر</th>
  </tr>
  <tr>
    <td>احمد</td>
    <td>القاضي</td>
    <td>22</td>
  </tr>
  <tr>
    <td>بيشوي </td>
    <td>يوسف</td>
    <td>20</td>
  </tr>
  <tr>
    <td>خالد</td>
    <td>محمد</td>
    <td>27</td>
  </tr>
</table>
</body>
</html>

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


جدول HTML – الحدود المطوية

إذا كنت تريد طي الحدود إلى حد واحد ، فأضف border-collapse خاصية CSS :

مثال

<!DOCTYPE html>
<html>
  <head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
</style>
</head>
<body dir="rtl">
<h2>جدول html</h2>
<table style="width:100%">
  <tr>
    <th>الاسم الاول</th>
    <th>الاسم الاخير</th> 
    <th>العمر</th>
  </tr>
  <tr>
    <td>احمد</td>
    <td>القاضي</td>
    <td>22</td>
  </tr>
  <tr>
    <td>بيشوي </td>
    <td>يوسف</td>
    <td>20</td>
  </tr>
  <tr>
    <td>خالد</td>
    <td>محمد</td>
    <td>27</td>
  </tr>
</table>
</body>
</html>

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

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

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

لتعيين المساحة المتروكة ، استخدم خاصية  padding في CSS :

مثال

<!DOCTYPE html>
<html>
  <head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
}
</style>
</head>
<body dir="rtl">
<h2>جدول html</h2>
<table style="width:100%">
  <tr>
    <th>الاسم الاول</th>
    <th>الاسم الاخير</th> 
    <th>العمر</th>
  </tr>
  <tr>
    <td>احمد</td>
    <td>القاضي</td>
    <td>22</td>
  </tr>
  <tr>
    <td>بيشوي </td>
    <td>يوسف</td>
    <td>20</td>
  </tr>
  <tr>
    <td>خالد</td>
    <td>محمد</td>
    <td>27</td>
  </tr>
</table>
</body>
</html>

جدول HTML – عناوين محاذاة إلى اليسار

بشكل افتراضي ، تكون عناوين الجدول غامقة وتتوسط.

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

مثال

<!DOCTYPE html>
<html>
  <head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
}
th {
    text-align: left;
}
</style>
</head>
<body dir="rtl">
<h2>جدول html</h2>
<table style="width:100%">
  <tr>
    <th>الاسم الاول</th>
    <th>الاسم الاخير</th> 
    <th>العمر</th>
  </tr>
  <tr>
    <td>احمد</td>
    <td>القاضي</td>
    <td>22</td>
  </tr>
  <tr>
    <td>بيشوي </td>
    <td>يوسف</td>
    <td>20</td>
  </tr>
  <tr>
    <td>خالد</td>
    <td>محمد</td>
    <td>27</td>
  </tr>
</table>
</body>
</html>

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

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

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

مثال

<!DOCTYPE html>
<html>
  <head>
<style>
table, th, td {
    border: 1px solid black;
    padding: 5px;
}
table {
    border-spacing: 15px;
}
</style>
</head>
<body dir="rtl">
<h2>جدول html</h2>
<table style="width:100%">
  <tr>
    <th>الاسم الاول</th>
    <th>الاسم الاخير</th> 
    <th>العمر</th>
  </tr>
  <tr>
    <td>احمد</td>
    <td>القاضي</td>
    <td>22</td>
  </tr>
  <tr>
    <td>بيشوي </td>
    <td>يوسف</td>
    <td>20</td>
  </tr>
  <tr>
    <td>خالد</td>
    <td>محمد</td>
    <td>27</td>
  </tr>
</table>
</body>
</html>

ملاحظة: إذا كان الجدول يحتوي على حدود مطوية ، border-spacingفلن يكون له أي تأثير.


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

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

مثال

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;    
}
</style>
</head>
<body dir="rtl">
<h2>الخلية التي تمتد على عمودين</h2>
<p>لجعل الخلية تمتد لأكثر من عمود واحد ، استخدم السمة colspan.</p>
<table style="width:100%">
  <tr>
    <th>الاسم</th>
    <th colspan="2">رقم الهاتف</th>
  </tr>
  <tr>
    <td>احمد القاضي</td>
    <td>01234567897</td>
    <td>01234567899</td>
  </tr>
</table>
</body>
</html>

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

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

مثال

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;    
}
</style>
</head>
<body dir="rtl">
<h2>الخلية التي تمتد على صفين</h2>
<p>لجعل الخلية تمتد لأكثر من صف واحد ، استخدم سمة rowspan.</p>
<table style="width:100%">
  <tr>
    <th>الاسم:</th>
    <td>احمد القاضي</td>
  </tr>
  <tr>
    <th rowspan="2">رقم الهاتف:</th>
    <td>01234567897</td>
  </tr>
  <tr>
    <td>01234567899</td>
  </tr>
</table>
</body>
</html>

جدول HTML – إضافة تسمية توضيحية

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

مثال

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;
}
</style>
</head>
<body dir="rtl">
<h2>اضافة وصف للجدول</h2>
<table style="width:100%">
  <!-- تضيف السمة التالية وصف للجدول  -->
  <caption>جدول مصروفات</caption>
  <tr>
    <th>الشهر</th>
    <th>المصروفات</th>
  </tr>
  <tr>
    <td>يونيو</td>
    <td>$200</td>
  </tr>
  <tr>
    <td>يوليو</td>
    <td>$190</td>
  </tr>
</table>
</body>
</html>

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


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

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

مثال

<!DOCTYPE html>
<html>
  <head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
    text-align: left;
}
table#table1 {
    width: 100%;    
    background-color: #f1f1c1;
}
</style>
</head>
<body dir="rtl">
<h2>جدول html</h2>
<table id="table1">
  <tr>
    <th>الاسم الاول</th>
    <th>الاسم الاخير</th> 
    <th>العمر</th>
  </tr>
  <tr>
    <td>احمد</td>
    <td>القاضي</td>
    <td>22</td>
  </tr>
  <tr>
    <td>بيشوي </td>
    <td>يوسف</td>
    <td>20</td>
  </tr>
  <tr>
    <td>خالد</td>
    <td>محمد</td>
    <td>27</td>
  </tr>
</table>
</body>
</html>

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

<!DOCTYPE html>
<html>
  <head>
<style>
table {
    width:100%;
}
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
    text-align: left;
}
table#table1 tr:nth-child(even) {
    background-color: #eee;
}
table#table1 tr:nth-child(odd) {
   background-color: #fff;
}
table#table1 th {
    background-color: black;
    color: white;
}
</style>
</head>
<body dir="rtl">
<h2>جدول html</h2>
<table id="table1">
  <tr>
    <th>الاسم الاول</th>
    <th>الاسم الاخير</th> 
    <th>العمر</th>
  </tr>
  <tr>
    <td>احمد</td>
    <td>القاضي</td>
    <td>22</td>
  </tr>
  <tr>
    <td>بيشوي </td>
    <td>يوسف</td>
    <td>20</td>
  </tr>
  <tr>
    <td>خالد</td>
    <td>محمد</td>
    <td>27</td>
  </tr>
</table>
</body>
</html>

ملخص الفصل

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