الكورس

Advertisements

HTML Tables | In Arabic


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


 

الجداول في HTML

 

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

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

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

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

 

مثال للتوضيح

يوضح المثال التالي هيكل الجدول الأساسي:

User Mail Gender
Mohamed [email protected] Male
Noor [email protected] Female
Eman [email protected] Female
<table>
    <tr>
        <th>User</th>
        <th>Mail</th>
        <th>Gender</th>
    </tr>
    <tr>
        <td>Mohamed</td>
        <td>[email protected]</td>
        <td>Male</td>
    </tr>
    <tr>
        <td>Noor</td>
        <td>[email protected]</td>
        <td>Female</td>
    </tr>
    <tr>
        <td>Eman</td>
        <td>[email protected]</td>
        <td>Female</td>
    </tr>
</table>
User Mail Gender
Mohamed [email protected] Male
Noor [email protected] Female
Eman [email protected] Female

 

كيفية تعريف جدول 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>
Product ID Product Name Product Description Product Price
1 Product 1 Description of product 1… $30
2 Product 2 Description of product 2… $40
3 Product 3 Description of product 3… $50

بشكل افتراضي، يكون النص الموجود في عناصر <th> غامقًا ومتوسطًا. بينما في عناصر <td> عاديًا ومحاذيًا إلى اليسار.

استخدم عناصر <th> لعناوين الجدول حيث تساعد الناس الذين يستخدمون قارئات الشاشة ، ويحسن القدرة على محركات البحث لفهرسة صفحاتك ، وأيضًا تمكنك من السيطرة على مظهر الجداول بشكل أفضل عندما تبدأ في استخدام الـ CSS.


 

حدود الجدول – 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>
Product ID Product Name Product Description Product Price
1 Product 1 Description of product 1… $30
2 Product 2 Description of product 2… $40
3 Product 3 Description of product 3… $50

 

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

 

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

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
Product ID Product Name Product Description Product Price
1 Product 1 Description of product 1… $30
2 Product 2 Description of product 2… $40
3 Product 3 Description of product 3… $50

Advertisements

 

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

 

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

table {
  border-spacing: 5px;
}
Product ID Product Name Product Description Product Price
1 Product 1 Description of product 1… $30
2 Product 2 Description of product 2… $40
3 Product 3 Description of product 3… $50

يمكنك التحكم بالجدول كاملًا عن طريق CSS اضافة (إتجاه النص لون النص او الخلفية – إضافة padding للصفوف) كل شىء يمكنك التحكم به عن طريق الـ CSS وسوف تتعلم كل شىء فى كورس: CSS Tutorial.

 

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

 

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

  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> 
Product Price
Laptop $1000
iPhone $2000
Keyboard $500
Total $3500

 

إضافة 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>
Users Information
Username Age Gender
Mohamed 20 Male
Mona 39 Female
Hamed 40 Male

 

الأعمدة المُمتدة – 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>
Number Languages and Percent
1 HTML 90%
2 CSS 91%
3 JavaScript 95%

 

الصفوف المُمتدة – 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>
Language HTML CSS JavaScript
Percents 2019 – 90% 2019 – 90% 2019 – 93%
2021 – 92% 2021 – 95% 2021 – 98%

قَيم نفسك – Mini quiz


قُم بإجراء هذا الإختبار القصير على درس “HTML Tables” لمعرفة مدى فهمك وإستيعابك للمعلومات السابقة، ولتثبيت المعلومات.




الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements