الحصول على أقصى استفادة من جداول HTML عن طريق تعلم سمات الجدول
تمنحك سمات جدول HTML الكثير من التحكم في جداول HTML. هناك الكثير من السمات المتاحة للجداول لجعلها أكثر إثارة للاهتمام وتغيير مظهر صفحتك.
سمات عنصر جدول HTML
في HTML5 ، يستخدم العنصر السمات العامة وسمة أخرى:. وتغيرت فقط بقيمة 1 أو فارغة (أي border = ""). إذا كنت ترغب في تغيير عرض الحد ، يجب عليك استخدام خاصية CSS ذات الحدود.
انظر أدناه للتعرف على سمات جدول HTML5 الصالحة.
هناك أيضًا العديد من السمات التي تعد جزءًا من مواصفات HTML 4.01 التي أصبحت قديمة في HTML5:
- -استخدم خاصية padding CSS على عناصر TD و T الجدول.
- - استخدم تباعد حدود خاصية CSS على الجدول.
- —استخدام أنماط CSS لون الحدود: أسود ؛ ونمط الحدود على الطاولة.
- —استخدام أنماط CSS لون الحدود: أسود ؛ ونمط الحدود على العناصر المناسبة من الجدول.
- —Instead ، يجب عليك وصف بنية الجدول في CAPTION أو وضع الجدول بأكمله في شكل ووصفه في FIGCAPTION. بدلا من ذلك ، يمكنك تبسيط هيكل الجدول بحيث لا يوجد حاجة إلى تفسير.
- - استخدم خاصية عرض CSS.
وسمة واحدة تم إيقافها في HTML 4.01 وهي أيضًا قديمة في HTML5.
تعرف على المزيد حول HTML 4.01 TABLE Attributes.
- محاذاة - استخدم خاصية هامش CSS بدلاً من ذلك.
هناك أيضًا العديد من السمات التي لا تشكل جزءًا من أي مواصفات HTML.
استخدم هذه السمات إذا كنت تعرف أن المتصفحات التي تدعمها يمكن أن تتعامل معها ولا يهمك HTML الصحيح.
- - استخدم لون خلفية خاصية CSS بدلاً من ذلك.
- bordercolor - استخدم لون حد خاصية CSS بدلاً من ذلك.
- bordercolorlight - استخدم لون حد خاصية CSS بدلاً من ذلك.
- bordercolordark - استخدم لون حد خاصية CSS بدلاً من ذلك.
- cols - لا يوجد بديل لهذه السمة.
- الارتفاع - استخدم ارتفاع خاصية CSS بدلاً من ذلك.
- - استخدم هامش الخاصية CSS بدلاً من ذلك.
- - استخدم هامش الخاصية CSS بدلاً من ذلك.
- -استخدم خاصية الفضاء البيضاء CSS بدلاً من ذلك.
- - استخدم خاصية CSS عموديًا بدلاً من ذلك.
تعرف على المزيد حول سمات TABLE Browser المحددة.
سمات عنصر جدول HTML5
كما ذكرنا أعلاه ، هناك سمة واحدة فقط ، تتجاوز السمات العالمية ، وهي صالحة على عنصر HTML5 TABLE: border.
يتم استخدام سمة الحدود لتعريف حد حول الجدول بأكمله وجميع الخلايا داخله. كان هناك بعض التساؤلات حول ما إذا كان سيتم تضمينه في مواصفات HTML5 ، ولكنه يبقى لأنه قدم معلومات حول بنية الجدول ، يتجاوز مجرد تبعيات الأنماط.
لإضافة سمة الحدود ، يمكنك تعيين القيمة إلى 1 إذا كان هناك حد وفارغ (أو ترك السمة) إذا لم يكن هناك. ستدعم معظم المتصفحات أيضًا صفرًا بلا حدود ، وأي قيمة عددية أخرى (2 ، 3 ، 30 ، 500 ، إلخ) لتوضيح عرض الحدود بالبكسل ، ولكن هذا الأمر قديمًا في HTML5. بدلاً من ذلك ، يجب عليك استخدام خصائص نمط حدود CSS لتعريف عرض الحدود وأنماط أخرى.
لإنشاء جدول بحدود ، اكتب:
border = "1" >
هذا جدول به حد
هناك سمات HTML 4.01 قديمة في HTML5. إذا كنت تخطط لكتابة مستندات HTML 4.01 ، فيمكنك تعلمها ، وإلا يمكنك تجاهلها. تحتوي معظم هذه السمات على بدائل ، كما هو موضح أعلاه.
نحن تصف سمات العنصر الصالحة في HTML5 (و HTML 4.01). هذا يصف سمات TABLE الصالحة في HTML 4.01 ، ولكنها قديمة في HTML5. إذا كنت لا تزال تكتب مستندات HTML 4.01 ، فيمكنك استخدام هذه السمات ، ولكن معظمها يحتوي على بدائل تجعل صفحاتك أكثر موثوقية في المستقبل عند الانتقال إلى HTML5.
صالح HTML 4.01 سمات
السمة التي وصفناها أعلاه.
الاختلاف الوحيد في HTML 4.01 من HTML5 هو أنه يمكنك تحديد أي عدد صحيح كامل (0 ، 1 ، 2 ، 15 ، 20 ، 200 ، إلخ.) لتعريف عرض الحدود بالبكسل.
لإنشاء جدول بحدود 5 بكسل ، اكتب:
border = "5" >
يحتوي هذا الجدول على حد 5 بكسل.
شاهد مثالاً على جدولين لهما حدود.
تحدد السمة مقدار المسافة بين حدود الخلية ومحتويات الخلية. الافتراضي هو بكسل اثنين. اضبط لوحة الخلايا على 0 إذا كنت لا تريد مسافة بين المحتويات والحدود.
لتعيين مساحة الخلية إلى 20 ، اكتب:
cellpadding = "20" >
يحتوي هذا الجدول على لوحة خلوية تتكون من 20.
سيتم فصل حدود الخلية بمقدار 20 بكسل.
عرض مثال لجدول مع cellpadding
تحدد السمة مقدار المسافة بين خلايا الجدول ومحتوى الخلية. مثل cellpadding ، يتم تعيين الإعداد الافتراضي على وحدتي بكسل ، لذلك يجب تعيينه إلى 0 إذا كنت لا تريد تباعدًا بين الخلايا.
لإضافة تباعد الخلايا إلى جدول ، اكتب:
cellspacing = "20" >
يحتوي هذا الجدول على cellspacing لـ 20
سيتم فصل الخلايا بمقدار 20 بكسل.
انظر الجدول مع cellspacing
تحدد السمة أي أجزاء من الحدود المحيطة بالجدول الخارجي ستكون مرئية. يمكنك تأطير الطاولة الخاصة بك على الجوانب الأربعة ، أي جانب واحد ، أعلى وأسفل ، إلى اليسار واليمين ، أو لا شيء.
هنا هو HTML لجدول مع الحدود الجانبية اليسرى فقط:
frame = "lhs" >
هذا الجدول
سيكون
فقط
الجانب الأيسر مؤطر.
ومثال آخر مع الإطار السفلي:
frame = "below" >
يحتوي هذا الجدول على إطار في الأسفل.
تحقق من بعض الجداول مع الإطارات
تشبه السمة سمة الإطار ، ولكنها تؤثر فقط على الحدود حول خلايا الجدول. يمكنك تعيين القواعد على جميع الخلايا ، بين الأعمدة وبين مجموعات مثل TBODY و TFOOT أو لا شيء.
لإنشاء جدول بسطور بين الصفوف فقط ، اكتب:
rules = "rows" >
يحتوي جدول الدفع الرباعي هذا على
الصفوف ليست أعمدة
محددًا
سمةالقواعد.
وآخر مع خطوط بين الأعمدة:
rules = "cols" >
هذا
جدول
حيث
الأعمدة
لا
البارز
هنا مثال على جدول مع القواعد
توفر السمة معلومات حول الجدول الخاص بقارئات الشاشة ووكلاء المستخدمين الآخرين الذين قد يواجهون صعوبة في قراءة الجداول. لاستخدام سمة التلخيص ، تكتب وصفًا موجزًا للجدول وتضعه كقيمة للسمة. لن يتم عرض الملخص على صفحة الويب في معظم متصفحات الويب القياسية.
إليك كيفية كتابة جدول بسيط يحتوي على ملخص:
summary = "هذا هو جدول عينة يحتوي على معلومات مُلئئة. الغرض من هذا الجدول هو إظهار ملخص." >
عمود 1 الصف 1
عمود 2 الصف 1
عمود 1 الصف 2
عمود 2 الصف 2
عرض جدول مع ملخص
تحدد السمة عرض الجدول إما بالبكسل أو كنسبة مئوية من عنصر الحاوية. إذا لم يتم ضبط العرض ، فسيشغل الجدول مقدار المساحة التي يحتاجها لعرض المحتويات ، بحيث يكون الحد الأقصى للعرض هو نفس عرض العنصر الرئيسي.
لإنشاء جدول بعرض محدد بالبكسل ، اكتب:
width = "300" >
هذا الجدول هو 80٪ من عرض الحاوية الموجود بها.
ولإنشاء جدول بعرض بعرض نسبة مئوية من العنصر الرئيسي ، اكتب:
width = "80٪" >
هذا الجدول هو 80٪ من عرض الحاوية الموجود بها.
شاهد مثالاً على جدول بعرض
أهدر HTML 4.01 سمة TABLE
هناك سمة واحدة لعنصر TABLE الذي تم إيقافه في HTML 4.01 وقديمة في HTML5: محاذاة . تتيح لك هذه السمة تعيين مكان الجدول في الصفحة بالنسبة للنص الموجود بجواره. تم إيقاف هذه الخاصية في HTML 4.01 ، ويجب تجنب استخدامها. بدلاً من ذلك ، يجب عليك استخدام خاصية CSS أو الهامش الأيسر: auto؛ والهامش اليمين: auto؛ الأساليب. تمنحك الخاصية العائمة نتيجة أقرب لما توفره سمة المحاذاة ، ولكنها قد تؤثر على الطريقة التي تظهر بها بقية محتويات الصفحة. الهامش الأيمن: auto؛ والهامش الأيسر: auto؛ هي ما يوصي به W3C كبديل.
في ما يلي مثال تم إيقافه باستخدام سمة المحاذاة:
align = "right" >
تتم محاذاة هذا الجدول إلى اليمين
يتدفق النص حوله إلى اليسار
راجع مثال تم إيقافه باستخدام سمة المحاذاة.
وللحصول على نفس التأثير مع HTML (غير مهمل) صالح ، اكتب:
style = "float: right؛" >
تتم محاذاة هذا الجدول لليمين
يتدفق النص حوله إلى اليسار
يوضح ما يلي السمات TABLE التي ليست جزءًا من أي مواصفات HTML.
تصف المعلومات السابقة سمات عنصر HTML الصالحة في HTML 4.01 ولكنها قديمة في HTML5.
فيما يلي وصف سمات TABLE غير صالحة في أي مواصفات حالية. إذا كنت لا تهتم بما إذا كانت صفحاتك تحقق من صحتها وكان مستخدموك يستخدمون متصفحًا يدعم هذه العناصر ، فيمكنك حينئذٍ استخدام هذه العناصر. ولكن معظمها إما غير معتمد في المتصفحات الحديثة أو لديك بدائل متوافقة مع المعايير أكثر.
لا نوصي باستخدام هذه السمات على جداول HTML الخاصة بك.
السمة هي سمة قديمة تم تضمينها قبل دعم CSS على نطاق واسع. يسمح لك بتغيير لون خلفية الجدول. يمكنك تعيين اسم لون أو رمز سداسي عشري. لا تزال هذه السمة تعمل في الكثير من المتصفحات ، ولكن بالنسبة إلى HTML الذي تم ضبطه في المستقبل ، يجب عدم استخدامه ، واستخدام CSS بدلاً منه.
البديل الأفضل لهذه السمة هو خاصية النمط.
لتغيير لون خلفية الجدول ، اكتب:
style = "background-color: #ccc؛" >
يحتوي هذا الجدول على خلفية رمادية
على غرار السمة bgcolor ، تتيح لك سمة bordercolor تغيير لون السمة. هذه السمة مدعومة فقط من قبل Internet Explorer. بدلاً من ذلك ، يجب عليك استخدام خاصية نمط لون الحدود.
لتغيير لون حدود جدولك ، اكتب:
style = "border-color: red؛" >
يحتوي هذا الجدول على حد أحمر.
تم تضمين سمات bordercolorlight و bordercolordark في Internet Explorer للسماح لك بإنشاء حدود ثلاثية الأبعاد حول الجدول الخاص بك. ومع ذلك ، اعتبارًا من الإصدار IE8 والإصدارات الأحدث ، لا يتم دعم ذلك إلا في وضع معايير IE7 ووضع Quirks . تنص Microsoft على أن هذه الخصائص لم تعد معتمدة.
لفترة قصيرة ، تم اقتراح خاصية cols على عنصر TABLE لمساعدة المستعرضات على معرفة عدد الأعمدة في الجدول. كان الافتراض أن هذا سيساعد على تسريع تقديم الجداول الكبيرة. ومع ذلك ، تم تنفيذه فقط بواسطة Internet Explorer ، واعتبارًا من الإصدار IE8 والإصدارات الأحدث ، لا يتم دعم ذلك إلا في IE7 Standards Mode و Quirks Mode.
نظرًا لوجود سمة عرض (قديمة في HTML5) ، افترض العديد من الأشخاص أن هناك سمة ارتفاع للجداول أيضًا. ولكن نظرًا لأن الجداول تتوافق مع عرض المحتوى الخاص بها أو العرض المحدد في سمة CSS أو العرض ، فلا يمكن تقييد الارتفاع. لذلك ، بدلاً من ذلك ، سمحت المتصفحات لسمة الارتفاع بتحديد الحد الأدنى لارتفاع الجدول. إذا كان الجدول أطول من هذا الارتفاع ، فسيظهر أطول. ولكن يجب عليك استخدام العقار
باستخدام خاصية ارتفاع CSS ، يمكنك تقييد الارتفاع إذا كنت تستخدم خاصية 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؛" > المحتويات في القاع.
المحتويات في المنتصف.