الجداول
تعتبر الجداول من أهم مكونات صفحات HTML، وجميع التصاميم الإحترافية تستفيد من الجداول لتصميم الصفحة وتوزيع الكائنات عليها وتشكيلها في القالب الذي يريدونه، يتم إدراج الجدول بالوسم table وداخل الجدول يجب إدراج صفوف tr وداخل الصفوف توجد البيانات td، يمكن وضع إطار للجدول بالخاصية border حيث نحدد فيه سماكة الإطار المطلوب 0 تعني دون إطار، القيمة الإفتراضية للإطار هي 0.
<table border="1">
<tr>
<td>First Row - First Data
<td>First Row - Secound Data
</tr>
<tr>
<td>Secound Raw - First Data
<td>Secound Raw - Secound Data
</tr>
</table>
يمكنك أيضا التحكم بالمسافة بين الخلايا بواسطة الخاصية cellspacing، والمسافة بين الحدود الداخلية للخلايا ومحتويات الخلايا بواسطة الخاصية cellpadding.
<table cellspacing="10" cellpadding="20" border="1">
<tr>
<td>First Cell</td>
<td>Secound Cell</td>
</tr>
</table>
يمكن التحكم بعرض الجدول بالخاصية width وارتفاعه بالخاصية height وكلاهما يأخذ قيما مطلقة أو نسب مؤية، ويمكن استخدام هذه الخصائص في الخلايا td أيضا وعند إعطاء الخلايا قيما نسبية فإنها تحسب بالنسبة للصف الذي هي فيه.
<table width="100%" height="100%" border="1">
<tr>
<td width="100" height="40%">First Cell
<td width="100%" height="40%">Secound Cell
</tr>
<tr>
<td width="100" height="60%">First Cell
<td width="100%" height="60%">Secound Cell
</tr>
</table>
يمكن التحكم بلون خلفية الجدول بالخاصية bgcolor ويمكن تعيين صورة في الخلفية بالخاصية background، يمكن استعمال هذه الخواص في الخلايا td أيضا، وعند تعيين قيمة bgcolor للجدول مختلفة عن قيمة أحد الخلايا فإن لون الخلية سيطغى على لون الجدول في تلك الخلية، لأن الخلية موجودة فوق الجدول في ترتيب الطبقات.
<table border="1" background="sample.gif" width="90%" height="80%">
<tr>
<td bgcolor="Yellow">First Cell
<td>Secound Cell
</tr>
</table>
يمكن التحكم بمحاذاة محتوى الخلية أفقيا بالخاصية align ورأسيا بالخاصية valign، في الخاصية align القيمة left تعني محاذاة لليسار و rigth لليمين و center بالمنتصف و justify للضبط الكلي تجعل الأسطر مساوية في الطول، أما الخاصية valign فتأخد القيمة top للأعلى، bottom للأسفل middle للمنتصف.
<table border="1" width="90%" height="80%">
<tr>
<td align="right" valign="bottom">First Cell
<td align="left" valign="top">Secound Cell
</tr>
</table>
يمكن أيضا وضع جدول داخل جدول، عن طريق وضع الجدول في أحد الخلايا td، وهنا يحسب عرض الجدول الداخلي النسبي بالنسبة لعرض الخلية التي تحتويه والموجودة في الجدول الخارجي.
<table width="95%" border="1">
<tr>
<td>First Table - First Cell
<td>
<table border="1">
<tr>
<td>Secound Table - First Cell
<td>Secound Table - Secound Cell
</tr>
</table>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td>Third Table - First Cell
<td>Third Table - Secound Cell
</tr>
</table>
<td>First Table - Fourth Cell
</tr>
</table>
يمكن أيض دمج الخلايا رأسيا بالخاصيةrawspan وأفقيا بالخاصية colspan، حيث تحدد في كل منهما عدد الخلايا التي يجب دمجها في الخلية الحالية، وتستخدم هذه الخصائص في الخلايا td.
<table border="1">
<tr>
<td rowspan="2" colspan="2">First Cell
<td>Secound Cell
<td>Third Cell
</tr>
<tr>
<td rowspan="3">Fourth Cell
<td colspan="2">Fifth Cell
</tr>
<tr>
<td>Sixth Cell
<td>Seventh Cell
<td>Eighth Cell
<td>Nineth Cell
</tr>
</table>
الثلاثاء نوفمبر 20, 2007 9:07 am