HTML

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

سوف تتعرف في هذا الدرس على جميع attributes الخصائص التي تضاف إلى عنصر table في لغة HTML.

التاريخ

29 يناير 2022

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

5324

المواضيع

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

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

</> HTML table attributes
خصائص عنصر table في لغة HTML

هناك عدة attributes خصائص هامة يمكن إضافتها مع عنصر <table> وأهم هذه الخصائص:

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

</> HTML border attribute
إضافة إطار للجدول في لغة HTML

تستخدم خاصية border attribute لإضافة إطار خارجي للجدول ولجميع الخلايا، وتكتب قيمة سماكة الإطار الخارجي على شكل رقم متبوعاً ب px أو بدون px.

border attribute with px

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

<table border="1px">
border attribute without px

يمكن الاستغناء عن كلمة px التي تتبع القيمة الرقمية، شاهد المثال التالي.

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

</> HTML bordercolor 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 bgcolor attributes
تلوين خلفية الجدول في لغة 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 background attribute
خلفية الجدول في لغة HTML

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


value قيمة 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 width attribute
عرض الجدول في لغة HTML

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


values قيم 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>
width attrubute with px

استخدام خاصية 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>

</> HTML height attribute
ارتفاع الجدول في لغة HTML

تستخدم خاصية height attribute للتحكم في طول أو ارتفاع الجدول على المتصفح باستخدام لغة HTML.


value قيمة 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>

</> HTML table align
محاذاة الجدول في لغة HTML

تستخدم خاصية align attribute لمحاذة الجدول أفقياً داخل صفحة الويب في لغة HTML.

values القيم التي تُكتب في خاصية 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.

</> HTML cellpadding attribute
خاصية cellpadding في لغة HTML

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


قيمة cellpadding attribute:

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

كتابة values القيمة داخل خاصية 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

كتابة values القيمة داخل خاصية 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>

</> HTML cellspacing attribute
خاصية cellspacing في لغة HTML

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


قيمة cellspacing attribute:

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

كتابة values القيمة داخل خاصية 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

كتابة values القيمة داخل خاصية 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>
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.