تمنحك سمات جدول HTML الكثير من التحكم في جداول HTML. هناك الكثير من السمات المتاحة للجداول لجعلها أكثر إثارة للاهتمام وتغيير مظهر صفحتك.
سمات عنصر جدول HTML
في HTML5 ، يستخدم العنصر السمات العامة وسمة أخرى:. وتغيرت فقط قيمة 1 أو فارغة (أي الحدود = ""). إذا كنت ترغب في تغيير عرض الحدود ، يجب عليك استخدام عرض الحدود خاصية CSS.
انظر أدناه للتعرف على سمات جدول HTML5 الصالحة.
هناك أيضًا العديد من السمات التي تعد جزءًا من مواصفات HTML 4.01 التي أصبحت قديمة في HTML5:
- - استخدم CSS
حشوةالممتلكات على الطاولةTDوTHعناصر. - - استخدم خاصية CSS
الحدود بين الولاداتعلى الطاولة. - - استخدم أنماط CSS
لون الحدود: أسود.ونمط الحدودعلى الطاولة. - - استخدم أنماط CSS
لون الحدود: أسود.ونمط الحدودعلى العناصر المناسبة من الجدول. - يجب أن تصف بنية الجدول في
شرحأو وضع الجدول بأكمله فيالشكلووصفها فيFIGCAPTION. بدلا من ذلك ، يمكنك تبسيط هيكل الجدول بحيث لا يوجد حاجة إلى تفسير. - - استخدم CSS
عرضخاصية.
وسمة واحدة تم إيقافها في HTML 4.01 وهي أيضًا قديمة في HTML5.
تعرف على المزيد حول HTML 4.01 TABLE Attributes.
محاذاة- استخدم CSSحافةالملكية بدلا من ذلك.
هناك أيضًا العديد من السمات التي لا تشكل جزءًا من أي مواصفات HTML. استخدم هذه السمات إذا كنت تعرف أن المتصفحات التي تدعمها يمكن أن تتعامل معها ولا يهمك HTML الصحيح.
- - استخدم خاصية CSS
لون الخلفيةفي حين أن. ون_الحدود- استخدم خاصية CSSالحدود بين اللونفي حين أن.bordercolorlight- استخدم خاصية CSSالحدود بين اللونفي حين أن.bordercolordark- استخدم خاصية CSSالحدود بين اللونفي حين أن.العواميد- لا يوجد بديل لهذه السمة.ارتفاع- استخدم خاصية CSSارتفاعفي حين أن.- - استخدم خاصية CSS
حافةفي حين أن. - - استخدم خاصية CSS
حافةفي حين أن. - - استخدم خاصية CSS
أبيض الفضاءفي حين أن. - - استخدم خاصية CSS
محاذاة رأسيةفي حين أن.
تعرف على المزيد حول سمات TABLE Browser المحددة.
سمات عنصر جدول HTML5
كما ذكرنا أعلاه ، هناك سمة واحدة فقط ، تتجاوز السمات العالمية ، وهي صالحة على HTML5 الطاولة جزء: الحدود.
ال الحدود يتم استخدام السمة لتحديد حد حول الجدول بأكمله وجميع الخلايا داخله. كان هناك بعض التساؤلات حول ما إذا كان سيتم تضمينه في مواصفات HTML5 ، ولكنه يبقى لأنه قدم معلومات حول بنية الجدول ، يتجاوز مجرد تبعيات الأنماط.
لإضافة الحدود السمة ، يمكنك تعيين القيمة إلى 1 إذا كان هناك حد وخالي (أو ترك السمة) إذا لم يكن هناك. معظم المتصفحات سوف تدعم أيضا 0 بدون حدود ، وأية قيمة عددية أخرى (2 ، 3 ، 30 ، 500 ، وما إلى ذلك) لتوضيح عرض الحد بوحدات البكسل ، ولكن هذا مهملاً في HTML5. بدلاً من ذلك ، يجب عليك استخدام خصائص نمط حدود CSS لتعريف عرض الحدود وأنماط أخرى.
لإنشاء جدول بحدود ، اكتب:
الحدود = "1" >
هذا هو جدول مع الحدود
هناك سمات HTML 4.01 قديمة في HTML5. إذا كنت تخطط لكتابة مستندات HTML 4.01 ، فيمكنك تعلمها ، وإلا يمكنك تجاهلها. تحتوي معظم هذه السمات على بدائل ، كما هو موضح أعلاه.
نحن تصف سمات العنصر الصالحة في HTML5 (و HTML 4.01). هذا يصفالطاولة السمات الصالحة في 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 ، اكتب:
<> بطانة الخلايا = "20" > هذا الجدول لديه بطانة الخلايا من 20. سيتم فصل حدود الخلايا بمقدار 20 بكسل.
عرض مثال لجدول مع cellpadding
تحدد السمة مقدار المسافة بين خلايا الجدول ومحتوى الخلية. مثلبطانة الخلايا، يتم تعيين الافتراضي إلى اثنين بكسل ، لذلك يجب عليك تعيينه0 إذا كنت لا تريد تباعد الخلايا.
لإضافة تباعد الخلايا إلى جدول ، اكتب:
<> هوامش الخلية = "20" > هذا الجدول لديه هوامش الخلية من 20. سيتم فصل الخلايا بمقدار 20 بكسل.
انظر الجدول مع cellspacing
تحدد السمة أي أجزاء من الحدود المحيطة بالجدول الخارجي ستكون مرئية.يمكنك تأطير الطاولة الخاصة بك على الجوانب الأربعة ، أي جانب واحد ، أعلى وأسفل ، إلى اليسار واليمين ، أو لا شيء.
هنا هو HTML لجدول مع الحدود الجانبية اليسرى فقط:
إطار = "LHS" >
هذه الطاولة سوف نحصل على فقط الجانب الأيسر مؤطرة.
ومثال آخر مع الإطار السفلي:
إطار = "أدناه" >
يحتوي هذا الجدول على إطار في الأسفل.
تحقق من بعض الجداول مع الإطارات
السمة هي مشابهة لالإطار سمة ، فإنه يؤثر فقط على الحدود حول خلايا الجدول. يمكنك وضع القواعد على جميع الخلايا ، بين الأعمدة ، وبين مجموعات مثلTBODY وTFOOT أو لا شيء.
لإنشاء جدول بسطور بين الصفوف فقط ، اكتب:
قواعد = "صفوف" >
هذا الجدول 4X4 لديه الصفوف لا الأعمدة مع الخطوط العريضة قواعد السمة.
وآخر مع خطوط بين الأعمدة:
قواعد = "الأكواد" >
هذا هو طاولة أين ال أعمدة هي سلط الضوء
هنا مثال على جدول بالقواعد
توفر السمة معلومات حول الجدول الخاص بقارئات الشاشة ووكلاء المستخدمين الآخرين الذين قد يواجهون صعوبة في قراءة الجداول. لاستخدام الملخص السمة ، تكتب وصفًا موجزًا للجدول وتضع ذلك كقيمة للسمة. لن يتم عرض الملخص على صفحة الويب في معظم متصفحات الويب القياسية.
إليك كيفية كتابة جدول بسيط يحتوي على ملخص:
<> summary = "هذا جدول عينة يحتوي على معلومات مُلئئة. الغرض من هذا الجدول هو إظهار ملخص." > العمود 1 الصف 1 العمود 2 الصف 1 العمود 1 الصف 2 العمود 2 الصف 2
عرض جدول مع ملخص
تحدد السمة عرض الجدول إما بالبكسل أو كنسبة مئوية من عنصر الحاوية. إذا كانعرض لم يتم ضبطه ، سيأخذ الجدول مساحة كبيرة فقط حيث يحتاج لعرض المحتويات ، مع عرض أقصى بنفس عرض العنصر الرئيسي.
لإنشاء جدول بعرض محدد بالبكسل ، اكتب:
<> العرض = "300" > هذا الجدول هو 80٪ من عرض الحاوية الموجود بها.
ولإنشاء جدول بعرض بعرض نسبة مئوية من العنصر الرئيسي ، اكتب:
<> العرض = "80٪" > هذا الجدول هو 80٪ من عرض الحاوية الموجود بها.
شاهد مثالاً على جدول بعرض
أهدر HTML 4.01 سمة TABLE
هناك سمة واحدة منالطاولة العنصر الذي تم إيقافه بتنسيق HTML 4.01 وأصبح قديمًا في HTML5:محاذاة. تتيح لك هذه السمة تعيين مكان الجدول في الصفحة بالنسبة للنص الموجود بجواره. تم إيقاف هذه الخاصية في HTML 4.01 ، ويجب تجنب استخدامها. بدلاً من ذلك ، يجب عليك استخدام خاصية CSS أوleft-left: auto؛ والهامش الأيمن: auto؛ الأساليب. التطفو خاصية يمنحك نتيجة أقرب إلى مامحاذاة الخاصية المميزة ، ولكن يمكن أن تؤثر على طريقة عرض بقية محتويات الصفحة. الالهامش الأيمن: auto؛ وleft-left: auto؛ هي ما يوصي به W3C كبديل.
هنا مثال مهمل باستخداممحاذاة صفة، عزا:
<> محاذاة = "حق" > هذا الجدول محاذي لليمين يتدفق النص حوله إلى اليسار
شاهد مثالًا موقوفًا باستخداممحاذاة صفة، عزا.
وللحصول على نفس التأثير مع HTML (غير مهمل) صالح ، اكتب:
<> النمط = "تعويم: الحق." > هذا الجدول محاذي لليمين يتدفق النص حوله إلى اليسار
ما يلي يفسرالطاولة السمات التي لا تشكل جزءًا من أي مواصفات HTML.
تصف المعلومات السابقة سمات عنصر HTML الصالحة في HTML 4.01 ولكنها قديمة في HTML5.
فيما يلي وصفالطاولة السمات غير الصالحة في أي مواصفات حالية. إذا كنت لا تهتم بما إذا كانت صفحاتك تحقق من صحتها وكان مستخدموك يستخدمون متصفحًا يدعم هذه العناصر ، فيمكنك حينئذٍ استخدام هذه العناصر. ولكن معظمها إما غير معتمد في المتصفحات الحديثة أو لديك بدائل متوافقة مع المعايير أكثر.
لا نوصي باستخدام هذه السمات على جداول HTML الخاصة بك.
السمة هي سمة قديمة تم تضمينها قبل دعم CSS على نطاق واسع. يسمح لك بتغيير لون خلفية الجدول. يمكنك تعيين اسم لون أو رمز سداسي عشري. لا تزال هذه السمة تعمل في الكثير من المتصفحات ، ولكن بالنسبة إلى HTML الذي تم ضبطه في المستقبل ، يجب عدم استخدامه ، واستخدام CSS بدلاً منه.
البديل الأفضل لهذه السمة هو خاصية النمط.
لتغيير لون خلفية الجدول ، اكتب:
<> style = "background-color: #ccc؛" > يحتوي هذا الجدول على خلفية رمادية
مشابهه لBGCOLOR السمة ، وون_الحدود تسمح لك بتغيير لون السمة. هذه السمة مدعومة فقط من قبل Internet Explorer. بدلاً من ذلك ، يجب عليك استخدام خاصية نمط لون الحدود.
لتغيير لون حدود جدولك ، اكتب:
style = "border-color: red؛" >
يحتوي هذا الجدول على حد أحمر.
الbordercolorlight وbordercolordark تم تضمين السمات في Internet Explorer للسماح لك بإنشاء حدود ثلاثية الأبعاد حول الجدول الخاص بك. ومع ذلك ، اعتبارًا من الإصدار IE8 والإصدارات الأحدث ، لا يتم دعم ذلك إلا في وضع معايير IE7 ووضع Quirks. تنص Microsoft على أن هذه الخصائص لم تعد معتمدة.
لفترة وجيزة ، والعواميد السمة علىالطاولة تم اقتراح عنصر لمساعدة المتصفحات على معرفة عدد الأعمدة في الجدول. كان الافتراض أن هذا سيساعد على تسريع تقديم الجداول الكبيرة. ومع ذلك ، تم تنفيذه فقط بواسطة 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؛" يحتوي هذا الجدول على مساحة فارغة تبلغ 20 بكسل و a hspace 40 بكسل.
السمة هي السمة المنطقية التي تحدد ما إذا كان يجب التفاف محتويات الجدول عند حافة العنصر أو النافذة الرئيسية أو فرض التمرير الأفقي. بدلاً من ذلك ، يجب تحديد خصائص التفاف كل خلية جدول باستخدام خاصية CSS.
لجعل عمودًا بالكثير من النص لا يلتف ، اكتب:
<> style = "white-space: nowrap؛" > هذا عمود به الكثير من المحتوى. ولكن حتى إذا كان أوسع من الحاوية ، فلا ينبغي أن يلتف النص إلى السطر التالي ، بل أن يدفع نافذة المتصفح إلى التمرير أفقيًا لرؤية كل المحتوى.
وأخيرًا ، تحدد السمة كيفية محاذاة محتويات كل خلية رأسياً داخل الخلية. بدلاً من هذه السمة غير الصالحة ، يجب عليك استخدام خاصية CSS على كل خلية تريد تغيير محاذاة لها. لن تلاحظ تأثيرات هذا النمط إلا إذا كانت محتويات الخلية أقل من المساحة المتوفرة التي أنشأتها خلايا أخرى أكبر.
لإجبار الخلية على المواءمة مع الجزء السفلي (بدلاً من الوسط ، كإعداد افتراضي) ، اكتب:
هذه الخلية أطول من البقية ، لذا ستجبر الارتفاع على الارتفاع. لذلك سترى أن الخلية المحاذية عموديًا تتم محاذاتها إلى أسفل. <> style = "vertical-align: bottom؛" > محتويات في القاع. محتويات في الوسط.
