رائد ابو فيصل
07-03-2010, 11:23 AM
السلام عليكم ورحمة الله وبركاته
الجداول 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>
قبل الدخول فى امور اخرى هناك اشياء يجب توضيحها
وان شاء الله الصورة التالية توضحها.
http://dev.dd4bb.com/uploads/tables.gif
بعد ان تستوعب ماهو موضح بالصورة تابع التالى.
فى بعض الأحيان لا نريد نفس العدد من الخلاية لكل صف.
مثلا الصف الأول به ثلاث خلاية, ونريد الصف الثانى فقط ان يكون به خليتين.
كيف يتم ذلك؟
هذا يسمى دمج الخلاية او 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 (http://www.abc4web.net/vb/showthread.php?t=7276)
الجداول 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>
قبل الدخول فى امور اخرى هناك اشياء يجب توضيحها
وان شاء الله الصورة التالية توضحها.
http://dev.dd4bb.com/uploads/tables.gif
بعد ان تستوعب ماهو موضح بالصورة تابع التالى.
فى بعض الأحيان لا نريد نفس العدد من الخلاية لكل صف.
مثلا الصف الأول به ثلاث خلاية, ونريد الصف الثانى فقط ان يكون به خليتين.
كيف يتم ذلك؟
هذا يسمى دمج الخلاية او 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 (http://www.abc4web.net/vb/showthread.php?t=7276)