الشروع في عمل جداول بسيطة في HTML

تعد جداول HTML إلى حد بعيد واحدة من أفضل عبارات HTML التي تم إنشاؤها على الإطلاق. القدرة على تنسيق صفحة ويب باستخدام بيانات الجدول أمر مذهل! تعلم ، استخدمها ، وأحبها!

الجداول الأساسية:

دعنا نأخذ قائمة البقالة التي استخدمناها في البرنامج التعليمي للقائمة ونجعلها في جدول هذه المرة. سنضع العناصر في العمود الأول والأسعار في العمود الثاني.

هذا هو الكود الذي جعله يحدث. الرمز الفعلي موجود على اليسار والوصف باللغة الإنجليزية على اليمين. تم وضع مسافة بادئة للوصف لإظهار "بنية" بيان الجدول.

مشوش؟ حسنًا ، دعنا نلقي نظرة على الجدول أعلاه. هذا الجدول في الواقع بسيط للغاية. أنت تبني الجداول بنفس الطريقة التي تقرأ بها الكتاب ؛ من اليسار إلى اليمين ومن أعلى إلى أسفل. يبدأ الجدول بعلامة <table> وينتهي بعلامة </table> . يبدأ كل صف بعلامة <tr> وينتهي بعلامة </tr> . يبدأ كل جزء من بيانات الجدول بعلامة <td> وينتهي بعلامة </td> .

لكن ، هذا ليس طاولة ، كما تقول! ليس لها حدود! في الواقع ، إنها طاولة. إنه جدول بلا حدود أو حد = ”0 ″ . هذا المفهوم مهم جدًا عندما تريد استخدام عبارات TABLE لتنسيق صفحات الويب الخاصة بك. أنت لا تريد دائمًا حدودًا سميكة. حسنًا ، لنصنع طاولة بحدود هذه المرة.

الاختلاف الوحيد بين هذا الجدول والجدول السابق هو عبارة <table> التي تبدو كالتالي.

<table border = ”7 ″>

سهل جدا ، أليس كذلك؟ يتم تمثيل حجم الحد بالبكسل. حسنًا ، دعنا الآن نحصل على المزيد من مساحة الفضاء . هذا هو التباعد بين خلايا الجدول لدينا. يمكنك أيضًا التفكير في هذا على أنه سمك الجدار بين خلايا الجدول.

هذا يبدو أفضل بكثير. هل يمكنك ان ترى الاختلاف؟ مرة أخرى ، التغيير الوحيد هو في عبارة <table> التي تبدو كما يلي.

<table border = ”7 ″ cellspacing =” 7 ″>

يتم قياس CELLSPACING ، مثل BORDER ، أيضًا بالبكسل. لكنك تقول إن النص يبدو قريبًا جدًا من جدران الطاولة! حسنًا ، حسنًا ، يمكننا إصلاح ذلك أيضًا. إنها تسمى CELLPADDING . إنها المسافة بين محتويات الخلية وحواف جدران الخلية.

آه ، الآن هل هذه هي الطريقة التي تريدها؟ لا؟ حسنًا ، كان علي أن أبالغ في الأرقام قليلاً ، لكن هذا كان فقط لمحاولة توضيح نقطة. آمل أن تتمكن من رؤية الاختلافات. تم إنشاء الجدول السابق باستخدام عبارة <table> الموضحة أدناه.

<table border = ”7 ″ cellspacing =” 7 ″ cellpadding = ”7 ″>

تأطير الصور:

الآن نريد الدخول في أشياء أكثر متعة. يعد تأطير الصور طريقة رائعة لتحسين صورك. يجعلهم يبدون وكأنهم يقفزون مباشرة خارج الصفحة. هذه هي تحفتي الخمسة الثانية.

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

<table border = ”7 ″ alt =” ”>
<tr>
<td> <img src = ”image.gif”> </td>
</tr>
</table>

يمكن ترك العلامة < tr> والعلامات </tr> إذا كنت ترغب في ذلك. ستظل تعمل بشكل جيد. من المحتمل أن يجادل المتشددون في لغة HTML بأن هذه العلامات يجب أن تكون موجودة هناك. إذا كنت تشعر بهذه الطريقة ، كما أفعل عادةً ، فاستخدمها.

أو يمكنك أيضًا تأطير صورك بالنص كما هو موضح أدناه.

نيتو ، هو! يظهر رمز أدناه.

<table border = ”7 ″ cellpadding =” 10 ″>
<tr>
<td> <img src = ”image.gif” alt = ””> </td>
<td> يا لها من <br> تحفة! </ td>
</tr>
</table>

لدي ملاحظة أخرى حول تأطير الصور. إذا كنت تواجه مشكلات في توسيط صورتك ، فجرّب ما يلي.

<td align = ”center”> <img src = ”image.gif”> </td>

روابط تأطير:

يمكنك أيضًا وضع روابط داخل جدول. في الواقع ، يمكنك وضع صفحتك بأكملها داخل مجموعة من أوامر الجدول إذا كنت تريد ذلك وباستخدام BORDER = ”0 ″ لا يمكن لأحد معرفة ذلك حقًا. تسأل لماذا تريد أن تفعل ذلك؟ لتنسيق الصور والنصوص معًا على صفحتك ؛ فكر في الأمر. حسنًا ، نعود إلى رابط تأطير.

هذا هو الكود الذي فعل ذلك.

<table border = ”7 ″ cellpadding =” 10 ″>
<tr>
<td> <a href=”http://www.google.com/”> Google.com </a> </td>
<td> <a href="http://www.yahoo.com/”> Yahoo! </a> </td>
</tr>
<tr>
<td> <a href="http://www.jjwdesign.com/”> JJW Design </a> </td>
<td> <a href=”http://www.iproundup.com/”> تقرير حول IP </a> </td>
</tr>
</table>

حسنًا ، أتمنى أن تكون قد استمتعت بهذا القسم الصغير في بيان <table> . هناك الكثير الذي يمكنك فعله باستخدام عبارة <table> أكثر مما هو ممكن في هذا البرنامج التعليمي. ومع ذلك ، آمل أن يكون هذا قد ساعد.

ارتباط إلى هذا البرنامج التعليمي!

هل وجدت هذا البرنامج التعليمي مفيد؟ إذا كان الأمر كذلك ، فيرجى مساعدتي في مشاركتها مع الآخرين من خلال الارتباط بها. ما عليك سوى وضع رمز HTML أدناه على صفحة الويب الخاصة بك لإنشاء ارتباط إلى هذا البرنامج التعليمي.