مرحبا، اليوم سوف نتحدث عن الجداول
وكيف يمكنك استخدامها لعرض البيانات الخاصة بك على موقع الويب الخاص بك.
لذا، كيف أحب أن أصرح،
هو أننا اعتدنا على اعتبار الطاولات مثل هذه الفكرة الشريرة.
لأن الناس لم يكونوا يستخدمون الطاولات للسبب الذي كان من المفترض أن يفعلوه
بدلا من ذلك، كانوا يستخدمون الجداول لنوع من تحديد الأشياء،
ووضعها بشكل جيد على الشاشة.
بدأ هذا يحدث مرة أخرى خلال وقت HTML 2، ربما HTML 3.1.
وقال الناس، أريد حقا أن تبدو صفحتي لطيفة
وليس لدي وسيلة للقيام بذلك، لذلك سأجعلها طاولة ضخمة
ونوع من وضع كل شيء في صفوف أو أعمدة مختلفة.
هذا يلقي تماما فكرة كاملة من فصل المحتوى من التخطيط.
وبالإضافة إلى ذلك، فإنه يجعل الأمر مربكا حقا بالنسبة للأشخاص الذين قد يستخدمون
الأجهزة المساعدة، لأنهم يتساءلون، هل هذا حقا كل مجموعة من البيانات،
أو هل هناك محتوى يجب أن يكون مجرد نوع من التنسيق بالطريقة العادية.
لذا سنبدأ بالحديث عن الطاولات
وما أريد فعله حقًا هو التأكيد على فكرة أنه يجب عليك استخدام
الجداول فقط إذا كان لديك نوع من البيانات التي يتم عرضها.
الآن قبل أن تبدأ حتى في ترميز شيء واحد،
أحتاج منك أن ترسم تخطيطك لما يجب أن يبدو عليه الجدول الخاص بك.
الآن، لقد أخبرت طلابي هذا مرارا وتكرارا، ويقولون نعم، نعم،
وبعد ذلك يبدأون في التعليمات البرمجية.
ثم يقولون نعم، نعم، وبعد ذلك يبدأون في التعليمات البرمجية.
وبعد حوالي المرة الرابعة أو الخامسة، يدركون،
أوه، أنه من الأسهل بكثير كتابة رمز نظيف في المرة الأولى، بدلاً من إصلاح الشفرة المكسورة.
وهكذا، ثم يبدأون ويفكرون، حسنا، كم عدد الصفوف
والأعمدة التي أحتاج فعلا لتمثيل جميع بياناتي؟
ثم تذهب خطوة أبعد من ذلك وتقول، حسنا هل هناك أي صفوف أو
أعمدة حيث أنا في الواقع بحاجة إلى تمتد خلايا متعددة، أو
ما نسميه الصناديق الصغيرة في الجدول؟
لأنه إذا كان الأمر كذلك، فإنه سيكون أسهل بكثير إذا كنت قد رسمت هذا لمعرفة
أين أنا ستعمل بحاجة إلى أي سمات خاصة لجعل ذلك يحدث.
لأن أحد أهم الأشياء التي يجب معرفتها عند القيام بالجداول هو أن
المتصفح يتوقع أن يكون هناك نفس العدد من الخلايا في كل صف واحد.
إذا لم تفعل ذلك، سيبدو الأمر فوضوي للغاية
بمجرد أن تقرر ما يجب أن يبدو عليه الجدول الخاص بك،
ثم حان الوقت لبدء التفكير في العلامات.
تبدأ مع علامة الجدول وانها في الأساس مجرد عنصر حاوية التي
سوف تعقد جميع السمات الأخرى وجميع العلامات الأخرى داخل منه.
سيكون لديك صف الجدول ثم هنا من أجل تد، لدي أعمدة، ولكن
ما أعتقد حقا سيكون من الأفضل أن نفكر في هذا كخلايا الجدول، وليس حقا
الأعمدة لأن ما تفعله هو الحديث عن كل مربع على حدة.
حتى داخل الطاولة، سيكون لديك واحد أو أكثر من صفوف الجدول.
ثم داخل كل صف جدول، سيكون لديك واحد أو أكثر من عناصر TD، وبالتالي
فإن الأعمدة أو الخلايا.
حتى هنا هو رمز لإنشاء جدول بسيط جدا.
على الرغم من أنها تبدو ملتوية جدا وكأن هناك الكثير من الأشياء التي تحدث هنا.
معظم هذا هو مجرد معلومات للمتصفح.
عندما ننظر إلى الصفحة الفعلية التي تم إنشاؤها سترى أنها
نظيفة جدا وبسيطة.
لذلك لدي رمز
بلدي لطاولتي في الخارج ثم كل واحد من أسطر بلدي من التعليمات البرمجية هنا هو صف واحد.
لدي بلدي آر بداية ونهاية آر.
ثم داخل كل صف لدي ثلاثة عناصر، واحد، اثنان،
ثلاثة التي هي داخل علامة تد.
وأنا ستعمل اقول لكم الآن أنه عندما كتبت في البداية هذا الرمز بدا على
ما يرام، ولكن أنا نوع من الفوضى حتى لأنني نسيت أن وضعت في بلدي علامة النهاية.
لذا تأكد عندما تقوم بترميز هذه، فأنت نظيف وموجز للغاية.
وإذا كنت تفعل ذلك بشكل صحيح، وهذا سيخلق جدول بسيط،
كما قلت، مع تسعة عناصر في ذلك.
واحد، اثنان، ثلاثة، أربعة، خمسة، ستة، سبعة، ثمانية، تسعة
هذا بسيط كما يمكنك الحصول عليه، بقدر ما يذهب الجدول.
الآن في بعض الحالات قد ترغب في إضافة ما نسميه عناوين الجدول إلى شفرتك.
عناوين الجداول هي فكرة أنه في أعلى كل عمود، أو حتى في أعلى أو
بداية كل صف، لديك نوع من النص الغامق، الذي يشير إلى أن
هذه ليست بيانات، وهذا هو في الواقع اسم البيانات التي ننظر إليها.
الآن لا بأس، أعني أنها ليست على ما يرام، ولكن ما يفعله بعض الناس هو أنها
مجرد جعل هذه العناصر TD العادية وربما جعلها جريئة.
حتى الناس الذين ينظرون إليها يمكن أن يقول، أوه مهلا انظروا.
هذا جريء لذا يجب أن يكون أكثر أهمية.
ولكننا نريد حقا أن نتجنب القيام بذلك.
بدلاً من استخدام TD مع نوع من الخط الغامق،
نريد استخدام علامة دلالية TH، والتي تقف على عنوان الجدول.
حتى هنا هذه الأسطر الثلاثة من التعليمات البرمجية هي نفسها تماما كما كان من قبل، ولكن
لقد أضفت صف واحد جديد، حيث بدلا من تد لدي ث.
لذلك لدي الصف الأول، الصف الثاني، الصف الثالث، وما إلى ذلك وما
يمكنك رؤيته هنا هو أن ما نحصل عليه هو هذا الجدول الصغير الجميل
في أعلى كل واحد، وهذا على حد سواء يتيح للمستخدم معرفة أن
هذه هي العناوين، ولكن أيضا ينقل دلالي نفس المعلومات.
لذا أحد الأشياء التي ذكرتها سابقًا، عندما تصمم طاولتك
هو أنك تريد أن تقرر ما إذا كنت ستمتد إلى خلايا متعددة.
قد يكون هذا هو الحال أن الطاولة التي تريد أن تجعل ليست نوعا من
الكمال تيك تاك تو شبكة، أو الكمال تسعة في تسعة.
حتى تتمكن من الجمع بين صفوف
متعددة أو أعمدة متعددة باستخدام سمات امتداد الصف والعمود.
داخل العنصر الخاص بك، يمكنك تضمين rawspan يساوي اثنين إذا كنت تريد أن تمتد
صفين، أو تمتد العمود يساوي خمسة إذا كنت تريد أن تمتد على خمسة أعمدة.
حسنا، اسمحوا لي أن المضي قدما وأظهر لكم مثالا مع بعض التعليمات البرمجية
ومرة أخرى، وأنا أدرك أنه إذا كنت تبحث في هذا على بعض الشاشة الصغيرة أن هذا
يبدو حقا مثل الكثير من المعلومات لهضم في.
لكنه ليس حقا أن يحدث الكثير.
لدي جدول بسيط، حيث لدي عناوين الجدول الخاصة بي مع اسم الطفل
ثم اسم الوالد.
ثم أذهب وأبدأ بوضع طفل،
ومع كل طفل، أقوم بتضمين والديهم.
لذا هنا، لدي راوسبان يساوي اثنين لكاثرين،
مما يعني أنني في الواقع أريد أن تأخذ زنزانتي كاثرين سطرين.
نفس الشيء مع زنزانة (إدوارد)
( ماجي) لقد تركتها وحيدة تماماً
لذلك دعونا فقط نذهب وننظر إلى النتيجة النهائية، وأعتقد أن هذا هو حقا إذا
كنا سلسلة إلى الوراء، انها سوف تساعدك على فهم ما يفعله هذا الرمز.
لذلك مرة أخرى، لدي اسم الطفل واسم الوالد،
وهنا الخليتان حيث قمت بفترة الصف.
ويمكنكم أن تروا، في الواقع استغرقت عدة صفوف لأنه في هذه الحالة،
كان لدى كاثرين وإدوارد أبوين أردنا أن نضعها معا.
مرة أخرى، ليس مفهوما صعبا، ولكن هذا هو الحال أنه إذا كنت لا تفكر في
ذلك، وعدنا إلى التعليمات البرمجية الخاصة بك وبدأنا للتو رمي rowspan و
columnspan في، فإنه يحصل فقط فوضوي جدا ويصعب تصحيحه.
أحد الأشياء التي قد لاحظتها،
في الجزء العلوي من الجدول، قمت بتضمين سمة حدود.
السبب في أنني فعلت ذلك هو لأنني أعتقد أنه من
الأسهل بكثير أن نرى هذا rowspan هنا لأن لدي خطوط حول كل خلية.
لذلك، يمكنك استخدام سمة الحدود للمضي قدما
ووضع خطوط بين كل واحدة من الخلايا الخاصة بك.
ومن الشائع جدا القيام بذلك.
ولكن، مرة أخرى، في HTML الخاص بك، أحاول تجنب التصميم.
إنه شيء يمكننا إضافته لاحقًا إذا قررت معرفة المزيد عن CSS.
ولكنها سمة شائعة الاستخدام، أردت المضي قدمًا
ووضعها هناك حتى تتمكن من رؤية ما يجري.
بعد ذلك، دعونا نتحدث عن التسميات التوضيحية.
لذا، كيف نربط النص بجدول محدد؟
ما اعتاد الناس القيام به هو أنها سوف تضع في نوع من العنوان، h2 أو h3
وأنها سوف تضعه الحق فوق أو الحق أسفل الجدول.
لذلك بصريا إذا كنت تنظر إليها، يمكنك نوع من معرفة، أوه،
وهذا ينطبق على الطاولة.
ولكن مرة أخرى أنا حقا أريد أن أدفعك لاستخدام العلامات الدلالية.
لذلك بدلا من القيام بذلك، يمكنك المضي قدما
واستخدام علامة التسمية التوضيحية داخل الجدول،
وسوف تساعد الجميع على معرفة أن أوه هذا التسمية التوضيحية يذهب مع هذا الجدول المحدد.
لذلك، دعونا المضي قدما ومراجعة.
رقم واحد، يجب استخدام الجداول فقط للبيانات الجدولية.
لا تستخدمها للتخطيط.
ثانيا، ارسم طاولتك قبل أن تقوم برمز الجدول الخاص بك.
سوف ينقذك الكثير من وجع القلب في النهاية، أعدك بذلك
وأخيرًا، وهذا هو الشيء الثالث والأكثر أهمية الذي آمل أن تغادره،
هو أنك بحاجة إلى التحقق من وجود علامات غير مغلقة.
أحد الأشياء الرائعة في المتصفحات عندما تقوم بالتطوير
محليًا، فأنت تكتب شفرتك وتختبرها وتنظر إليها، هو أن
متصفحك يمكنه عادة معرفة ما كنت تنوي القيام به، حتى لو أفسدت الأمر.
حَسَناً.
والجداول هي مثال جيد حيث يمكنك نسيان إغلاق بعض العلامات،
ولكن متصفحك يعرف ما كنت تنوي القيام به.
ولكن في وقت لاحق إذا قررت إنشاء جدول، وكنت ستعمل تحميله،
وكنت حقا بحاجة للتأكد من أن البيانات في هناك صالحة وممثلة بشكل جيد.
أحد أسوأ الأشياء التي يمكنك القيام بها هو ترك علاماتك غير مغلقة.
لذلك تأكد من التحقق من صحة التعليمات البرمجية الخاصة بك،
كلما كتبت جدول أو حقا كلما كتبت أي رمز.
وسوف تكون حقا قادرة على التأكد من أنك تكتب أفضل رمز يمكنك.