Attribute [align]: للتحكم في محاذاة الجدول إلى يمين أو يسار أو وسط الصفحة.
Attribute [cellpadding]: للتحكم في حجم مسافات الخلايا الداخلية بين المحتوى النصي أو المرئي وبين إطار الخلايا.
Attribute [cellspacing]: للتحكم بالمسافات الخارجية بين الخلايا.
Attribute [rules]: لوضع شروط للجدول.
Attribute [frame]: لوضع إطارات جانبية للجدول.
Attribute [summary]: لوضع ملخص غير مرئي لمطوري الويب.

</> Table Border Attribute in HTML
خاصية اطار الجدول في HTML

تُستخدم خاصية border في عنصر <table> لإضافة إطار خارجي للجدول ولجميع الخلايا. يتم تحديد قيمة سماكة الإطار باستخدام رقم فقط، مثل: ["border="1]. الرقم [1] يُمثل سماكة الإطار بوحدات البكسل تلقائيًا، ولا حاجة لكتابة [px].

جربها بنفسك

Setting Table Border Thickness in Pixels Using the Border Attribute in HTML

نستخدم خاصية border لعمل إطار خارجي للجدول والخلايا الداخلية، حيث تكتب قيمة السماكة الخارجية للإطار متبوعة بـ px.

<table border="1px">

Create a Simple HTML Table with Border Thickness Set Using the Border Attribute, Without Specifying Pixels

يمكن الاستغناء عن الـ px التي تتبع القيمة الرقمية.

<table border="1">
    <tr>  
      <th>Firstname</th> 
      <th>Lastname</th>
      <th>Email</th>
      <th>Age</th>
      <th>Study</th>
    </tr>
</body>

جربها بنفسك

px

px: هو اختصار لكلمة [pixel]، وهي وحدة قياس تُستخدم في تصميم الويب لتحديد الأطوال والمقاسات، مثل سماكة الإطارات أو أحجام الخطوط.

</> HTML Table Border Color Attribute
خاصية لون اطار الجدول في HTML

كانت خاصية [bordercolor] تُستخدم في HTML لإضافة لون لإطار الجدول ولجميع الخلايا. ومع ذلك، لم تعد مفضلة في HTML5، حيث يُنصح الآن باستخدام CSS لتعيين لون الإطار باستخدام خاصية border-color.

جربها بنفسك

Table Bordercolor

نستخدم خاصية bordercolor في لغة HTML لتغيير لون إطار الجدول، حيث نكتب بداخلها قيمة لون الإطار مثل القيمة [red] ليكون الإطار باللون الأحمر.

<table border="1" bordercolor="red">  
    <tr>  
      <th>Firstname</th> 
      <th>Lastname</th>
      <th>Email</th>
      <th>Age</th>
      <th>Study</th>
    </tr>
</body>

جربها بنفسك

</> HTML Table Background Color Attribute
خاصية لون خلفية الجدول في HTML

تستخدم خاصية [bgcolor] في تلوين خلفية الجدول في لغة HTML.

جربها بنفسك

Bgcolor Attribute

تغيير لون خلفية الجدول باستخدام خاصية [bgcolor]، حيث يتم تحديد لون الخلفية داخل علامات التنصيص المزدوجة [" "].

<table border="1" bordercolor="red" bgcolor="yellow">  
    <tr>  
      <th>Firstname</th> 
      <th>Lastname</th>
      <th>Email</th>
      <th>Age</th>
      <th>Study</th>
    </tr>
</table>

جربها بنفسك

ملاحظات هامة

تم إيقاف دعم خاصية [bgcolor] في HTML5، لذلك لا يُنصح باستخدام هذه الخاصية داخل جداول HTML.
يتم الآن التحكم في جميع الألوان الخاصة بالجدول، بما في ذلك لون الخلفية، باستخدام CSS. هذه الطريقة تعتبر أكثر فعالية وسهولة في الاستخدام.

</> HTML Table Background Attribute
خاصية خلفية الجدول في HTML

تُستخدم الخاصية [background] لإضافة صورة خلفية للجدول في لغة HTML، كما يمكن استخدام خاصية [background] منفصلة أو مع خاصية [bgcolor].

قيمة background: تكون عبارة عن مسار صورة الخلفية،

مثل: "background="/images/photo6.jpg.

جربها بنفسك

HTML Background Attribute

إضافة صورة خلفية للجدول عن طريق background attribute.

<table border="1" bordercolor="red" bgcolor="yellow" background="https://www.closetag.com/images/photo6.jpg">
    <tr>  
      <th>Firstname</th> 
      <th>Lastname</th>
      <th>Email</th>
      <th>Age</th>
      <th>Study</th>
    </tr>
</table>

جربها بنفسك

ملاحظات هامة

تم إيقاف دعم خاصية bordercolor في الإصدار الأخير من HTML، الذي هو HTML5، لذلك لا يُنصح باستخدام هذه الخاصية داخل جداول HTML.
يتم حالياً التحكم في ألوان الحدود والصورة الخلفية للجداول عن طريق CSS، مما يوفر مرونة وسهولة أكبر في التصميم.

</> HTML Table Display Attribute
خاصية عرض جدول HTML

تُستخدم خاصية [width] للتحكم في عرض الجدول على المتصفح باستخدام لغة HTML.

قيمة خاصية width:

يمكن أن تكون محددة بوحدة البيكسل، حيث يمكن كتابة القيمة كرقم فقط مثل ["width="300]. ويمكن أن تُكتب مع علامة px مثل: ["width="300px].
يمكن تحديدها بوحدة النسبة المئوية [%]، وتكتب كالتالي: ["width="100%].

width attrubute without px

استخدام خاصية width دون وضع أي علامة، أي دون وضع علامة px أو علامة %.

<table border="1" bordercolor="red" bgcolor="yellow" width="500">
    <tr>  
      <th>Firstname</th> 
      <th>Lastname</th>
      <th>Email</th>
      <th>Age</th>
      <th>Study</th>
    </tr>
</table>

جربها بنفسك

Setting Table Width Using the Width Attribute in HTML

استخدام خاصية width مع وضع وحدة px.

<table border="1" bordercolor="red" bgcolor="yellow" width="500px">
    <tr>  
      <th>Firstname</th> 
      <th>Lastname</th>
      <th>Email</th>
      <th>Age</th>
      <th>Study</th>
    </tr>
</table>

جربها بنفسك

Width Attrubute With Percentage

استخدام خاصية width مع وضع علامة percentage %.

<table border="1" bordercolor="red" bgcolor="yellow" width="100%">
    <tr>  
      <th>Firstname</th> 
      <th>Lastname</th>
      <th>Email</th>
      <th>Age</th>
      <th>Study</th>
    </tr>
</table>

جربها بنفسك

</> Table Height Attribute in HTML
خاصية ارتفاع الجدول في HTML

تُستخدم خاصية [height] في HTML للتحكم في ارتفاع الجدول عند عرضه في المتصفح.

قيمة height attribute:

يمكن تحديد قيمة height بوحدة البيكسل مباشرةً، حيث يمكن كتابتها كرقم فقط مثل ["height="300] أو بشكل أوضح مع وحدة [px] مثل ["height="300px].

ومع ذلك، فإن استخدام CSS يفضل في التصميمات الحديثة لضبط أبعاد العناصر بشكل أكثر دقة ومرونة.

Height Attrubute Without Px

استخدام خاصية height دون وضع وحدة px.

<table border="1" bordercolor="red" bgcolor="yellow" width="100%" height="500">
    <tr>  
      <th>Firstname</th> 
      <th>Lastname</th>
      <th>Email</th>
      <th>Age</th>
      <th>Study</th>
    </tr>
</table>

جربها بنفسك

Height Attribute With Px

استخدام خاصية height مع وضع وحدة px.

<table border="1" bordercolor="red" bgcolor="yellow" width="100%" height="500px">
    <tr>  
      <th>Firstname</th> 
      <th>Lastname</th>
      <th>Email</th>
      <th>Age</th>
      <th>Study</th>
    </tr>
</table>

جربها بنفسك

</> Table Alignment Attribute in HTML
خاصية محاذاة الجدول في HTML

تُستخدم الخاصية [align] في اصدار HTML القديم لمحاذاة الجدول أفقياً داخل صفحة الويب.

القيم التي يمكن تحديدها في خاصية align هي:

[center] لتوسيط الجدول في منتصف الصفحة أفقياً.
[left] لمحاذاة الجدول إلى اليسار.
[right] لمحاذاة الجدول إلى اليمين.

Align Table Center

تُستخدم center values مع خاصية align لتوسيط الجدول في منتصف الصفحة.

<table border="1" bordercolor="red" bgcolor="yellow" width="500" align="center">
  <tr>  
      <th>Firstname</th> 
      <th>Lastname</th>
      <th>Email</th>
      <th>Age</th>
      <th>Study</th>
    </tr>
</table>

جربها بنفسك

Align Table Left

تُستخدم left values مع خاصية align لمحاذاة الجدول إلى يسار الصفحة.

<table border="1" bordercolor="red" bgcolor="yellow" width="500" align="left">
  <tr>  
      <th>Firstname</th> 
      <th>Lastname</th>
      <th>Email</th>
      <th>Age</th>
      <th>Study</th>
    </tr>
</table>

جربها بنفسك

align table right

تُستخدم right values مع خاصية align لمحاذاة الجدول إلى يمين الصفحة.

<table border="1" bordercolor="red" bgcolor="yellow" width="500" align="right">
  <tr>  
      <th>Firstname</th> 
      <th>Lastname</th>
      <th>Email</th>
      <th>Age</th>
      <th>Study</th>
    </tr>
</table>

جربها بنفسك

ملاحظة

الإصدار الأخير من لغة HTML، وهو HTML5، لا يدعم خاصية align لمحاذاة الجداول أو العناصر الأخرى. بدلاً من ذلك، يجب استخدام لغة CSS لتحديد هذه الخصائص.

</> Cellpadding Attribute in HTML
خاصية Cellpadding في HTML

تُستخدم خاصية [cellpadding] داخل عنصر <table> في HTML لعمل مسافات داخل الخلايا بين المحتوى النصي وبين إطار الخلية.

قيمة الخاصية cellpadding:

يمكن أن تحدد بوحدة البكسل او بدونها، حيث تُكتب عادةً كرقم فقط مثل: ["cellpadding="10] او مع وحدة البكسل ["cellpadding="10px]. ومع ذلك، يُفضل في التصميمات الحديثة استخدام CSS لتحديد المسافات.

Cellpadding Without Pixel

كتابة القيمة داخل خاصية cellpadding دون وحدة px.

<table border="1" bordercolor="red" bgcolor="yellow" width="500" cellpadding="10">
   <th>Firstname</th> 
      <th>Lastname</th>
      <th>Email</th>
      <th>Age</th>
      <th>Study</th>
   </tr>
</table>

جربها بنفسك

Cellpadding With Pixel

كتابة القيمة داخل خاصية cellpadding متبوعة بوحدة px.

<table border="1" bordercolor="red" bgcolor="yellow" width="500" cellpadding="10px">
   <th>Firstname</th> 
      <th>Lastname</th>
      <th>Email</th>
      <th>Age</th>
      <th>Study</th>
   </tr>
</table>

جربها بنفسك

</> Cellspacing Attribute in HTML
خاصية Cellspacing في HTML

تُستخدم خاصية [cellspacing] داخل عنصر <table> في HTML التقليدي لعمل مسافات خارج الخلايا.

قيمة cellspacing attribute:

يمكن أن تحدد بوحدة البكسل او بدونها، حيث تُكتب عادةً كرقم فقط مثل: ["cellspacing ="10] او مع وحدة البكسل ["cellspacing ="10px]. ومع ذلك، يُفضل في التصميمات الحديثة استخدام CSS لتحديد المسافات.

Cellspacing Without Pixel

كتابة القيمة داخل خاصية cellspacing دون وحدة px.

<table border="1" bordercolor="red" bgcolor="yellow" width="500" cellspacing="10">
   <th>Firstname</th> 
      <th>Lastname</th>
      <th>Email</th>
      <th>Age</th>
      <th>Study</th>
   </tr>
</table>

جربها بنفسك

Cellspacing With Pixel

كتابة القيمة داخل خاصية cellspacing متبوعة بوحدة px.

<table border="1" bordercolor="red" bgcolor="yellow" width="500" cellspacing="10px">
   <th>Firstname</th> 
      <th>Lastname</th>
      <th>Email</th>
      <th>Age</th>
      <th>Study</th>
   </tr>
</table>

جربها بنفسك

معلومات تهمك

لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

HTML Table Attributes خصائص عنصر table في لغة HTML

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات chevron_left HTML Table Attributes chevron_left HTML