تويت
[frame="14 98"]السلام عليكم ورحمة الله وبركاته
الجداول XHTML Tables
--------------------------------------------------------------------------------
الجداول من المواضيع التى سنطيل الشرح بها بعض الشئ
وهذا نظرا لتوسع خصائصها واعدادتها
ولكثرة الحاجة لها, فهى لا غنى عنها بأغلب صفحات المواقع.
اولا معنى كلمة جدول ببساطة.
هى عبارة عن صفوف, وحقول, وخلاية.
وايضا يمكن اضافة مايعرف بإسم table headers او رؤوس الجدول
<th>
رؤوس الجدول ليست الا مجرد خلاية داخل الصفوف, يتم جعل الخط بها عريض, ومحازى للوسط.
انظر المثال التالى فهو يحتوى على ثلاث صفوف فارغة
كود:
ما رأيكم بأن نضيف حقلين لكل صف؟
كود:
قبل الدخول فى امور اخرى هناك اشياء يجب توضيحها
وان شاء الله الصورة التالية توضحها.
بعد ان تستوعب ماهو موضح بالصورة تابع التالى.
فى بعض الأحيان لا نريد نفس العدد من الخلاية لكل صف.
مثلا الصف الأول به ثلاث خلاية, ونريد الصف الثانى فقط ان يكون به خليتين.
كيف يتم ذلك؟
هذا يسمى دمج الخلاية او Merging Cells
ويتم الأمر عن طريق الخاصية colspan التى يتم اضافتها لأحد الصفوف.
انظر الكود التالى كإجابة على السؤال الذى طرحناه.
(الكود التالى لتوضيح دمج الخلاية بالنسبة للصفوف)
كود:
عاين الكود الأخير بنفسك.
ولنلقى نظرة صغيرة على اختلاف قيمة الخاصية colspan فى الصف الثانى والرابع.
فى الصف الثانى حددنا قيمة الخاصية colspan هى 2
لأننا نريد ان نجعل الخلية, تتساوى مع خليتين ببقية الصفوف.
ولذلك ظهرت هذه الخلية بحجم خليتين (بالمقارنة مع خلاية الصف الأول والثالث).
وفى الصف الرابع حددنا قيمتها 3 لأننا نريد جعل الخلية تساوى 3 خلاية.
اتمنى تكون الصورة اصبحت واضحة الأن.
اذن ماذا عن دمج الخلاية بالنسبة للحقول؟
بمعنى اخر, ماذا اذا اردنا ان نجعل احد الحقول يحتوى على خليتين فقط, فى حين ان كل حقل اخر يحتوى على 3 خلاية؟
بنفس الطريقة التى تم شرحها فى المثال الأخير لكن بإستخدام الخاصية rowspan
كالمثال التالى مثلا
كود:
هذا كان بالنسبة للحقول والصفوف والخلاية الخاصة بالجدول.
يمكنك ايضا تقسيم الجدول الى منطقة رأس Table Header
ومنطقة النهاية (زيل الجدول) Table Footer
ومنطقة جسد الجدول Table Body
كالتالى كامثال (اقرأ التعليقات داخل الكود)
كود:
اتمنى يكون الدرس بسيط واتضحت كل جوانبه.
واراكم بالدرس المقبل على خير بإذن الله.
من الدعم العربي التطويري
•الدرس السابق القوائم Lists in html[/frame]
الجداول XHTML Tables
--------------------------------------------------------------------------------
الجداول من المواضيع التى سنطيل الشرح بها بعض الشئ
وهذا نظرا لتوسع خصائصها واعدادتها
ولكثرة الحاجة لها, فهى لا غنى عنها بأغلب صفحات المواقع.
اولا معنى كلمة جدول ببساطة.
هى عبارة عن صفوف, وحقول, وخلاية.
وايضا يمكن اضافة مايعرف بإسم table headers او رؤوس الجدول
<th>
رؤوس الجدول ليست الا مجرد خلاية داخل الصفوف, يتم جعل الخط بها عريض, ومحازى للوسط.
انظر المثال التالى فهو يحتوى على ثلاث صفوف فارغة
كود:
كود:
<table> <tr></tr> <tr></tr> <tr></tr> </table>
كود:
كود:
<table> <tr> <th>رأس الجدول 1</th> <th>رأس الجدول 2</th> </tr> <tr> <td>حقل أ</td> <td>حقل ب</td> </tr> <tr> <td>حقل د</td> <td>حقل ه</td> </tr> </table>
وان شاء الله الصورة التالية توضحها.
بعد ان تستوعب ماهو موضح بالصورة تابع التالى.
فى بعض الأحيان لا نريد نفس العدد من الخلاية لكل صف.
مثلا الصف الأول به ثلاث خلاية, ونريد الصف الثانى فقط ان يكون به خليتين.
كيف يتم ذلك؟
هذا يسمى دمج الخلاية او Merging Cells
ويتم الأمر عن طريق الخاصية colspan التى يتم اضافتها لأحد الصفوف.
انظر الكود التالى كإجابة على السؤال الذى طرحناه.
(الكود التالى لتوضيح دمج الخلاية بالنسبة للصفوف)
كود:
كود:
<table>
<tr>
<td>خلية 1</td>
<td>خلية 2</td>
<td>خلية 3</td>
</tr>
<tr>
<td>خلية 1</td>
<td colspan="2">خلية 2 و 3 معا!</td>
</tr>
<tr>
<td>خلية 1</td>
<td>خلية 2</td>
<td>خلية 3</td>
</tr>
<tr>
<td colspan="3">خلية 1 و 2 و 3 معا!</td>
</tr>
</table>
ولنلقى نظرة صغيرة على اختلاف قيمة الخاصية colspan فى الصف الثانى والرابع.
فى الصف الثانى حددنا قيمة الخاصية colspan هى 2
لأننا نريد ان نجعل الخلية, تتساوى مع خليتين ببقية الصفوف.
ولذلك ظهرت هذه الخلية بحجم خليتين (بالمقارنة مع خلاية الصف الأول والثالث).
وفى الصف الرابع حددنا قيمتها 3 لأننا نريد جعل الخلية تساوى 3 خلاية.
اتمنى تكون الصورة اصبحت واضحة الأن.
اذن ماذا عن دمج الخلاية بالنسبة للحقول؟
بمعنى اخر, ماذا اذا اردنا ان نجعل احد الحقول يحتوى على خليتين فقط, فى حين ان كل حقل اخر يحتوى على 3 خلاية؟
بنفس الطريقة التى تم شرحها فى المثال الأخير لكن بإستخدام الخاصية rowspan
كالمثال التالى مثلا
كود:
كود:
<table border="1">
<tr>
<td rowspan="2">خلية 1</td>
<td>خلية 2</td>
<td rowspan="4">خلية 3</td>
</tr>
<tr>
<td>خلية 2</td>
</tr>
<tr>
<td>خلية 1</td>
<td>خلية 2</td>
</tr>
<tr>
<td>خلية 1</td>
<td>خلية 2</td>
</tr>
</table>
يمكنك ايضا تقسيم الجدول الى منطقة رأس Table Header
ومنطقة النهاية (زيل الجدول) Table Footer
ومنطقة جسد الجدول Table Body
كالتالى كامثال (اقرأ التعليقات داخل الكود)
كود:
كود:
<table> <!-- كلمة thead اختصار لكلمة table header وهى منطقة الرأس --> <thead> <tr> <td>رأس الجدول 1</td> <td>رأس الجدول 2</td> <td>رأس الجدول 3</td> </tr> </thead> <!-- كلمة tfoot اختصار table footer وهى منطقة زيل الجدول --> <tfoot> <tr> <td>زيل الجدول 1</td> <td>زيل الجدول 2</td> <td>زيل الجدول 3</td> </tr> </tfoot> <!-- كلمة tbody اختصار لكلمة table body وهى منطقة محتوى الجدول --> <tbody> <tr> <td>محتوى الجدول 1</td> <td>محتوى الجدول 2</td> <td>محتوى الجدول 3</td> </tr> </tbody> </table>
واراكم بالدرس المقبل على خير بإذن الله.
من الدعم العربي التطويري
•الدرس السابق القوائم Lists in html[/frame]
تعليق