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

Nov. 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>