[border] لإضافة إطار للجدول.
[bordercolor] للتحكم في لون الإطار.
[bgcolor] للتحكم في لون خلفية الجدول.
[background] للتحكم في صورة خلفية الجدول.
[width] للتحكم في حجم عرض الجدول.
[style] للتحكم في ستايل الجدول من خلال لغة css.
[width] للتحكم في عرض الجدول.
[height] للتحكم في طول الجدول.
[align] للتحكم في محاذاة الجدول إلى يمين أو يسار أو وسط الصفحة.
[cellpadding] للتحكم في حجم مسافات الخلايا الداخلية بين المحتوى النصي أو المرئي وبين إطار الخلايا.
[cellspacing] للتحكم بالمسافات الخارجية بين الخلايا.
[rules] لوضع شروط للجدول.
[frame] لوضع إطارات جانبية للجدول.
[summary] لوضع ملخص غير مرئي لمطوري الويب.

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

تستخدم خاصية [border attribute] لإضافة إطار خارجي للجدول ولجميع الخلايا، وتكتب قيمة سماكة الإطار الخارجي على شكل رقم متبوعاً ب px أو بدون 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

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

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

تستخدم خاصية [bordercolor attribute] لإضافة لون للإطار الجدول ولجميع الخلايا في لغة HTML.

جربها بنفسك

Table Bordercolor

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

<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 attributes] في تلوين خلفية الجدول في لغة 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>
</body>

جربها بنفسك

ملاحظات هامة

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

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

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

قيمة background attribute:

تكون قيمة background attribute هي مسار صورة الخلفية، لتصبح بهذا الشكل:
"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 attribute للتحكم في عرض الجدول على المتصفح باستخدام لغة HTML.

قيمة width attribute:

يمكن أن تكون قيمة width attribute محدّدة بوحدة البيكسلpixel، حيث يمكن أن تُكتب مع علامة px أو بدونها "width="300 أو "width="300px.
يمكن أن تكون القيمة width attribute محدّدة بوحدة النسبة المئوية %، وتكتب عندها بهذا الشكل "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 attribute] للتحكم في طول أو ارتفاع الجدول على المتصفح باستخدام لغة HTML.

قيمة height attribute:

يمكن أن تكون قيمة height attribute محدّدة بوحدة البيكسل pixel، حيث يمكن أن تُكتب مع علامة px أو بدونها "height="300 أو "height="300px

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 attribute] لمحاذة الجدول أفقياً داخل صفحة الويب في لغة HTML.

القيم التي تُكتب في خاصية align:

[center] لتوسيط الجدول في منتصف الصفحة أفقياً.
[left] لمحاذاة الجدول إلى اليسار وهو الوضع الافتراضي.
[left] لمحاذاة الجدول إلى اليمين للصفحات التي تبدأ من جهة اليمين، كما في المواقع العربية.

جربها بنفسك

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.

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

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

قيمة cellpadding attribute:

يمكن أن تكون قيمة cellpadding attribute محدّدة بوحدة البيكسل pixel، حيث يمكن أن تُكتب مع علامة px أو بدونها "cellpadding="10 أو "cellpadding="10px.

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="10">
   <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 attribute محدّدة بوحدة البيكسل pixel، حيث يمكن أن تُكتب مع علامة px أو بدونها "cellspacing="10 أو "cellspacing="10px.

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