كيفية استخدام سمات عنصر 'TABLE' (HTML)

click fraud protection

تمنحك سمات جدول HTML المزيد من التحكم في جداول HTML. هناك الكثير من السمات المتاحة للجداول لجعلها أكثر تشويقًا وتغيير مظهر صفحتك.

سمات عنصر جدول HTML

في HTML5 يستخدم العنصر السمات العامة وسمة أخرى ، وقد تغير ليصبح له قيمة 1 فقط أو فارغًا (على سبيل المثال ، الحدود = ""). إذا كنت تريد تغيير عرض الحد ، فيجب عليك استخدام عرض الحدود خاصية CSS.

انظر أدناه للتعرف على سمات جدول HTML5 الصالحة.

هناك أيضًا العديد من السمات التي تعد جزءًا من مواصفات HTML 4.01 التي أصبحت قديمة في HTML5:

  • —استخدم خاصية CSS padding على عنصري TD و TH بالجدول.
  • —استخدم تباعد حدود خاصية CSS في الجدول.
  • —استخدام لون حدود أنماط CSS: أسود ؛ ونمط الحدود على الطاولة.
  • —استخدام لون حدود أنماط CSS: أسود ؛ ونمط الحدود على العناصر المناسبة للجدول.
  • —بدلاً من ذلك ، يجب عليك وصف بنية الجدول في تعليق أو وضع الجدول بأكمله في شكل ووصفه في الشكل. بدلاً من ذلك ، يمكنك تبسيط هيكل الجدول بحيث لا تحتاج إلى شرح.
  • —استخدم خاصية عرض CSS.

وسمة واحدة تم إهمالها في HTML 4.01 وهي أيضًا قديمة في HTML5.

  • محاذاة — استخدم خاصية هامش CSS بدلاً من ذلك.

هناك أيضًا العديد من السمات التي لا تعد جزءًا من أي مواصفات HTML. استخدم هذه السمات إذا كنت تعلم أن المتصفحات التي تدعمها يمكنها التعامل معها ولا تهتم بصيغة HTML الصالحة.

instagram viewer

  • —استخدم لون الخلفية لخاصية CSS بدلاً من ذلك.
  • لون الحدود — استخدم لون حدود خاصية CSS بدلاً من ذلك.
  • bordercolorlight— استخدم لون حدود خاصية CSS بدلاً من ذلك.
  • bordercolordark — استخدم لون حدود خاصية CSS بدلاً من ذلك.
  • cols— لا يوجد بديل لهذه السمة.
  • الارتفاع — استخدم ارتفاع خاصية CSS بدلاً من ذلك.
  • —استخدم هامش خاصية CSS بدلاً من ذلك.
  • —استخدم مساحة بيضاء لخاصية CSS بدلاً من ذلك.
  • —استخدم المحاذاة الرأسية لخاصية CSS بدلاً من ذلك.

سمات عنصر جدول HTML5

كما ذكرنا أعلاه ، هناك سمة واحدة فقط ، بخلاف السمات العامة ، تكون صالحة على عنصر HTML5 TABLE: border.

تُستخدم سمة الحدود لتحديد حد حول الجدول بأكمله وجميع الخلايا الموجودة فيه. كان هناك بعض التساؤل حول ما إذا كان سيتم تضمينه في مواصفات HTML5 ، لكنه ظل كذلك لأنه يوفر معلومات حول بنية الجدول ، بما يتجاوز مجرد الآثار المترتبة على الأسلوب.

لإضافة سمة الحدود ، يمكنك تعيين القيمة على 1 إذا كان هناك حد وفارغ (أو ترك السمة) إذا لم يكن هناك حد. ستدعم معظم المتصفحات أيضًا القيمة 0 بدون حدود ، وأي قيمة عدد صحيح أخرى (2 ، 3 ، 30 ، 500 ، إلخ) للإعلان عن عرض الحد بالبكسل ، لكن هذا عفا عليه الزمن في HTML5. بدلاً من ذلك ، يجب عليك استخدام خصائص نمط حدود CSS لتحديد عرض الحدود والأنماط الأخرى.

لإنشاء جدول بحدود ، اكتب:

الحدود = "1">
هذا جدول بحدود
يصف هذا سمات TABLE الصالحة في HTML 4.01 ، ولكنها قديمة في HTML5. إذا كنت لا تزال تكتب مستندات HTML 4.01 ، فيمكنك استخدام هذه السمات ، ولكن معظمها يحتوي على بدائل تجعل صفحاتك أكثر تأهلاً للمستقبل عندما تنتقل إلى HTML5.

سمات HTML 4.01 صالحة

السمة التي وصفناها أعلاه. الاختلاف الوحيد في HTML 4.01 عن HTML5 هو أنه يمكنك تحديد أي عدد صحيح كامل (0 ، 1 ، 2 ، 15 ، 20 ، 200 ، إلخ) لتحديد عرض الحد بالبكسل.

لإنشاء جدول بحد 5 بكسل ، اكتب:

الحدود = "5">

هذا الجدول له حد 5 بكسل.

تحدد السمة مقدار المسافة بين حدود الخلية ومحتويات الخلية. الافتراضي هو اثنين من وحدات البكسل. عيّن وسادة الخلية على 0 إذا كنت لا تريد مسافة بين المحتويات والحدود.

لتعيين مساحة الخلية على 20 ، اكتب:

cellpadding = "20">

يحتوي هذا الجدول على بطانة خلوية من 20.

سيتم فصل حدود الخلية بمقدار 20 بكسل.

شاهد مثالاً لجدول به وسادة خلوية.

تحدد السمة مقدار المسافة بين خلايا الجدول ومحتوى الخلية. مثل وسادة الخلية ، يتم تعيين الإعداد الافتراضي على وحدتي بكسل ، لذلك يجب عليك تعيينه على 0 إذا كنت لا تريد تباعد الخلايا.

لإضافة تباعد خلايا إلى جدول ، اكتب:

cellspacing = "20">

يحتوي هذا الجدول على تباعد خلايا يبلغ 20.

سيتم فصل الخلايا بمقدار 20 بكسل.

تحدد السمة أجزاء الحدود المحيطة بالجدول الخارجي التي ستكون مرئية. يمكنك تأطير طاولتك على الجوانب الأربعة ، أي جانب واحد ، أعلى وأسفل ، يسار ويمين ، أو لا شيء.

إليك HTML لجدول بحد الجانب الأيسر فقط:

الإطار = "lhs">
هذه الطاولة
سوف نحصل على
فقط ال
الجانب الأيسر مؤطرة.
ومثال آخر بالإطار السفلي:

الإطار = "أدناه">
يحتوي هذا الجدول على إطار في الأسفل.
تحقق من بعض الطاولات ذات الإطارات.

تشبه السمة سمة الإطار ، فهي فقط تؤثر على الحدود حول خلايا الجدول. يمكنك تعيين القواعد على جميع الخلايا ، بين الأعمدة ، بين المجموعات مثل TBODY و TFOOT أو لا شيء.

لإنشاء جدول بسطر بين الصفوف فقط ، اكتب:

القواعد = "الصفوف">
يحتوي هذا الجدول 4x4
الصفوف وليس الأعمدة
المبينة مع
سمة القواعد.
وآخر مع خطوط بين الأعمدة:

القواعد = "cols">
هذا هو
طاولة
أين ال
الأعمدة
نكون
أبرزت
ال السمة توفر المعلومات حول الجدول الخاص بقارئات الشاشة ووكلاء المستخدم الآخرين الذين قد يواجهون مشكلة في قراءة الجداول. لاستخدام سمة الملخص ، قم بكتابة وصف موجز للجدول ووضع ذلك كقيمة للسمة. لن يتم عرض الملخص على صفحة الويب في معظم متصفحات الويب القياسية.

إليك كيفية كتابة جدول بسيط مع ملخص:

Summary = "هذا نموذج جدول يحتوي على معلومات الحشو. الغرض من هذا الجدول هو توضيح الملخص. ">

العمود 1 الصف 1.

العمود 2 الصف 1.

العمود 1 الصف 2.

العمود 2 الصف 2.

تحدد السمة عرض الجدول إما بالبكسل أو كنسبة مئوية من عنصر الحاوية. إذا لم يتم تعيين العرض ، فسيشغل الجدول مساحة بقدر ما يحتاجه لعرض المحتويات ، مع عرض أقصى مساوٍ لعرض العنصر الرئيسي.

لإنشاء جدول بعرض محدد بالبكسل ، اكتب:

العرض = "300">

هذا الجدول يمثل 80٪ من عرض الحاوية الموجودة فيه.

ولإنشاء جدول بعرض يمثل نسبة مئوية من العنصر الأصل ، اكتب:

العرض = "80٪">

هذا الجدول يمثل 80٪ من عرض الحاوية الموجودة فيه.

سمة جدول HTML 4.01 موقوفة

هناك سمة واحدة لعنصر TABLE تم إهمالها في HTML 4.01 وقديمة في HTML5: align. تتيح لك هذه السمة تعيين مكان الجدول على الصفحة بالنسبة للنص الموجود بجانبه. تم إهمال هذه السمة في HTML 4.01 ، ويجب تجنب استخدامها. بدلاً من ذلك ، يجب عليك استخدام خاصية CSS أو margin-left: auto؛ والهامش الأيمن: تلقائي ؛ الأنماط. تمنحك خاصية float نتيجة أقرب إلى ما توفره سمة المحاذاة ، ولكنها يمكن أن تؤثر على طريقة عرض باقي محتويات الصفحة. الهامش الأيمن: auto؛ والهامش الأيسر: تلقائي ؛ هي ما يوصي به W3C كبديل.

فيما يلي مثال مهمل باستخدام سمة المحاذاة:

محاذاة = "right">

هذا الجدول محاذي إلى اليمين.

يتدفق النص حوله إلى اليسار.

وللحصول على نفس التأثير باستخدام HTML صالح (غير مهمل) ، اكتب:

style = "float: right؛">

هذا الجدول محاذي إلى اليمين.

يتدفق النص حوله إلى اليسار.

سمات الجدول القديمة

تصف المعلومات السابقة سمات عنصر HTML الصالحة في HTML 4.01 ولكنها قديمة في HTML5.

يصف ما يلي سمات TABLE غير الصالحة في أي مواصفات حالية. إذا كنت لا تهتم بما إذا كانت صفحاتك يتم التحقق منها ويستخدم المستخدمون متصفحًا يدعم هذه العناصر ، فيمكنك استخدام هذه العناصر. لكن معظمها إما غير مدعوم في المتصفحات الحديثة أو لديها بدائل أكثر توافقًا مع المعايير.

لا نوصي باستخدام هذه السمات في جداول HTML الخاصة بك.

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

البديل الأفضل لهذه السمة هو خاصية النمط.

لتغيير لون خلفية الجدول ، اكتب:

style = "background-color: #ccc؛">

هذا الجدول له خلفية رمادية.

على غرار سمة bgcolor ، تتيح لك سمة bordercolor تغيير لون السمة. هذه السمة مدعومة فقط من قبل Internet Explorer. بدلاً من ذلك ، يجب عليك استخدام خاصية نمط لون الحدود.

لتغيير لون حدود الجدول ، اكتب:

style = "لون الحدود: أحمر ؛">
هذا الجدول له حدود حمراء.
تم تضمين سمات bordercolorlight و bordercolordark في Internet Explorer للسماح لك بإنشاء حد ثلاثي الأبعاد حول الجدول الخاص بك. ومع ذلك ، اعتبارًا من IE8 والإصدارات الأحدث ، يتم دعم هذا فقط في وضع معايير IE7 و وضع المراوغات. تذكر Microsoft أن هذه الخصائص لم تعد مدعومة.

لفترة قصيرة ، تم اقتراح خاصية cols في عنصر TABLE لمساعدة المتصفحات على معرفة عدد الأعمدة في الجدول. كان الافتراض أن هذا من شأنه أن يساعد في تسريع عرض الجداول الكبيرة. ومع ذلك ، تم تنفيذه فقط بواسطة Internet Explorer ، واعتبارًا من IE8 والإصدارات الأحدث ، يتم دعم هذا فقط في وضع المعايير IE7 ووضع المراوغات.

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

باستخدام خاصية CSS height ، يمكنك تقييد الارتفاع إذا كنت تستخدم خاصية CSS أيضًا لتحديد ما يحدث مع أي محتوى زائد.

لتعيين الحد الأدنى للارتفاع على الطاولة ، اكتب:

style = "height: 30em؛">

يبلغ ارتفاع هذا الجدول 30 ems على الأقل.

السمتان والمسافة المضافة حول الجانبين الأيسر / الأيمن (hspace) والجزء العلوي / السفلي (vspace) من الجدول. يجب عليك استخدام خاصية النمط بدلاً من ذلك.

لتعيين المساحة الرأسية على 20 بكسل والمسافة الأفقية على 40 بكسل ، اكتب:

style = "margin: 20px 40px؛"

يحتوي هذا الجدول على مساحة vspace تبلغ 20 بكسل ومسافة hspace تبلغ 40 بكسل.

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

لإنشاء عمود به الكثير من النص لا يلتف ، اكتب:


style = "white-space: nowrap؛"> هذا عمود به قدر كبير من المحتوى. ولكن حتى لو كانت أعرض من الحاوية ، فلا ينبغي أن يلتف النص إلى السطر التالي ، ولكن بدلاً من ذلك يجبر نافذة المتصفح على التمرير أفقيًا لمشاهدة المحتوى بالكامل.
أخيرًا ، تحدد السمة كيف يجب محاذاة محتويات كل خلية عموديًا داخل الخلية. بدلاً من هذه السمة غير الصالحة ، يجب عليك استخدام خاصية CSS في كل خلية تريد تغيير المحاذاة لها. لن تلاحظ تأثيرات هذا النمط ما لم تكن محتويات الخلية أقل من المساحة المتوفرة التي أنشأتها خلايا أخرى أكبر.

لإجبار خلية على المحاذاة للأسفل (بدلاً من الوسط ، كخيار افتراضي) ، اكتب:


هذه الخلية أطول من الباقي وبالتالي ستجبر الارتفاع على أن يكون أطول. لذلك سترى أن الخلية المحاذاة رأسياً تتم محاذاتها للأسفل.
style = "vertical-align: bottom؛"> المحتويات في الأسفل.
المحتويات في المنتصف.

instagram story viewer