تقنية

دليل شامل لإنشاء الجداول في HTML مع التنسيق والتحسينات

ouwayess1@gmail.com 12 مارس، 2025

0 705 2 دقائق

دليل شامل لإنشاء الجداول في HTML مع التنسيق والتحسينات

1. الهيكل الأساسي للجدول في HTML

الجدول في HTML يتكون من ثلاث عناصر رئيسية:

<table>: يُحدد بداية ونهاية الجدول.
<tr>: يُحدد صفًا (Table Row).
<td>: يُحدد خلية بيانات (Table Data).

مثال بسيط:

<table>
  <tr>
    <td>اسم الطالب</td>
    <td>العمر</td>
  </tr>
  <tr>
    <td>أحمد</td>
    <td>25</td>
  </tr>
</table>

Run HTML

2. إضافة عناوين للجدول باستخدام `<th>`

<th>: يُستخدم لعناوين الأعمدة أو الصفوف (مثل: “الاسم”، “العمر”).

مثال:

<table>
  <tr>
    <th>الاسم</th>
    <th>العمر</th>
  </tr>
  <tr>
    <td>أحمد</td>
    <td>25</td>
  </tr>
</table>

Run HTML

3. إضافة حدود للجدول

استخدم السمة border داخل وسم <table> لإضافة حدود بسيطة:
html
Copy
```
<table border="1">
  
</table>
```
Run HTML
ملاحظة: يُفضل استخدام CSS للتنسيق المتقدم.

4. دمج الخلايا (Colspan و Rowspan)

colspan: لدمج خلايا أفقية (في نفس الصف).
html
Copy
```
<td colspan="2">هذه الخلية تشغل عمودين</td>
```
Run HTML
rowspan: لدمج خلايا رأسية (في نفس العمود).
html
Copy
```
<td rowspan="2">هذه الخلية تشغل صفين</td>
```
Run HTML

5. إضافة عنوان للجدول باستخدام `<caption>`

<table>
  <caption>جدول بيانات الطلاب</caption>
  <!-- الصفوف والخلايا -->
</table>

Run HTML

6. تنسيق الجدول باستخدام CSS

إضافة حدود أنيقة:

table {
  border-collapse: collapse; /* يدمج الحدود */
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: right;
}

تغيير لون الخلفية للعناوين:
css
Copy
```
th {
  background-color: #f2f2f2;
}
```

تأثيرات التمرير (Hover):

tr:hover {
  background-color: #f5f5f5;
}

7. تحسين الجدول لـ SEO وإمكانية الوصول

استخدم scope في <th>:
html
Copy
```
<th scope="col">الاسم</th>
```
Run HTML
- scope="col": للعناوين الأفقية.
- scope="row": للعناوين الرأسية.
أضف وصفًا باستخدام aria-label:
html
Copy
```
<table aria-label="جدول بيانات الطلاب">
```
Run HTML

8. أخطاء شائعة يجب تجنبها

عدم استخدام العناوين (<th>): يؤثر على إمكانية الوصول وفهم المحتوى.
الإفراط في دمج الخلايا: يجعل الجدول معقدًا للقراءة.
استخدام الجداول للتخطيط العام: الجداول مخصصة للبيانات الجدولية فقط.

9. مثال متكامل مع التنسيق

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>جدول بيانات الطلاب</title>
    <style>
        table {
            border-collapse: collapse;
            width: 80%;
            margin: 20px auto;
            font-family: Arial, sans-serif;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: center;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        tr:hover {
            background-color: #f1f1f1;
        }
        caption {
            font-size: 1.2em;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <table>
        <caption>جدول بيانات الطلاب</caption>
        <tr>
            <th scope="col">الاسم</th>
            <th scope="col">العمر</th>
            <th scope="col">المعدل</th>
        </tr>
        <tr>
            <td>أحمد</td>
            <td>25</td>
            <td>90%</td>
        </tr>
        <tr>
            <td>فاطمة</td>
            <td>22</td>
            <td>95%</td>
        </tr>
    </table>
</body>
</html>

Run HTML

10. نصائح لتحسين SEO

استخدم كلمات مفتاحية في العناوين: مثل “جدول بيانات” أو “تصنيفات”.
اجعل البيانات واضحة: حتى تفهمها برامج الزحف (Crawlers).
تجنب الجداول الكبيرة جدًا: قد تبطئ تحميل الصفحة.

الخلاصة:
إنشاء الجداول في HTML سهل إذا اتبعت الهيكل الصحيح. استخدم <table>، <tr>، <th>، و <td>، وقم بتنسيق الجدول عبر CSS لجعله جذابًا وواضحًا!