انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 19
دورة لغة HTML

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

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

ابدأ التعلّم استكشف الأمثلة
THE BUILDING BLOCKS OF THE WEBHTML
index.html
1<h1>Hello, web.</h1>
وسم الفتحالمحتوىوسم الإغلاق
النتيجة في المتصفح Hello, web.
كل صفحة رائعة تبدأ بعنصر.
أقسام الدرس
10
الأمثلة
17
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
12,587
محتوى الدرس
في هذا الدرس 10تصفّح المواضيع

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

يعرض هذا الدرس خصائص تنسيق تاريخية لعنصر table لفهم الشفرة القديمة. معظم السمات التالية مهجورة أو غير قياسية؛ استخدم CSS في العمل الجديد. استمرار تفسير المتصفح لبعضها للتوافق لا يجعلها جزءًا موصى به من HTML الحالي. السمة style هي مدخل لكتابة CSS.

  • Attribute [border]: لإضافة إطار للجدول.

  • Attribute [bordercolor]: للتحكم في لون الإطار.

  • Attribute [bgcolor]: للتحكم في لون خلفية الجدول.

  • Attribute [background]: للتحكم في صورة خلفية الجدول.

  • Attribute [style]: للتحكم في ستايل الجدول من خلال لغة CSS.

  • Attribute [width]: للتحكم في حجم عرض الجدول.

  • Attribute [height]: للتحكم في حجم طول الجدول.

    • 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 في CSS، لا في القيمة القياسية لسمة border القديمة.

    HTML 
    <table border="1">

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

    تكتب قيمة border القديمة كعدد صحيح غير سالب بلا px؛ هذا مثال على الصيغة التاريخية.

    HTML 
    <table border="1">
    <tr>  
      <th>Firstname</th> 
      <th>Lastname</th>
      <th>Email</th>
      <th>Age</th>
      <th>Study</th>
    </tr>
</table>
    جرّب بنفسك

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

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

    جرّب بنفسك

    Table Bordercolor

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

    HTML 
    <table border="1" bordercolor="red">  
    <tr>  
      <th>Firstname</th> 
      <th>Lastname</th>
      <th>Email</th>
      <th>Age</th>
      <th>Study</th>
    </tr>
</table>
    جرّب بنفسك

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

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

    جرّب بنفسك

    Bgcolor Attribute

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

    HTML 
    <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>
    جرّب بنفسك

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

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

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

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

    جرّب بنفسك

    HTML Background Attribute

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

    HTML 
    <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>
    جرّب بنفسك

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

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

    قيمة خاصية width:

    • يمكن أن تكون محددة بوحدة البيكسل، حيث يمكن كتابة القيمة كرقم فقط مثل ["width="300]. قد تتسامح بعض المتصفحات مع صيغة مثل ⁦width="300px"⁩، لكنها ليست طريقة قياسية لكتابة وحدة CSS داخل السمة القديمة.

    • يمكن تحديدها بوحدة النسبة المئوية [%]، وتكتب كالتالي: ["width="100%].

    width attrubute without px

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

    HTML 
    <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

    مثال تاريخي على تسامح المتصفح مع px داخل width؛ في الشفرة الحديثة اكتب style="width:300px".

    HTML 
    <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 %.

    HTML 
    <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 سمة قياسية لعنصر table في مواصفات HTML؛ تفسرها بعض المتصفحات تفسيرًا غير قياسي، وغالبًا كحد أدنى للارتفاع.

    قيمة height attribute:

    • يمكن تحديد قيمة height بوحدة البيكسل مباشرةً، حيث يمكن كتابتها كرقم فقط مثل ["height="300] وقد تتسامح بعض المتصفحات مع صيغة ⁦height="300px"⁩؛ ليست هذه صيغة قياسية لسمة table.

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

    Height Attrubute Without Px

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

    HTML 
    <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:300px في CSS للشفرة الحديثة.

    HTML 
    <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 لتوسيط الجدول في منتصف الصفحة.

    HTML 
    <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 لمحاذاة الجدول إلى يسار الصفحة.

    HTML 
    <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 لمحاذاة الجدول إلى يمين الصفحة.

    HTML 
    <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>
    جرّب بنفسك

    Cellpadding Attribute in HTML خاصية Cellpadding في HTML

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


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

    • تكتب في الصيغة التاريخية عددًا مثل ⁦cellpadding="10"⁩. قد تتسامح المتصفحات مع px في الشفرة القديمة، لكن لا تعتمد على ذلك. ومع ذلك، يُفضل في التصميمات الحديثة استخدام CSS لتحديد المسافات.

    البديل الحديث يطبق على الخلايا نفسها، مثل th, td { padding: 10px; }، وليس على table وحده.

    Cellpadding Without Pixel

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

    HTML 
    <table border="1" bordercolor="red" bgcolor="yellow" width="500" cellpadding="10">
  <tr>
   <th>Firstname</th> 
      <th>Lastname</th>
      <th>Email</th>
      <th>Age</th>
      <th>Study</th>
   </tr>
</table>
    جرّب بنفسك

    Cellpadding With Pixel

    مثال تاريخي على تسامح المتصفح مع px داخل cellpadding، وليس الصيغة الموصى بها.

    HTML 
    <table border="1" bordercolor="red" bgcolor="yellow" width="500" cellpadding="10px">
  <tr>
   <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"⁩. قد تتسامح المتصفحات مع px في الشفرة القديمة، لكن لا تعتمد على ذلك. ومع ذلك، يُفضل في التصميمات الحديثة استخدام CSS لتحديد المسافات.

    البديل الحديث هو table { border-collapse: separate; border-spacing: 10px; }. لا تؤثر border-spacing عندما تكون border-collapse مساويةً لـcollapse.

    Cellspacing Without Pixel

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

    HTML 
    <table border="1" bordercolor="red" bgcolor="yellow" width="500" cellspacing="10">
  <tr>
   <th>Firstname</th> 
      <th>Lastname</th>
      <th>Email</th>
      <th>Age</th>
      <th>Study</th>
   </tr>
</table>
    جرّب بنفسك

    Cellspacing With Pixel

    مثال تاريخي على تسامح المتصفح مع px داخل cellspacing، وليس الصيغة الموصى بها.

    HTML 
    <table border="1" bordercolor="red" bgcolor="yellow" width="500" cellspacing="10px">
  <tr>
   <th>Firstname</th> 
      <th>Lastname</th>
      <th>Email</th>
      <th>Age</th>
      <th>Study</th>
   </tr>
</table>
    جرّب بنفسك

    مشاركة

    هل كان هذا الدرس مفيدًا؟

    جارٍ تحميل الآراء…