HTML Tables | In Arabic

سوف نتعلم فى هذا الفصل “HTML Tables” كل المعلومات والتفاصيل حول الجداول فى HTML وكيفية إستخدامها والتعديل عليها ومتى تستخدمها بطريقة صحيحة.

الجداول في HTML

هناك عدة أنواع من المعلومات التي يجب عرضها على هيئة جدول Table، على سبيل المثال:

1. مستخدمين موقعك.
2. النتائج الرياضية.
3. الأسهم التقارير والجداول الزمنية لتدريب، ..إلخ.

عند تمثيل المعلومات في جدول عليك التفكير فى التكوين الشبكى حيث يتكون من صفوف rows وأعمدة columns. تسمح لنا الشبكات بفهم بيانات معقدة من خلال الرجوع إليها. تتم الإشارة إلى كل block في الشبكة كخلية Cell فى جدول، في لغة HTML الجدول مكتوب صفًا تلو الآخر.

ترسم بعض المتصفحات تلقائيًا خطوط حول الجدول او الخلايا الفردية. يمكنك التحكم في هذه الحدود borders بإستخدام خاصية الـ border الموجودة فى CSS.

<table>
    <tr>
        <th>User</th>
        <th>Mail</th>
        <th>Gender</th>
    </tr>
    <tr>
        <td>Mohamed</td>
        <td>mohamed.ahmed2000@gmail.com</td>
        <td>Male</td>
    </tr>
    <tr>
        <td>Noor</td>
        <td>noor.mohamed22@gmail.com</td>
        <td>Female</td>
    </tr>
    <tr>
        <td>Eman</td>
        <td>eman.ahmed2002@yahoo.com</td>
        <td>Female</td>
    </tr>
</table>

كيفية تعريف جدول HTML؟ – HTML Tables

لتعريف جدول HTML نستخدم عنصر الـ <table> لعرض البيانات الجدولية (أي المعلومات المقدمة في جدول ثنائي الأبعاد يتكون من صفوف rows وأعمدة columns من الخلايا التي تحتوي على بيانات).

داخل عنصر الـ <table>، هناك بعض العناصر نستخدمها لتعريف الصفوف والأعمدة والبيانات الخاصة بالجدول، وهم:

1. <tr>: لتعريف كل صف row في الجدول.
2. <th>: لتعريف رأس header جدول.
3. <td>: لتعريف بيانات كل خلية cell في الجدول. عناصر <td> هي حاويات بيانات الجدول يمكن أن تحتوي على جميع أنواع عناصر HTML (النص والصور والقوائم، …إلخ).

مثال للتوضيح:

<table>
    <tr>
        <th>Product ID</th>
        <th>Product Name</th>
        <th>Product Description</th>
        <th>Product Price</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Product 1</td>
        <td>Description of product 1...</td>
        <td>$30</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Product 2</td>
        <td>Description of product 2...</td>
        <td>$40</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Product 3</td>
        <td>Description of product 3...</td>
        <td>$50</td>
    </tr>
</table>

حدود الجدول – Table border

لإضافة حد إلى جدول، استخدم خاصية border الموجوده فى CSS، كالتالى:

<style>
    table, th, td {
        border: 1px solid black;
    }
</style>

<table>
    <tr>
        <th>Product ID</th>
        <th>Product Name</th>
        <th>Product Description</th>
        <th>Product Price</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Product 1</td>
        <td>Description of product 1...</td>
        <td>$30</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Product 2</td>
        <td>Description of product 2...</td>
        <td>$40</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Product 3</td>
        <td>Description of product 3...</td>
        <td>$50</td>
    </tr>
</table>

إزالة الحدود الداخلية من الجدول – Border collapse

إذا تريد ان يظهر الجدول بشكل أفضل، يمكنك استخدام خاصية border-collapse لإزالة الحدود الداخلية من الجدول، كالتالي:

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

تباعد الحدود – Border spacing

يمكنك إضافة تباعد للحدود (المسافة بين الخلايا) عن طريق استخدم خاصية border-spacing، كالتالى:

table {
  border-spacing: 5px;
}

الجداول الأكثر دلالية وتنظيم

هناك ثلاثة عناصر تساعد على التمييز بين المحتوى الرئيسي للجدول و الصفوف الأولى والأخيرة، وهم:

1. <thead>: يٌستخدم لتجميع محتوى رأس header جدول HTML.
2. <tbody>: يٌستخدم لتجميع المحتوى الرئيسي/جسم جدول HTML.
   
3. <tfoot>: يٌستخدم لتجميع محتوى تذييل footer او نهاية جدول HTML.

هذه العناصر تساعد الذين يستخدمون قارئات الشاشة. كما تسمح لك بتصميم هذه الأقسام بطريقة مختلفة عن بقية الجدول.

مثال للتوضيح:

<table>
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Laptop</td>
            <td>$1000</td>
        </tr>
        <tr>
            <td>iPhone</td>
            <td>$2000</td>
        </tr>
        <tr>
            <td>Keyboard</td>
            <td>$500</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>$3500</td>
        </tr>
    </tfoot>
</table> 

إضافة caption للجدول

لإضافة caption (عنوان فرعى / تسمية للتوضيح) إلى جدول HTML، استخدم وسم <caption>، كالتالى:

<table>
    <caption>Users Information</caption>
    <tr>
        <th>Username</th>
        <th>Age</th>
        <th>Gender</th>
    </tr>
    <tr>
        <td>Mohamed</td>
        <td>20</td>
        <td>Male</td>
    </tr>
    <tr>
        <td>Mona</td>
        <td>39</td>
        <td>Female</td>
    </tr>
    <tr>
        <td>Hamed</td>
        <td>40</td>
        <td>Male</td>
    </tr>
</table>

الأعمدة المُمتدة – Spanning Column

في بعض الأحيان قد تحتاج إلى إدخالات في جدول لتمتد عبر أكثر من عمود، لجعل خلية Cell تمتد على أكثر من عمود، استخدم السمة colspan، كالتالى:

<style>
    th, td, table {
        border-collapse: collapse;
        border: 1px solid #999;
    }
    
    th, td {
        padding: 20px;
    }
</style>
<table>
    <tr>
        <th>Number</th>
        <th colspan="2">Languages and Percent</th>
    </tr>
    <tr>
        <td>1</td>
        <td>HTML</td>
        <td>90%</td>
    </tr>
    <tr>
        <td>2</td>
        <td>CSS</td>
        <td>91%</td>
    </tr>
    <tr>
        <td>3</td>
        <td>JavaScript</td>
        <td>95%</td>
    </tr>
</table>

الصفوف المُمتدة – Spanning Rows

قد تحتاج أيضًا إلى إدخالات في جدول لتمتد عبرها أكثر من صف. للقيام بذلك استخدم سمة rowspan، كالتالى:

<table>
    <tr>
        <th>Language</th>
        <td>HTML</td>
        <td>CSS</td>
        <td>JavaScript</td>
    </tr>
    <tr>
        <th rowspan="2">Percents</th>
        <td>2019 - 90%</td>
        <td>2019 - 90%</td>
        <td>2019 - 93%</td>
    </tr>
    <tr>
        <td>2021 - 92%</td>
        <td>2021 - 95%</td>
        <td>2021 - 98%</td>
    </tr>
</table>