درسنا اليوم يعتبر من اهم الدروس الا وهو الجداول , والجداول هي مجموعة من الخلايا مرتبة في صفوف وهي لعرض البيانات وترتيبها واليك شكل الجدول بالصورة التوضيحية التالية :
حيث ان المربعات تمثل الخلايا ويمكن عمل الجداول باستخدام الوسم التالي :
<table>
<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>
في الوسم السابق سينتج لنا جدول مكون من ثلاثة صفوف وفي كل صف ثلاث خلايا وذلك بالشكل التالي :
<tr></tr> لعمل صف جديد في الجدول
<td></td> لعمل خلية جديدة داخل الصف
اليك الصورة التالية للتوضيح :
ففي الصورة يمثل الجزء الاخضر الصف الذي في الجدول والذي نقوم بانشاءه بواسطة الوسم <tr></tr>
والجزء الملون باللون الازرق يمثل الخلايا والذي ننشاءها بواسطة الوسم <td></td> حيث نضع الخلايا داخل الصف .
مثال تطبيقي
سنشأ جدول بثلاثة صفوف في كل صف ثلاث خلايا وسيكون الوسم بالشكل التالي :
<table>
<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>
والنتيجة ستكون :
تلاحظ في المثال السابق ان الجدول ظهر بدون حدود وكذلك الخلايا اي ظهر النص دون حدود وسنحدد سمك حدود الجدول باستخدام الخاصية border ضمن الوسم table وسنعدل الوسم السابق ليصبح بالشكل التالي :
<table border="2">
<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>
وستكون النتيجة بالشكل التالي :
بعد ان تعلمنا كيفية انشاء الجداول سنتعلم بعض خصائص الجدول .
اولا : عرض وارتفاع الجدول
وهذه الخصائص سبق وتعرفنا عليها حيث نستخدم الوسم width لتحديد عرض الجدول والوسم height لتحديد الارتفاع وذلك ضمن الوسم table بالشكل التالي :
<table border="2" width="200" height="200">
ثانياً : الخاصية cellspacing
وهي تستخدم لتحديد المسافة بين كل خلية وخلية مثلا اذا كنت تريد جعل الخلايا متباعدة عن بعضها البعض فاستخدم هذه الخاصية بالشكل التالي :
<html dir="rtl">
<head><title>موقع التقنية اليوم </title></head>
<body>
<table border="2" cellspacing="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>
حيث حددنا المسافة بين كل خلية وخلية بمقدار 10 بيكسل وستكون النتيجة في المثال السابق كالتالي :
ثالثاً : الخاصية cellpadding
وهي لتحديد المسافة حول النص التي تفصل النص عن الحدود حيث تجد النص ملتصق بالحدود ولذلك سنستخدم هذه الخاصية لتحديد المسافة الفاصلة بين حدود الخلية وبين النص الذي داخل الخلية ونستخدم هذه الخاصية بالشكل التالي :
<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>
وستكون النتيجة بالشكل التالي :
واليك هذه الصورة لتوضح لك عمل هذه الخاصية :
الى هنا انتهينا من الجزء الاول من الجداول وسنواصل الحديث عن الجداول في الدرس المقبل ان شاء الله .
الانتقال الى فهرس الدروس ...
الانتقال الى فهرس الدروس ...
اترك تعليقك على الموضوع