الجداول العائمة(floating table) :

¨      تنسيق الجدول

صيغته :

< table  align = “ # “ >

 < td align = “ # “ >

#: left , right

مثال :

<table border="1" bordercolor =#000099 background =image/image002.jpg align="center" width="714" id="table2" cellpadding="2" vspace = 20 hspace = 10>

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

¨      مسافات الجدول الأفقية و العمودية

صيغته :

< table vspace = “ # “  hspace = “ # “ >

# : number of pixel

مثال :

<table border="1" bordercolor =#000099 background =image/image002.jpg align="center" width="714" id="table2" cellpadding="2" vspace = 20 hspace = 10>

   عنوان الجدول (table caption):

¨      تنسيق العنوان  

صيغته :

<caption    align = “ # “ > …text … </caption >

#: left , right , center , top , bottom

¨      التنسيق العمودي للعنوان

صيغته :

<caption    valign = “ # “ > …text … </caption >

#:top , bottom

    لون الجدول (table color) :

¨       بخلفية ملونه

صيغته :

<table  bgcolor = “ # “ >

<td  bgcolor = “ # “ >

# : hex number or color name

 مثال :

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

¨      بخلفية صورة 

صيغته :

<table  background = “ # “ >

<td  background = “ # “ >

# : URL of image file or name

مثال :

 <table border="1" bordercolor =#000099 background =image/image002.jpg align="center" width="714" id="table2" cellpadding="2" vspace = 20 hspace = 10>

¨      لون إطار الجدول 

صيغته :

<table border color = “ # “ >

# : hex number or color name

¨      الإطار ذو اللونين  

صيغته :

< table bordercolorlight  = “ # “ >

< table border colordark = “ # “ >

< td bordercolorlight  = “ # “ >

< td bordercolordark = “ # “ >

# : hex number or color name

مثال :

<td align="center" bordercolorlight="#000080" bordercolordark="#CCFFFF" bgcolor="#99CCFF">

<b>الخميس</b></td>

 مجموعة الصفوف (groups of rows)  :

عمل مجموعات من صفوف الجدول يسهل التحكم بتنسيقها

صيغته :

<thead > … < / thead >            table head

<tbody > …  < / tbody >           table body

<tfoot > …  < / tfoot >              table footer

 و للوسوم الثلاثة سمتين هما :

• align   سمة التنسيق الأفقي ولها القيم التالية :  ( left , center , right )

• valign  سمة التنسيق العمودي ولها القيم التالية : ( top , middle , bottom , baseline)  

 مجموعة الأعمدة (groups of columns) :

عمل مجموعات من أعمدة الجدول يسهل التحكم بتنسيقها ومحتواها وصيغته هي :

< colgroup > …… < / colgroup>

وله عدة سمات هي :

•           span(المسافة) : و قيمتها هو عدد الأعمدة الداخلة ضمن المجموعة .

•           align(التنسيق الأفقي ) :  ولها 3 قيم هي : ( left , center , right )

•          valign(التنسيق العمودي ) : ولها القيم التالية : ( top , middle , bottom , baseline)

•           width(عرض العمود ) : قيمتها عدد بالبكسل يمثل عرض العمود الواحد  .

ويمكن إنشاء المجموعة الفرعية من مجموعة الأعمدة  بكتابة هذا الوسم داخل وسمي مجموعة الأعمدة :

< col   span = “ “  align = “  “  valign = “  “   width = “ “  >

ومن الصيغة نلاحظ أن لها نفس سمات وسم مجموعة الأعمدة .

 عرض إطار الجدول (frame display):

هناك عدة طرق لعرض إطار الجدول ويتم التحكم بها بالوسم frame  وصيغته هي :

< table   frame = “ # “ >

# : Box   ( يظهر الجهات الأربعة من الإطار )

     Above ( يظهر الجهة العلوية من الإطار)

     Below  ( يظهر الجهة السفلى من الإطار)

     Hsides  ( يظهر الجهة العليا و السفلى من الإطار)

     Vsides  ( يظهر الجهة اليمنى و اليسرى من الإطار)

     LHS  ( يظهر الجهة اليسرى من الإطار)

     RHS  ( يظهر الجهة اليمنى من الإطار)

     Void  ( يظهر الجدول من غير الإطار)

    قوانين العرض (rules display):

يتم التحكم بالقوانين المحتواة بين وسمي الجدول كلها أو بعضها بالسمة  rules  وصيغته هي :

< table   rules = “ # “ >

# : all ( تطبيق كل القواعد والقوانين داخل الجدول     )

      Groups  ( تطبيق القوانين بين المجوعات     )

      Rows     ( تطبيق القوانين بين كل الصفوف) 

      Cols   ( تطبيق القوانين بين كل الأعمدة     )

      None  (عدم تطبيق أي قاعدة أو قانون موجود داخل الجدول    )

مثال :

<table border="1" width="100%" height="30%" id="table2" frame =box rules =all bordercolor=#000066>
<caption align =center valign =top ><h1 align="center" > الامتحانات</h1></caption>
<colgroup align=justify span =1 bgcolor =#99CCFF></colgroup>
<colgroup align =center span =2></colgroup>
<thead align =center bgcolor =#3399FF ><tr>
<td><b>المرحلة</b></td>
<td><b>التاريخ</b></td>
<td><b>المادة</b></td>
</tr></thead>
<tbody align =right ><tr>
<td><b>اول ثانوي</b></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><b>ثاني ثانوي - علمي</b></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><b>ثاني ثانوي - ادبي</b></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><b>ثالث ثانوي - علمي</b></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><b>ثالث ثانوي - ادبي</b></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr></tbody>
</table>