وبدأنا الحديث عن خصائص الجدول و شرحنا الخاصة border
وسنكمل حديثنا عن باقي الخواص للجدول و خلاياه
خاصة تباعد الخلايا cellspacing
طريقة كتابتها : نكتب
كود:
cellspacing="رقم"
مثال:
كود HTML:
<table border="1" cellspacing="55"> <tr> <td>shabsug</td> <td>shabsug</td> </tr> </table>
وقد حددت على الجدول بأسهم صفراء المسافة بين الخلايا
و الرقم 55 في الكود السابق يعني مسافة 55 بكسل بين الخلايا
جرب أن تقوم بتكبير و تصغير الرقم لرؤية النتائج
خاصة ملئ الخلية cellpadding
تستعمل كسابقتها ولكن وظيفتها وضع المسافة المحيطة بمحتوى الخلية
وستتوضح الفكرة بالمثال التالي:
كود HTML:
<table border="1" cellpadding="55"> <tr> <td>shabsug</td> <td>shabsug</td> </tr> </table>
وفي الصورة التالية توضيح للفرق بين الخاصتين
حيث الموضح بسهم أخضر هي cellspacing
و الموضح بالأحمر : cellpadding
خاصة الانحياز align :
نستخدمها لتحديد جهة الجدول إما من اليمين أو اليسار أو الوسط أو بارز
في المثال التالي سنقوم بإنشاء جداول كل منها منحاز بجهة
وإذا اطلعت على الكود التالي ستفهم هذه الخاصة:
كود HTML:
<table border="1" align="right"> <tr><td>يمين</td></tr> </table> <br/> <table border="1" align="center"> <tr><td>وسط</td></tr> </table> <br/> <table border="1" align="left"> <tr><td>يسار</td></tr> </table> <br/> <table border="1" align="justify"> <tr><td>بارز</td></tr> </table>
و في المثال التالي تم تطبيقها على كل خلية td لوحدها طبق المثال :
كود HTML:
<table width="600px" border="1" dir="rtl"> <tr> <td align="left">يسار</td> <td align="center">وسط</td> <td align="right">يمين</td> </tr>
الخاصية dir
لتحديد جهة محتوى خلايا الجدول وهذه الخاصة تشمل كلاً من الجدول أو الخلايا
أي يمكن تطبيقها ضمن table أو ضمن td أو tr
المثال التالي مطبق على الخلايا td :
كود HTML:
<table width="600px" border="1" > <tr> <td dir="rtl">من اليمين لليسار</td> <td dir="ltr">من اليسار لليمين</td> </tr>
وفي المثال التالي تم تطبيقها على مستوى كامل الجدول:
كود HTML:
<table width="600px" border="1" dir="rtl"> <tr> <td >دورة برمجة الويب</td> <td >لغة html</td> </tr>
الخاصة width للتحكم بالعرض
تطبق على الخلايا أو الجدول
وفي الأمثلة التي وردت أعلاه لعلك لاحظت كيف تم تطبيقها على الجدول
الخاصة heigh
للتحكم بالارتفاع , وتستخدم على مستوى خلايا الجدول فقط
لاحظ المثال التالي :
كود HTML:
<table border="1"> <tr > <td width="300px" height="150px">shabsug</td> <td width="100px">shabsug</td> </tr> </table>
ملاحظة : يمكن التحكم بشكل أفضل بخصائص العرض و الارتفاع للجدول و خلاياه عن طريق css
وسنرى ذلك في الدورة القريبة بعد html فوراً
خاصة caption
تستخدم لوضع عنوان للجدول
مثال:
كود HTML:
<html> <body> <table border="1"> <caption>جدول الفواتير</caption> <tr> <th>الشهر</th> <th>الفاتورة</th> </tr> <tr> <td>كانون الثاني</td> <td>$100</td> </tr> <tr> <td>آذار</td> <td>$50</td> </tr> </table> </body> </html>
خاصية bgcolor
للتحكم بلون الخلفية سواءً للجدول table أو الخلايا td,tr
مثال:
كود HTML:
<html> <body> <table bgcolor="red" border="1"> <caption>جدول الفواتير</caption> <tr> <th>الشهر</th> <th>الفاتورة</th> </tr> <tr> <td>كانون الثاني</td> <td>$100</td> </tr> <tr bgcolor="lime"> <td>كانون الأول</td> <td>$200</td> </tr> <tr> <td bgcolor="yellow">آذار</td> <td bgcolor="white">$50</td> </tr> </table> </body> </html>
ولاحظ كيف وضعنا اللون الأحمر للجدول كاملاً red
ثم خصصنا اللون الليموني lime لصف كامل tr
نكتفي بهذا القدر حتى لا نثقل عليكم أكثر من ذلك
وسأكمل البقية في درس لاحق حيث سنتعرف على خصائص أخرى و على طرق دمج الخلايا
ليست هناك تعليقات:
إرسال تعليق