في درسنا هذا سنواصل الحديث عن الجداول وسنبدء بمراجعة الدرس السابق حيث قلنا ان الوسم الخاص بانشاء جدول هو <table> </table> وننشء صفوف داخل الجدول باستخدام الوسم <tr></tr> وننشئ خلايا داخل الصفوف باستخدام الوسم <td></td> واليك المثال التالي :
<html dir="rtl">
<head><title>موقع التقنية اليوم </title></head>
<body>
<table border="2" cellpadding="10">
<tr><td>خلية في الصف الاول</td><td>خلية في الصف الاول</td><td> خلية في الصف الاول</td></tr>
<tr><td>خلية في الصف الثاني</td><td>خلية في الصف الثاني</td><td> خلية في الصف الثاني</td></tr>
<tr><td>خلية في الصف الثالث</td><td>خلية في الصف الثالث</td><td> خلية في الصف الثالث</td></tr>
</table>
</html>
وستكون النتيجة :
وتعرفنا على بعض الخصائص وسنكمل الخصائص اليوم .
الخاصية bgcolor
واعتقد اصبحت هذه الخاصية معروفة وهي لتغيير لون خلفية الجدول وتستخدم بالطريقة التالية :
<table bgcolor=#رمز اللون>
حيث نضع رمز اللون في المكان المشار الية في الكود اعلاه
مثال تطبيقي على تغيير لون الخلفية
اليك هذا المثال البسيط حيث سنغير لون خلفية الجدول الى اللون السماوي الفاتح ورمزه d7eafa وذلك بالشكل التالي :
<html dir="rtl">
<head><title>موقع التقنية اليوم </title></head>
<body>
<table border="2" cellpadding="10" bgcolor=#d7eafa>
<tr><td>خلية في الصف الاول</td><td>خلية في الصف الاول</td><td> خلية في الصف الاول</td></tr>
<tr><td>خلية في الصف الثاني</td><td>خلية في الصف الثاني</td><td> خلية في الصف الثاني</td></tr>
<tr><td>خلية في الصف الثالث</td><td>خلية في الصف الثالث</td><td> خلية في الصف الثالث</td></tr>
</table>
</html>
وسيكون الناتج بالشكل التالي :
الخاصية :background
وهي لتغيير خلفية الجدول بصورة اي وضع صورة كخلفية للجدول وتستخدم بالشكل التالي:
<table bckground="33.jpg">
حيث ان 33.jpg هي الصوة التي استخدمناها كخلفية للجدول
مثال تطبيقي
في هذا المثال سنستخدم الصورة التالية كخلفية للجدول
وسيكون الوسم بالشكل التالي :
<html dir="rtl">
<head><title>موقع التقنية اليوم </title></head>
<body>
<table border="2" cellpadding="10" background="33.jpg">
<tr><td>خلية في الصف الاول</td><td>خلية في الصف الاول</td><td> خلية في الصف الاول</td></tr>
<tr><td>خلية في الصف الثاني</td><td>خلية في الصف الثاني</td><td> خلية في الصف الثاني</td></tr>
<tr><td>خلية في الصف الثالث</td><td>خلية في الصف الثالث</td><td> خلية في الصف الثالث</td></tr>
</table>
</html>
والنتيجة ستكون :
الخاصية : colspan
احدى الخواص الهامة في الجداول وهي تستخدم لدمج عدة خلايا وجعلها خليه واحدة مثلا : لديك جدول مكون من صفين الصف الاول فيه خليتين والصف الثاني خليتين وتريد ان تدمج الخليتين التي في الصف الاول لتصير خلية واحدة , لذا فهذا الوسم هو الحل ويستخدم بالشكل التالي :
<tr><td colspan="2"></td><tr>
من خلال الوسم السابق يتضح لنا ان الوسم colspan يستخدم داخل الوسم <td></td> وللتوضيح اكثر فهذا الوسم يستخدم لجعل الخلية الواحد بعرض عدة خلايا حيث استخدمنا في الوسم السابق الرقم 2 مع هذا الوسم لذلك فالخلية ستصبح بعرض خليتين , واليك هذا المثال التطبيقي :
سننشئ جدول بثلاثة صفوف في الصف الاول خلية بعرض ثلاث خلايا والصف الثاني فيه ثلاث خلايا والصف ثالث فيه ثلاث خلايا وسيكون الوسم بالشكل التالي :
<html dir="rtl">
<head><title>موقع التقنية اليوم </title></head>
<body>
<table border="2" cellpadding="10" background="33.jpg">
<tr><td colspan="3">خلية في الصف الاول بعرض ثلاث خلايا</td></tr>
<tr><td>خلية في الصف الثاني</td><td>خلية في الصف الثاني</td><td> خلية في الصف الثاني</td></tr>
<tr><td>خلية في الصف الثالث</td><td>خلية في الصف الثالث</td><td> خلية في الصف الثالث</td></tr>
</table>
</html>
وستكون النتيجة كالتالي :
الى هنا انتهينا من شرح الجداول ولكن سنحاول اخذ بعض النقاط عن تنسيق كل خلية على حده وذلك في الدرس المقبل ان شاء الله .
الانتقال الى فهرس الدروس ...
الانتقال الى فهرس الدروس ...
اترك تعليقك على الموضوع