الجداول

البنية الأساسية للجداول هي :

< table >     وسم بداية الجدول

<tr ><th> … … </th>

<tr> <td> … … </td >

</ table > وسم نهاية الجدول

<tr>  وسم بداية صف في الجدول ولا يحتاج إلى وسم نهاية لان كل وسم منه ينشئ صف واحد .

<th>  وسم  عنوان للخلية ويحتاج لوسم نهاية , وهي لتنسيق الجدول وترتيبه ويمكن الاستغناء عن كتابتها .

<td>  وسم بداية خلية في الجدول ويحتاج لوسم نهاية لان كل وسم منه ينشئ عمود واحد .

يتألف الجدول من اسطر وأعمدة وتعرف العناصر الناتجة عن تقاطع الأسطر و الأعمدة بالخلايا أو الحقول

  سمات الجدول هي :

     مسافة الجدول(table span) :

 تقوم هذه السمة بعمل مسافة في الجدول بمقدار خلية وتنقسم إلى :

¨      مسافة الأعمدة(column span):

صيغته :

<td   colspan = “ # “  >

# : رقم يمثل عدد الأعمدة المزاحة

مثال :

 <td colspan="2" style="border-top:2px solid #000080; border-bottom:2px solid #000080; ">
<h1 align="center"><font color="#000080" face="Andalus">الإعلانات</font></h1></td>

¨     مسافة الصفوف(row span):

صيغته :

< td  rowspan = “  #  “ >

# : رقم يمثل عدد الصفوف المزاحة

مثال :

<td rowspan="6" align="center" style="border: 2px outset #CCFFFF" bgcolor="#99CCFF">
<b>أ. سلام</b><br><b>مدرس رياضيات </b><br><b>المرحلة : أول ثانوي / ثاني ثانوي ( علمي/ أدبي )</b></td>

حجم الجدول (table size ) :

¨      عرض الإطار(border width):

  صيغته:  < table   border = “ # “ >                    

مثال :

 <table border="2" width="100%" id="table13" bordercolor="#6699FF">

¨      المسافات بين الخلايا(space between cells):

صيغته: < table   cellspacing = “ # “ >                     

¨      المسافات في الخلايا(space in cells):

صيغته:  < table   cellpadding = “ # “ >                     

¨      حجم الجدول:

صيغته: < table   width = “ $ “   height = “ $ “ >                     

مثال :

 <table border="0" width="549" height="496" id="table2" cellspacing="3" cellpadding="3">

 <table border="2" width="100%" id="table13" bordercolor="#6699FF">

¨      حجم الخلية(cell size):

صيغته: < td   width = “ $ “   height = “ $ “ >                     

مثال :

<td width="68%"height="100%" rowspan="9"  dir="ltr" nowrap valign="middle"style="border-right: 2px solid #000080" >

# : number of pixel - رقم بالبكسل

$ :number of pixel or persent ( % )  -  رقم بالبكسل او بالنسبة المئوية

   تنسيق نص الجدول(table text alignment):

¨      تنسيق أفقي(horizontal alignment)

صيغته : 

<tr  align = “ # “ >

<td  align = “ # “ >

# : left , center , right

مثال :

 <td align="center" bordercolor="#99CCFF"><b>ثانية علمي</b></td>

¨  تنسيق عمودي ( vertical alignment)

صيغته :

<tr  valign = “ # “ >

<td  valign = “ # “ >

# : top , middle , bottom , baseline

¨      التفاف النص

صيغته :

<tr   nowarp >

<td  nowarp >

بهذه السمة فإن التفاف النص لا يقع

مثال :

  <td width="68%" rowspan="9" style="border-right: 2px solid #000080" dir="ltr" nowrap valign="middle" height="100%">