الجداول (Tables) في HTML



7 نوفمبر، 2021 | تيتو 4 تك


  • تسمح جداول HTML لمبرمجي الويب بترتيب البيانات مثل النصوص والصور والروابط والجداول الأخرى وما إلى ذلك في صفوف وأعمدة من الخلايا.

    يتم إنشاء جداول HTML باستخدام علامة <table> حيث يتم استخدام علامة <tr> لإنشاء صفوف الجدول ويتم استخدام علامة <td> لإنشاء خلايا البيانات. العناصر الموجودة أسفل <td> عادية ومحاذاة إلى اليسار افتراضيًا

     

    <!DOCTYPE html>
    <html>
    
       <head>
          <title> HTML جداول </title>
       </head>
    	
       <body>
          <table border = "1">
             <tr>
                <td>Row 1, Column 1</td>
                <td>Row 1, Column 2</td>
             </tr>
             
             <tr>
                <td>Row 2, Column 1</td>
                <td>Row 2, Column 2</td>
             </tr>
          </table>
          
       </body>
    </html>

     

    سيؤدي هذا إلى النتيجة التالية :

     

    Row 1, Column 1 Row 1, Column 2
    Row 2, Column 1 Row 2, Column 2

     

    هنا ، الحد هو سمة لعلامة <table> ويتم استخدامه لوضع حد عبر جميع الخلايا. إذا لم تكن بحاجة إلى حد ، فيمكنك استخدام border = "0".

     

     

    enlightened  عنوان الجدول

     

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

     

    <!DOCTYPE html>
    <html>
    
       <head>
          <title> HTML عنوان جدول </title>
       </head>
    	
       <body>
          <table border = "1">
             <tr>
                <th>Name</th>
                <th>Salary</th>
             </tr>
             <tr>
                <td>Tito Hussien</td>
                <td>5000</td>
             </tr>
             
             <tr>
                <td>Mido Ahmed</td>
                <td>7000</td>
             </tr>
          </table>
       </body>
       
    </html>

     

    سيؤدي هذا إلى النتيجة التالية :

     

    Name Salary
    Tito Hussien 5000
    Mido Ahmed 7000

     

     

    enlightened   سمات الحشو والتباعد (Cellpadding and Cellspacing)

     

    هناك نوعان من السمتين هما الحشوة وتباعد الخلايا والتي ستستخدمها لضبط المساحة البيضاء في خلايا الجدول. تحدد خاصية تباعد الخلايا المسافة بين خلايا الجدول ، بينما تمثل الحشوة المسافة بين حدود الخلية والمحتوى داخل الخلية.

    <!DOCTYPE html>
    <html>
    
       <head>
          <title> تباعد خلايا الجدول </title>
       </head>
    	
       <body>
          <table border = "1" cellpadding = "5" cellspacing = "5">
             <tr>
                <th>Name</th>
                <th>Salary</th>
             </tr>
             <tr>
                <td>Tito</td>
                <td>5000</td>
             </tr>
             <tr>
                <td>Mido</td>
                <td>7000</td>
             </tr>
          </table>
       </body>
    	
    </html>

     

    سيؤدي هذا إلى النتيجة التالية :

     

     

    Name

     

    Salary

     

         Tito Hussien      

     

     

    5000

     

     

       Mido Ammed   

     

            7000      

     

     

    enlightened  سمات Colspan / Rowspan 

     

    ستستخدم سمة colspan إذا كنت تريد دمج عمودين أو أكثر في عمود واحد. بنفس الطريقة ستستخدم rowspan إذا كنت تريد دمج صفين أو أكثر.

     

    <!DOCTYPE html>
    <html>
    
       <head>
          <title> Colspan/Rowspan سمات </title>
       </head>
    	
       <body>
          <table border = "1">
             <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
             </tr>
             <tr>
                <td rowspan = "2">Row 1 Cell 1</td>
                <td>Row 1 Cell 2</td>
                <td>Row 1 Cell 3</td>
             </tr>
             <tr>
                <td>Row 2 Cell 2</td>
                <td>Row 2 Cell 3</td>
             </tr>
             <tr>
                <td colspan = "3">Row 3 Cell 1</td>
             </tr>
          </table>
       </body>
    	
    </html>

     

    سيؤدي هذا إلى النتيجة التالية :

     

    Column 1 Column 2 Column 3
    Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3
    Row 2 Cell 2 Row 2 Cell 3
    Row 3 Cell 1

     

     

    enlightened  ارتفاع الجدول وعرضه

     

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

     

    <!DOCTYPE html>
    <html>
    
       <head>
          <title> عرض و ارتفاع الجدول </title>
       </head>
    	
       <body>
          <table border = "1" width = "400" height = "150">
             <tr>
                <td>Row 1, Column 1</td>
                <td>Row 1, Column 2</td>
             </tr>
             
             <tr>
                <td>Row 2, Column 1</td>
                <td>Row 2, Column 2</td>
             </tr>
          </table>
       </body>
    	
    </html>

     

    سيؤدي هذا إلى النتيجة التالية :

     

    Row 1, Column 1 Row 1, Column 2
    Row 2, Column 1 Row 2, Column 2

     

     

    enlightened  رأس الجدول والجسم والتذييل

     

    يمكن تقسيم الجداول إلى ثلاثة أجزاء - رأس وجسم وتذييل. يشبه الرأس والتذييل إلى حد ما الرؤوس والتذييلات في مستند معالج بالكلمات يظلان كما هو لكل صفحة ، في حين أن الجسم أو النص هو حامل المحتوى الرئيسي للجدول.

    العناصر الثلاثة لفصل رأس ، وجسم ، و تذييل هي :

    <thead> - لإنشاء رأس جدول منفصل.

    <tbody> - للإشارة إلى الجسم الرئيسي للجدول.

    <tfoot> - لإنشاء تذييل جدول منفصل.

    قد يحتوي الجدول على عدة عناصر <tbody> للإشارة إلى صفحات أو مجموعات بيانات مختلفة. ولكن من الملاحظ أن علامتي <thead> و <tfoot> يجب أن تظهر قبل <tbody>

     

    <!DOCTYPE html>
    <html>
    
       <head>
          <title> HTML جدول </title>
       </head>
    	
       <body>
          <table border = "1" width = "100%">
             <thead>
                <tr>
                   <td colspan = "4">This is the head of the table</td>
                </tr>
             </thead>
             
             <tfoot>
                <tr>
                   <td colspan = "4">This is the foot of the table</td>
                </tr>
             </tfoot>
             
             <tbody>
                <tr>
                   <td>Cell 1</td>
                   <td>Cell 2</td>
                   <td>Cell 3</td>
                   <td>Cell 4</td>
                </tr>
             </tbody>
             
          </table>
       </body>
    	
    </html>

     

    سيؤدي هذا إلى النتيجة التالية :

     

    This is the head of the table
    This is the foot of the table
    Cell 4 Cell 3 Cell 2 Cell 1

     

     

    enlightened  الجداول المتداخلة (Nested)

     

    يمكنك استخدام جدول واحد داخل جدول آخر. لا يقتصر الأمر على الجداول فحسب ، بل يمكنك استخدام جميع العلامات تقريبًا داخل علامة بيانات الجدول <td>.

    مثال
    فيما يلي مثال على استخدام جدول آخر وعلامات أخرى داخل خلية جدول.

     

    <!DOCTYPE html>
    <html>
    
       <head>
          <title>HTML Table</title>
       </head>
    	
       <body>
          <table border = "1" width = "100%">
             
             <tr>
                <td>
                   <table border = "1" width = "100%">
                      <tr>
                         <th>Name</th>
                         <th>Salary</th>
                      </tr>
                      <tr>
                         <td>Tito Hussien</td>
                         <td>5000</td>
                      </tr>
                      <tr>
                         <td>Mido Ahmed</td>
                         <td>7000</td>
                      </tr>
                   </table>
                </td>
             </tr>
             
          </table>
       </body>
    	
    </html>