علامة جدول HTML يستخدم لعرض البيانات في شكل جدول (صف * عمود). يمكن أن يكون هناك العديد من الأعمدة على التوالي.

يمكننا إنشاء جدول لعرض البيانات في شكل جدولي، وذلك باستخدام

في كل جدول، يتم تعريف صف الجدول بواسطةالعلامة، يتم تعريف رأس الجدول بواسطة، ويتم تعريف بيانات الجدول بواسطةالعلامات.

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

علامات جدول HTML

مثال جدول HTML

دعونا نرى مثال علامة جدول HTML. ويظهر الإخراج أعلاه.

 <table class="table"> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table> 

انتاج:

طوبولوجيا النجوم

في جدول HTML أعلاه، يوجد 5 صفوف و3 أعمدة = 5 * 3 = 15 قيمة.

جدول HTML مع الحدود

هناك طريقتان لتحديد الحدود لجداول HTML.

1. حسب سمة الحدود للجدول في HTML
2. عن طريق خاصية الحدود في CSS

1) سمة حدود HTML

يمكنك استخدام سمة الحدود لعلامة الجدول في HTML لتحديد الحدود. لكن لا ينصح به الآن.

 <table class="table"> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table> 

انتاج:

2) خاصية الحدود CSS

يوصى الآن باستخدام خاصية border في CSS لتحديد الحدود في الجدول.

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

يمكنك طي كافة الحدود في حد واحد عن طريق خاصية طي الحدود. سوف تنهار الحدود إلى واحدة.

الفرق بين الجيجابايت والميجابايت

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

انتاج:

جدول HTML مع حشوة الخلية

يمكنك تحديد المساحة المتروكة لرأس الجدول وبيانات الجدول بطريقتين:

1. بواسطة سمة cellpadding الجدول في HTML
2. عن طريق الحشو الخاصية في CSS

أصبحت سمة cellpadding الخاصة بعلامة جدول HTML قديمة الآن. يوصى باستخدام CSS. لذلك دعونا نرى كود CSS.

 table, th, td { border: 1px solid pink; border-collapse: collapse; } th, td { padding: 10px; } 

انتاج:

عرض جدول HTML:

يمكننا تحديد عرض جدول HTML باستخدام عرض CSS ملكية. يمكن تحديده بالبكسل أو النسبة المئوية.

يمكننا تعديل عرض طاولتنا وفقًا لمتطلباتنا. فيما يلي المثال لعرض الجدول بالعرض.

 table{ width: 100%; } 

مثال:

 table table{ border-collapse: collapse; width: 100%; } th,td{ border: 2px solid green; padding: 15px; } <table class="table"> <tr> <th>1 header</th> <th>1 header</th> <th>1 header</th> </tr> <tr> <td>1data</td> <td>1data</td> <td>1data</td> </tr> <tr> <td>2 data</td> <td>2 data</td> <td>2 data</td> </tr> <tr> <td>3 data</td> <td>3 data</td> <td>3 data</td> </tr> </table> 

انتاج:

جدول HTML مع colspan

إذا كنت تريد جعل الخلية تمتد لأكثر من عمود واحد، فيمكنك استخدام سمة colspan.

سيتم تقسيم خلية/صف واحد إلى أعمدة متعددة، ويعتمد عدد الأعمدة على قيمة سمة colspan.

دعونا نرى المثال الذي يمتد على عمودين.

كود CSS:

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

كود HTML:

 <table class="table"> <tr> <th>Name</th> <th>Mobile No.</th> </tr> <tr> <td>Ajeet Maurya</td> <td>7503520801</td> <td>9555879135</td> </tr> </table> 

انتاج:

جدول HTML مع امتداد الصفوف

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

سيتم تقسيم الخلية إلى صفوف متعددة. يعتمد عدد الصفوف المقسمة على قيم امتداد الصفوف.

دعونا نرى المثال الذي يمتد على صفين.

كود CSS:

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

كود HTML:

 <table class="table"> <tr><th>Name</th><td>Ajeet Maurya</td></tr> <tr><th>Mobile No.</th><td>7503520801</td></tr> <tr><td>9555879135</td></tr> </table> 

انتاج:

جدول HTML مع تسمية توضيحية

يتم عرض التسمية التوضيحية بتنسيق HTML أعلى الجدول. يجب استخدامه بعد علامة الجدول فقط.

 <table class="table"> Student Records <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr> <tr><td>Mike</td><td>Warn</td><td>60</td></tr> <tr><td>Shane</td><td>Warn</td><td>42</td></tr> <tr><td>Jai</td><td>Malhotra</td><td>62</td></tr> </table> 

تصميم جدول HTML للخلايا الزوجية والفردية

كود CSS:

شريط أدوات الوصول السريع للكلمة

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } table#alter tr:nth-child(even) { background-color: #eee; } table#alter tr:nth-child(odd) { background-color: #fff; } table#alter th { color: white; background-color: gray; } 

انتاج:

ملاحظة: يمكنك أيضًا إنشاء أنواع مختلفة من الجداول باستخدام خصائص CSS مختلفة في الجدول الخاص بك.

دعم المتصفحات

عنصر	كروم	أي	ثعلب النار	الأوبرا	سفاري
	نعم	نعم	نعم	نعم	نعم