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>

جربها بنفسك

معلومات تهمك

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

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

التالى

CLOSETAG

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

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

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

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