إنشاء الجداول في اتش تي إم إل HTML Table
فن إنشاء وتنسيق الجداول في صفحات الويب HTML
جداول HTML تُستخدم لتنظيم وعرض البيانات في صفحات الويب. تعتبر الجداول وسيلة فعّالة لترتيب المعلومات في شكل مرتب وسهل القراءة. فيما يلي شرح لكيفية إنشاء جداول HTML:
العنصر <table>:
يستخدم هذا العنصر لبداية إنشاء جدول في صفحة HTML.
يمكنك وضعه في أي مكان داخل العناصر <body>.
<table> <!-- هنا سيتم وضع بقية العناصر المتعلقة بالجدول --> </table>
العنصر <tr> (صف الجدول):
يستخدم لتحديد صف في الجدول. يتم وضعه داخل عنصر <table> ويحتوي عادة على عناصر الخلية <td>.
<table> <tr> <!-- هنا ستوضع الخلايا المتعلقة بالصف --> </tr> </table>
العنصر <td> (خلية الجدول):
يستخدم لتحديد خلية في صف الجدول. يمكن أن يحتوي على أي نص أو عناصر أخرى.
<table> <tr> <td>محتوى الخلية</td> <!-- يمكن إضافة خلايا إضافية هنا --> </tr> </table>
العنصر <th> (خلية العنوان):
يستخدم لتحديد خلية في الصف العلوي للجدول، ويعتبر عنواناً للعمود أو الصف.
<table> <tr> <th>عنوان العمود 1</th> <th>عنوان العمود 2</th> </tr> <tr> <td>محتوى الخلية 1-1</td> <td>محتوى الخلية 1-2</td> </tr> <!-- يمكن إضافة صفوف إضافية هنا --> </table>
العنصر <caption> (توضيح الجدول):
يستخدم لإضافة توضيح أو عنوان للجدول، ويتم وضعه في بداية العنصر <table>.
<table> <caption>توضيح الجدول</caption> <!-- باقي عناصر الجدول هنا --> </table>
هذه هي العناصر الرئيسية التي تستخدم لإنشاء جداول HTML. يمكنك تكرار استخدام هذه العناصر لبناء جداول معقدة وتنسيقها بالطريقة التي تناسب تصميم صفحتك.
مثال شامل في صفحة اتش تي ام ال
إليك مثالًا بسيطًا لصفحة HTML تحتوي على جدول. في هذا المثال، سنقوم بإنشاء جدول يحتوي على بعض البيانات البسيطة:
<!DOCTYPE html> <html lang="ar" dir=rtl> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>صفحة الجدول البسيطة</title> </head> <body> <h1>مثال على جدول HTML</h1> <table border="1"> <caption>بيانات الطلاب</caption> <tr> <th>الرقم التسلسلي</th> <th>اسم الطالب</th> <th>العمر</th> <th>الصف</th> </tr> <tr> <td>1</td> <td>أحمد</td> <td>20</td> <td>الصف العاشر</td> </tr> <tr> <td>2</td> <td>فاطمة</td> <td>18</td> <td>الصف الثاني عشر</td> </tr> <tr> <td>3</td> <td>محمد</td> <td>22</td> <td>الصف التاسع</td> </tr> </table> </body> </html>
في هذا المثال:
تم استخدام العنصر <table> لبدء الجدول.
العنصر <caption> يتم استخدامه لتوضيح الجدول.
العنصر <tr> يُستخدم لتحديد صفوف الجدول.
العنصر <th> يستخدم لتحديد خلايا العناوين في الجدول.
العنصر <td> يستخدم لتحديد خلايا البيانات في الجدول.
تم إضافة الخاصية border=”1″ لإظهار حدود الجدول لأغراض التوضيح.
يمكنك نسخ هذا الكود وتشغيله في محرر نصوص أو متصفح لرؤية كيف يتم عرض الجدول.
كيف يمكن انشاء جدول خطوة بخطوة ؟
بالطبع، إليك شرح خطوة بخطوة لإنشاء جدول في HTML:
الخطوة 1: بداية الصفحة HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My HTML Table</title> </head> <body>
الخطوة 2: إنشاء الجدول باستخدام <table>
<table> <!-- سيتم وضع محتوى الجدول هنا --> </table>
الخطوة 3: إضافة صفوف الجدول باستخدام <tr>
<table> <tr> <!-- سيتم وضع خلايا الصف هنا --> </tr> </table>
الخطوة 4: إضافة عناوين للصفوف باستخدام <th>
<table> <tr> <th>عنوان العمود 1</th> <th>عنوان العمود 2</th> <!-- يمكنك إضافة عناوين إضافية للعمود هنا --> </tr> </table>
الخطوة 5: إضافة بيانات الجدول باستخدام <td>
<table> <tr> <th>عنوان العمود 1</th> <th>عنوان العمود 2</th> </tr> <tr> <td>بيانات الصف 1</td> <td>بيانات الصف 2</td> <!-- يمكنك إضافة بيانات إضافية للصف هنا --> </tr> </table>
الخطوة 6: إضافة المزيد من الصفوف والبيانات
<table> <tr> <th>عنوان العمود 1</th> <th>عنوان العمود 2</th> </tr> <tr> <td>بيانات الصف 1</td> <td>بيانات الصف 2</td> </tr> <!-- يمكنك إضافة المزيد من الصفوف والبيانات هنا --> </table>
الخطوة 7: إغلاق صفحة HTML
</body> </html>
قم بنسخ ولصق هذا الكود في محرر نصوص أو محرر HTML وقم بحفظه كملف HTML، ثم افتح الملف في متصفح الويب لرؤية الجدول البسيط الذي أنشأته. يمكنك تكرار العمليات الخطوة بخطوة لإضافة صفوف وعناوين إضافية وتخصيص الجدول حسب احتياجاتك.
كيف يمكن انشاء ترويسة للجدول؟
يمكنك إنشاء ترويسة للجدول باستخدام العنصر <thead> في HTML. ترويسة الجدول تحتوي عادة على عناصر <th> (خلايا الترويسة) التي تعمل كعناوين للأعمدة. إليك كيفية إضافة ترويسة إلى الجدول:
<!DOCTYPE html> <html lang="en" dir=rtl> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Table with Header</title> </head> <body> <table border="1"> <!-- بداية ترويسة الجدول --> <thead> <tr> <th>عنوان العمود 1</th> <th>عنوان العمود 2</th> <!-- يمكنك إضافة عناوين إضافية للأعمدة هنا --> </tr> </thead> <!-- نهاية ترويسة الجدول --> <!-- بداية بيانات الجدول --> <tbody> <tr> <td>بيانات الصف 1</td> <td>بيانات الصف 2</td> <!-- يمكنك إضافة بيانات إضافية للصف هنا --> </tr> <tr> <td>بيانات الصف 3</td> <td>بيانات الصف 4</td> <!-- يمكنك إضافة بيانات إضافية للصف هنا --> </tr> </tbody> <!-- نهاية بيانات الجدول --> </table> </body> </html>
في هذا المثال:
تم استخدام العنصر <thead> لتحديد ترويسة الجدول.
داخل <thead>، تم استخدام <tr> لتحديد صف في ترويسة الجدول.
داخل كل <tr> في <thead>، تم استخدام <th> لتحديد خلية في ترويسة الجدول.
العنصر <tbody> يستخدم لتحديد بداية بيانات الجدول.
هذا الكود يقوم بإنشاء جدول مع ترويسة وبيانات، ويمكنك تكرار هذا النمط لإضافة صفوف إضافية حسب احتياجاتك.
كيف يمكن وضع حدود للجدول
يمكنك وضع حدود للجدول في HTML باستخدام خاصية الحدود (border). يمكنك إضافة هذه الخاصية إلى عنصر <table> في HTML لتحديد عرض ولون الحدود. إليك كيف يمكنك فعل ذلك:
<!DOCTYPE html> <html lang="en" dir=rtl> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Table with Borders</title> </head> <body> <!-- إضافة الخاصية border إلى عنصر الجدول --> <table border="1"> <thead> <tr> <th>عنوان العمود 1</th> <th>عنوان العمود 2</th> </tr> </thead> <tbody> <tr> <td>بيانات الصف 1</td> <td>بيانات الصف 2</td> </tr> <tr> <td>بيانات الصف 3</td> <td>بيانات الصف 4</td> </tr> </tbody> </table> </body> </html>
في هذا المثال، تم إضافة border=”1″ إلى عنصر <table>، وهو يعني أنه سيتم عرض حدود الجدول بعرض ولون افتراضي. يمكنك تخصيص هذه القيمة حسب احتياجاتك.
يمكنك أيضًا تعيين قيمة لخاصية border مباشرة من خلال CSS لتحقيق التحكم الأكبر في مظهر الحدود. على سبيل المثال:
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
</style>
في هذا المثال، تم استخدام CSS لتحديد خاصية border-collapse لتحديد كيف يتم تجميع حدود الجدول، وتم تعيين خاصية border وأخرى لتنسيق حدود الخلايا.
كيف يمكن وضع حدود مستديرة للجدول؟
يمكنك وضع حدود مستديرة للجدول في HTML باستخدام CSS. لتحقيق هذا، يمكنك استخدام خاصية border-radius لتحديد شكل حواف الجدول بحيث تصبح مستديرة. إليك كيفية القيام بذلك:
<!DOCTYPE html>
<html lang="ar" dir=rtl>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>جدول بحدود مستديرة</title>
<style>
table {
width: 100%;
border-collapse: collapse;
border-radius: 10px; /* تحديد شكل حواف الجدول بحيث تصبح مستديرة */
overflow: hidden; /* لضمان عدم ظهور حواف زائدة خارج الجدول */
}
th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>عنوان العمود 1</th>
<th>عنوان العمود 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>بيانات الصف 1</td>
<td>بيانات الصف 2</td>
</tr>
<tr>
<td>بيانات الصف 3</td>
<td>بيانات الصف 4</td>
</tr>
</tbody>
</table>
</body>
</html>
في هذا المثال:
تم استخدام خاصية border-radius مع قيمة 10px لجعل حواف الجدول مستديرة.
تم استخدام border-collapse: collapse; لضمان عدم وجود فراغات بين حدود الخلايا.
تم استخدام overflow: hidden; لضمان عدم ظهور حواف زائدة خارج الجدول.
تم تحديد ألوان الخلفية والحدود لخلايا الجدول وعنوان الجدول باستخدام خصائص CSS الأخرى.
كيف يمكن دمج بعض الخلايا في الجدول؟
يمكنك دمج بعض الخلايا في الجدول باستخدام عناصر الدمج في HTML، وهي <colspan> و <rowspan>.
colspan: يستخدم لدمج خلايا عبر عدة أعمدة.
rowspan: يستخدم لدمج خلايا عبر عدة صفوف.
إليك كيفية استخدام هذه العناصر:
<!DOCTYPE html>
<html lang="ar" dir=rtl>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>جدول مع دمج للخلايا</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>اسم العميل</th>
<th colspan="2">تفاصيل الطلب</th>
</tr>
<tr>
<th></th>
<th>المنتج</th>
<th>الكمية</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">عميل 1</td>
<td>منتج 1</td>
<td>5</td>
</tr>
<tr>
<td>منتج 2</td>
<td>3</td>
</tr>
<tr>
<td>عميل 2</td>
<td>منتج 3</td>
<td>7</td>
</tr>
</tbody>
</table>
</body>
</html>
في هذا المثال:
تم استخدام colspan=”2″ لدمج خلية في الصف العلوي عبر عمودين.
تم استخدام rowspan=”2″ لدمج خلية في الصف الأيسر عبر صفين.
تم استخدام rowspan=”2″ لدمج خلية في الصف الأخير عبر صفين.
تستطيع تعديل هذه القيم وفقًا لتصميم الجدول الذي تحتاجه.
كيف يمكن عمل تباعد بين خلايا الجدول؟
يمكنك إضافة تباعد بين خلايا الجدول باستخدام خاصية padding في CSS.
تُستخدم هذه الخاصية لتحديد المسافة بين حواف الخلية ومحتواها. إليك مثال يظهر كيفية إضافة تباعد إلى خلايا الجدول:
<!DOCTYPE html>
<html lang="ar" dir=rtl>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>جدول مع تباعد بين الخلايا</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 15px; /* تحديد التباعد بين حواف الخلية ومحتواها */
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>اسم العميل</th>
<th>تفاصيل الطلب</th>
<th>المنتج</th>
<th>الكمية</th>
</tr>
</thead>
<tbody>
<tr>
<td>عميل 1</td>
<td>منتج 1</td>
<td>5</td>
</tr>
<tr>
<td>عميل 2</td>
<td>منتج 2</td>
<td>3</td>
</tr>
<tr>
<td>عميل 3</td>
<td>منتج 3</td>
<td>7</td>
</tr>
</tbody>
</table>
</body>
</html>
في هذا المثال، تم استخدام padding: 15px; لتحديد تباعد بمقدار 15 بيكسلًا بين حواف الخلية ومحتواها. يمكنك تعديل هذه القيمة حسب احتياجات التصميم الخاصة بك.
كيف يكمنك تطبيق بعض الالوان على الجدول
يمكنك تطبيق ألوان على الجدول باستخدام CSS. يمكنك تحديد ألوان الخلفية والحدود لخلايا الجدول وعناصر أخرى باستخدام الخصائص المناسبة في CSS. إليك مثال يظهر كيف يمكن تطبيق بعض الألوان على جدول:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>جدول مع تطبيق الألوان</title>
<style>
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 15px;
}
th {
background-color: #f2f2f2;
}
/* تطبيق ألوان خاصة للصفوف زوجية */
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
/* تحديد ألوان النصوص والحدود للعناصر التي تحمل الفئة highlight */
.highlight {
color: #ffffff;
background-color: #007bff;
border: 2px solid #0056b3;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>اسم العميل</th>
<th>تفاصيل الطلب</th>
<th>المنتج</th>
<th>الكمية</th>
</tr>
</thead>
<tbody>
<tr>
<td>عميل 1</td>
<td>منتج 1</td>
<td>5</td>
</tr>
<tr>
<td>عميل 2</td>
<td>منتج 2</td>
<td>3</td>
</tr>
<tr class="highlight">
<td>عميل 3</td>
<td>منتج 3</td>
<td>7</td>
</tr>
</tbody>
</table>
</body>
</html>
في هذا المثال:
تم استخدام background-color لتحديد لون خلفية العناصر.
تم استخدام color لتحديد لون النص.
تم استخدام border لتحديد لون الحدود.
تم استخدام nth-child(even) لتحديد الصفوف الزوجية وتطبيق لون خاص لها.
تم إضافة فئة .highlight لصف وتطبيق ألوان خاصة له.
يمكنك تعديل القيم واستخدام الألوان التي تفضلها لتناسب تصميم صفحتك.
كيف يمكن تطبيق بعض الأنماط على الجدول؟
يمكنك تطبيق بعض الأنماط على الجدول باستخدام CSS لتحسين تصميم الجدول. يمكنك استخدام خصائص CSS المختلفة لتحديد الأنماط التي تناسب احتياجاتك. فيما يلي بعض الأنماط الشائعة التي يمكنك تطبيقها:
تحديد الحواف:
يمكنك تحديد لون وعرض الحدود لتحديد الحواف.
يمكن تحقيق ذلك باستخدام خاصيتي border-color و border-width.
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 2px solid #dddddd;
padding: 8px;
text-align: left;
}
تحديد الخلفية للصفوف المتناوبة:
يمكنك تحديد لون خلفية مختلف للصفوف المتناوبة باستخدام nth-child(even).
tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
تحديد الألوان للعناصر عند التحديد:
يمكنك تحديد ألوان خاصة للعناصر عند التحديد باستخدام الخاصية :hover.
tbody tr:hover {
background-color: #e6f7ff;
}
تحديد خلفية للترويسة:
يمكنك تحديد لون خلفية خاص لعناصر الترويسة.
th {
background-color: #4CAF50;
color: white;
}
تحديد لون النص للعناصر بفئة معينة:
يمكنك تحديد لون النص للعناصر التي تحمل فئة معينة.
highlight {
color: #ff0000; /* أحمر */
}
.
قم بتكامل هذه القواعد في جزء الستايل في وثيقة HTML لتطبيق الأنماط على الجدول وضبطها وفقًا لتصميمك الخاص.
مثال كامل في صفحة
إليك مثال كامل على صفحة HTML تحتوي على جدول مُطبَّق عليه بعض الأنماط:
<!DOCTYPE html>
<html lang="ar" dir=rtl>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>جدول بأنماط</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 2px solid #dddddd;
padding: 10px;
text-align: left;
}
tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
tbody tr:hover {
background-color: #e6f7ff;
}
th {
background-color: #4CAF50;
color: white;
}
.highlight {
color: #ff0000;
}
</style>
</head>
<body>
<h2>مثال على جدول بأنماط</h2>
<table>
<thead>
<tr>
<th>اسم العميل</th>
<th>تفاصيل الطلب</th>
<th>المنتج</th>
<th>الكمية</th>
</tr>
</thead>
<tbody>
<tr>
<td>عميل 1</td>
<td>منتج 1</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>عميل 2</td>
<td>منتج 2</td>
<td>3</td>
<td>5</td>
</tr>
<tr class="highlight">
<td>عميل 3</td>
<td>منتج 3</td>
<td>7</td>
<td>5</td>
</tr>
<tr>
<td>عميل 4</td>
<td>منتج 4</td>
<td>2</td>
<td>5</td>
</tr>
</tbody>
</table>
</body>
</html>
في هذا المثال، تم تطبيق أنماط مختلفة على الجدول:
تم تحديد ألوان لحواف الجدول والترويسة.
تم تحديد خلفية مختلفة للصفوف المتناوبة.
تم تطبيق تأثير عند تحديد الصف باستخدام :hover.
تم تحديد لون خاص لعنصر يحمل الفئة .highlight.
يمكنك نسخ هذا الكود وتجربته في محرر نصوص أو متصفح لرؤية كيف تتغير أنماط الجدول عند تطبيق هذه القواعد.
اختبار اختيار من متعدد عن هذا الدرس:
اليك اختبار اختيار من متعدد حول درس الجداول في HTML مع الشرح. يرجى الإجابة على الأسئلة بعد قراءة الشرح أعلاه.
السؤال 1:
ما العنصر الذي يُستخدم لإنشاء جدول في HTML؟
<table>
<div>
<ul>
<span>
الشرح:
لإنشاء جدول في HTML، يُستخدم العنصر <table>.
السؤال 2:
كيف يمكن دمج خلايا في الجدول؟
<colspan> و <rowspan>
<merge> و <split>
<combine> و <break>
<merge-cell> و <split-cell>
الشرح:
يمكن دمج خلايا الجدول باستخدام عناصر <colspan> و <rowspan>.
السؤال 3:
كيف يمكن تحديد لون خلفية الصفوف المتناوبة في الجدول باستخدام CSS؟
odd-row
even-row
alternate-row
nth-child(even)
الشرح:
يمكن تحديد لون خلفية الصفوف المتناوبة في الجدول باستخدام nth-child(even).
السؤال 4:
ما الخاصية التي يُستخدمها CSS لتحديد تباعد بين حواف الخلايا في الجدول؟
cell-spacing
padding
cell-padding
margin
الشرح:
يُستخدم padding في CSS لتحديد تباعد بين حواف الخلايا في الجدول.
السؤال 5:
كيف يمكن تحديد لون الحدود وعرضها في الجدول باستخدام CSS؟
border-color و border-width
border-style و border-spacing
line-color و line-width
outline-color و outline-width
الشرح:
يمكن تحديد لون الحدود وعرضها في الجدول باستخدام border-color و border-width في CSS.
السؤال 6:
كيف يمكن تحديد خلفية الترويسة في الجدول باستخدام CSS؟
header-background
th-background-color
th { background-color: … }
thead { background-color: … }
الشرح:
يمكن تحديد خلفية الترويسة في الجدول باستخدام th { background-color: … } في CSS.
السؤال 7:
كيف يمكن تحديد لون النص للصف الذي يحمل فئة معينة باستخدام CSS؟
.row-text-color { color: … }
.highlight { text-color: … }
.highlight { color: … }
.row { text-color: … }
الشرح:
يمكن تحديد لون النص للصف الذي يحمل فئة معينة باستخدام .highlight { color: … } في CSS.
السؤال 8:
ما هي الطريقة لتطبيق أنماط خاصة عند تحديد الخلية في الجدول باستخدام CSS؟
.table-cell:hover { background-color: … }
td:active { background-color: … }
td:hover { background-color: … }
.table-row:hover td { background-color: … }
الشرح:
يمكن تطبيق أنماط خاصة عند تحديد الخلية في الجدول باستخدام td:hover { background-color: … } في CSS.
السؤال 9:
كيف يمكن تحديد خلفية الصف الذي يحمل فئة معينة باستخدام CSS؟
.highlight-row { background-color: … }
.row-background { color: … }
.row { background-color: … }
.row:background { color: … }
الشرح:
يمكن تحديد خلفية الصف الذي يحمل فئة معينة باستخدام .highlight-row { background-color: … } في CSS.
السؤال 10:
كيف يمكن تحديد الحواف بشكل مستدير في الجدول باستخدام CSS؟
border-curve: rounded;
border-radius: 10px;
table { border-shape: rounded; }
td { border-curve: 5px; }
الشرح:
يمكن تحديد الحواف بشكل مستدير في الجدول باستخدام border-radius: 10px; في CSS.