HTML ( الدرس السادس ) : HTML Tables

[ريفــــــــــــــــان]

. . .








الجداول HTML Tables


http://www.w3schools.com/html/html_tables.asp


شادل - برود - قرّة عين أبوها - memories

زهرة البيلسان - كلي وناسة - ريفان - فرجيني

أعتذر ممن نسيت ذكرهم . . فالله لا ينساهم


. . .




يعرف الجدول في لغةHTML

بالوسم <table>

ومن المتعارف عليه أن الجدول ينقسم إلى صفوف وتعرف بالوسم<tr>

وكل صف يحتوي على وحدات بها معلومات وذلك بتقسيم الصف الى اعمدة

ويعرف العامود لكل وحده بالوسم <td>

إذن كل جدول يحتوي على صفوف واعمدة لتتكون الوحدات .

فعند بناء اي جدول لابد من وجود الوسم <table>

ثم بداخل هذا الوسم نبدأ بتقسم الجدول وسنبدا بأبسط جدول والذي يتكون من وحدة واحدة

أي صف واحد وعمود واحد

<table border="1">
<tr>
  <td>100</td>
</tr>
</table>

تشاهدون أن بداخل وسم الصف يتم وضع وسم العامود حتى تتكون الوحدة



. . .


وسوم الجداول



<table> يعرّف جدول

<th> يعرّف عنوان جدول رأسي

<tr> يعرّف صفّ في جدول

<td> يعرّف خلية في جدول

<caption> يعرّف تعليق جدول

<colgroup> يعرّف مجموعات أعمدة الجدول

<col> يعرّف قيم الخاصيّة لواحد أو أعمدة أكثر في الجدول

<thead> يعرّف رأس الجدول

<tbody> يعرّف جسم الجدول

<tfoot> يعرّف هامش الجدول





نتعرف على الوسوم السابقة بالترتيب

ملاحظة بعض الخصائص . .

غير مهمة . .

إن لم تفهموها . . فركزوا على الضرورية منها . . فقط

. . .





الوسم

<table> يعرّف جدول

صفحته

http://www.w3schools.com/tags/tag_table.asp


له الخواص الإختيارية التالية


align

لضبط المحاذاة


تأخذ القيم

left
center
right


_______________


bgcolor

لون الخلفية

يأخذ أحد القيم

rgb(x,x,x)
#xxxxxx
colorname

الـ x عبارة عن أرقام اللون . . أو كود اللون

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





__________


border


وتأخذ القيم بالبكسل

ملاحظة : إذا أردنا الجدول بدون حد ..

نضع قيمة الـ border تساوي 0



___________


cellpadding

لتحدد المسافة بين جدار الخلية ومحتواها


تأخذ القيم

إما أرقما بالبكسل

أو نسبة مئوية




__________


cellspacing

تحدد المسافة بين خلية و خلية أخرى

تأخذ القيم

إما أرقما بالبكسل

أو نسبة مئوية




___________


frame


تحدد أي أوجه من أوجه الحدود سيكون ظاهراً

ليمكن تحديد أي الحدود نريده يظهر . .


تأخذ القيم

Void لإطار مخفي
above إطارفوق
below إطار تحت
hsides حدود أفقية
lhs حدود أفقية على اليسار
rhs حدود أفقية على اليمين
vsides حدود عمودية
box مربع
border حد



مثال:

<table frame="border">

___________


rules


لنحدد أي الإطارات سنطبق عليها . .

مثلاً لقيمة all تعني أننا سنطبق على جميع الحدود

cols إذا اردنا الأعمدة فقط

none أي لم يتم تحديد أي إطار


تأخذ القيم


none
groups
rows
cols
all



مثال:

<table  rules="cols">

__________


summary

عبارة عن خلاصة ما يحتويه الجدول

كنص مكتوب لا يظهر في المتصفح





تأخذ القيمة


text

أي نص نكتبه



____________




width



تحدد عرض الجدول


تأخذ القيمة

إما نسبة مئوية

أو بالـ pixels





__________




الوسم <th>

<th> يعرّف عنوان جدول رأسي


صفحته

http://www.w3schools.com/tags/tag_th.asp




\\خاص بالعناوين في الجداول //

نستطيع إضافة عناوين للجدول ..
وذلك من خلال الوسم <th>

و يكتب هكذا

كود PHP:

<th>Heading</th> 


مثال عليه الكود التالي :

كود PHP:

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table> 


أضفنا العناوين إلى الاعمدة ..

فالعنوان Heading صار للعمود الاول ..

و العنوان Another Heading صار للعمود الثاني ..

::


\\ الخلايا الفارغة في الجداول //

قد تكون هناك خلايا فارغة في الجداول ..

فلو فرضنا أن الجدول يحتوي على خليتين في الصف الأول ..

و خليه واحدة في الصف الثاني ..

فسيكون الكود التالي :

كود PHP:

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table> 


عندها ستظهر الخلية الفارغة بدون إطار حولها ..

و لتلافي ذلك

نكتب هذا الكود :

كود PHP:

<td>&nbsp;</td> 


أي أننا أضفنا خلية و لكنها فارغة باستخدام الرموز ..






____________



يأخذ الوسم <th>

الخواص الاختيارية التالية




align

تم إيضاحها سابقاً

________


axis


تعرّف إحداثيات فريدة تكشف موقع الخلية في الجدول المحيط ..

و يمكن استعمال هذه الخاصية تلقائيًا لإدخال المحتويات إالى قاعدة بيانات

أي أنها تأخذ مكان معروف خاص بها أو إحداثيات في الجدول ..

حتى يمكن معرفتها

مثلاُ . . الخلية تقع في الصف الأول في العمود الثالث

إذن لا توجد خلية تأخذ نفس الموقع .. كل خلية لها إحداثيات تختلف عن الأخرى




___________



abbr


اختصار . . لخلية العنوان



__________




bgcolor

تم إيضاحها





___________



char

تعيّن حرفًا لمحاذاة الجدول عليه ..

و في هذه الحالة تكون بحاجة أيضاً

ا إلى

align="char"

.. و هو وسيط جديد


_________



charoff

هو إزاحة تطبق على حرف المحاذاة

__________



colspan


يقوم بدمج الخلية الحالية مع العدد المطلوب من الخلايا التي تليها أفقياً

‎<TD COLSPAN="n">‎

حيث n هو عدد الخلايا التي سيتم دمجها





__________

headers

قائمة بمعرفات الخلايا

أي احداثياتها كل خلية لها إحداثي نختلف عن الآخر


____________



height



لتحديد ارتفاع خلايا الجدول

و تكتب قيمتها بالبكسل ..

__________


nowrap

تستخدم لمنع إلتفاف النص في الخلية أو تمكينه

نستخدم خاصية أخرةى بدلاً منها . .

إذن ليست مهمة




__________



rowspan

يقوم بدمج الخلية الحالية مع العدد المطلوب من الخلايا التي تليها عمودياً (أي أسفلها).

‎<TD ROWSPAN="n">‎

وبالطبع n هو عدد الخلايا التي سيتم دمجها


___________



scope

مدى خلايا الرأس

و تأخذ القيم

col
colgroup
row
rowgroup



_________



valign


المحاذة العمودية


تأخذ القيم

top

middle

bottom

baseline

يحدد المحاذة العمودية للنص


_________



width

لتحديد عر ض الخلايا . .






____________






وسم

<tr>

يعرّف صفّ في جدول

أي يمكننا تحديد الصفوف التي يتكون منها الجدول

صفحته

http://www.w3schools.com/tags/tag_tr.asp



مثال

<table border = "1">
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>

يأخذ الخواص

align

bgcolor

char

charoff

valign

تم شرحها سابقاً

ويمكن الإطلاع عليها في صفحة الوسم

تجربة على المحرر


http://www.w3schools.com/tags/tryit....=tryhtml_table




_______________







الوسم

<td>

يعرّف خلية في جدول

بمعنى آخر يقسم الصف الواحد إلى أعمدة

صفحته

http://www.w3schools.com/tags/tag_td.asp

<table border = "1">
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>

الخواص الاختيارية


headers

عنوان للخلية


أما بقية الخصائص

تجدونها في صفحته وتم توضيحها في وسم سابق

http://www.w3schools.com/tags/tag_td.asp






_____________



الوسم

HTML <caption> tag


صفحته

http://www.w3schools.com/tags/tag_caption.asp


--- وسم عنوان الجدول ---
1-يعرف عنوان للجدول
2-يجب أن يكون بعد وسم <table> مباشرةً
3-يمكن تعيين عنوان واحد فقط لكل جدول
مثال :

<table border="1">
<caption>This is a caption</caption>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>

الخواص الإختيارية
Optional Attributes
(1) align
قيمها \
left
right
top
bottom

لكنها ...مستنكرة...لاتستخدم >>>يستخدم بدلا منها styles

والمقصود بهذا . . أنه يستخدم لغة الـ CSS لهذا الغرض بدلاً . . منه




___________





وسم <colgroup>

صفحته

http://www.w3schools.com/tags/tag_colgroup.asp

إذا كان لدي جدول فية عمودين الأول للأسماء و الثاني للارقام
كيف أخصص لكل عمود لون أو حجم معين ؟؟؟

هنا نحتاج للوسم

HTML <colgroup> tag

هذا الوسم يعرف مجموعة من الخواص على الأعمدة
وهو لا يحتوى على بيانات بل مجرد تحديد للخواص

مثال

<table border="1">
<colgroup span="3" style="color:#FF0000;">
</colgroup>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>

ملاحظة : الخاصيـة style هي لغـة الـ CSS

ليست معنا الآن . .

ولكن وضعت لتوضيــح فقط


نجد الوسم يقسم الجدول إلى مجموعتين لهما خواص مختلفة.

المجموعة الأولى تحوي \ العمود 1و2و3 --- ولون الخط فيها هو الأحمر
المجموعة الثانية تحوي \ العمود4 -- لون الخط فيها هو الإفتراضي

يعتمد الوسم على الخواص الأختيارية له.

أغبها سبق توضيحه

يرجى زيارة صفحته لفهمها أكثر

http://www.w3schools.com/tags/tag_colgroup.asp




الخواص الإختيارية --- Optional Attributes
(1)align
قيمها \
-right- left - center- justify- char
وضيفته \ تحديد المحاذة الافقية لمحتويات الأعمدة المحددة في الوسم

(2)char
قيمته \ character...حرف
-يستخدم معalign="char"


(4)charoff
يقاس بـ\
- البكسل (pixels) أو -النسبة المئوية ( %)


(5)span >>>>أهم خاصية لابد أن تكون موجودة مع الوسم
قيمها \
- رقم 3,2,1,......
فائدته \ يعرف عدد من الأعمدة التي أريد أن أضع لها خواص محددة

(6)valign
(vertical alignment ) المحاذة العمودية
قيمها \
-top- middle- bottom- baseline
يحدد المحاذة العمودية للنص

(7)width
قيمها \
-بالبكسل(pixles) -النسبة المئوية( % ) -relative_length
فائدته \
يحدد عرض الأعمدة التي حددت دخل الوسم
هذه الخاصية يمكن تجاوزها لو استخدمنا الوسم <col> وحددنا له width
سنعرف ذلك لاحقا.
مثال أخر

<table border="1">
<colgroup span="1" width="120"></colgroup>
<colgroup span="2" style="color:#FF0000;"></colgroup>
<tr>
<td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
</tr>
  <td>5</td>
  <td>6</td>
  <td>7</td>
  <td>8</td>
</tr>
</table>

_______________


الوسم

HTML <col> tag


صفحته

http://www.w3schools.com/tags/tag_col.asp

-يحدد مجموعة من الخواص لعمود أو أكثر
-لا يستخدم إلا داخل الوسم <table> أو الوسم <colgroup>

---------------------------------------------
الفائدة منه \
إذا كنا نريد تخصيص عدد من الإعمدة بخواص مشتركة بينها وخواص أخرى خاصة بكل عمود


مثال

<table border="1">
<colgroup span="3" align="center">
<col width="30"></col>
<col width="80"></col>
<col width="100"></col>
</colgroup>
<tr>
<td>name</td>
<td>number</td>
<td>addrss</td>
</tr>
</table>

نجد إن كل الأعمدة تشترك في خاصية align ولكل منها widthمختلف

الخواص الإختيارية ... Optional Attributes

لها نفس الخواص الموجود في وسم <colgroup>

*ملاحظة \
الخواص التي نحددها داخل وسم <colgroup> لا تأخذ لو أعدنا تحديدها داخل الوسم <col>
بل نتجاوزها ونأحذ التي في الوسم <col>

مثال

<table border="1">
<colgroup span="3" width="50" >
<col width="100"></col>
</colgroup>
<tr>
<td>name</td>
<td>number</td>
<td>addrss</td>
</tr>
</table>

وبقية خواصه الاختيارية سبق توضيحها

ويمكن الإطلاع عليها في صفحته

http://www.w3schools.com/tags/tag_col.asp






_____________


الوسوم التالية . .

<thead> يعرّف رأس الجدول

<tbody> يعرّف جسم الجدول

<tfoot> يعرّف هامش الجدول


لا تحمل جديداً

وخصائصها تم شرحها . .

قد نقول فيها:

*أنها تحتاج للوسمـ <tr> كبطاقة دخول ولا تظهر إلا بها ..

*انها عناصر تستعمل نادراً لان دعم المتصفح لها سئ جداً..!!

[ قد تدعمها بعض المتصفحات المتطوره ]



هنا كل وسم منها وصفحته


<thead>

http://www.w3schools.com/tags/tag_thead.asp


<tbody>

http://www.w3schools.com/tags/tag_tbody.asp


<tfoot>


http://www.w3schools.com/tags/tag_tfoot.asp


توضيح لها . . لمن أرادها . .

<thead>,<tbody> and <tfoot>


كلها تعمل كعنوان جامع للخلايا ، وبتعبيرآخر .. كأنها تضم الخلايا في مجموعة واحدة ..


نحن نعلم أن الجداول تكون نصوص ، أو صور ، أو أي شيء آخر ..

أحياناً نحتاج إلى جمع كل جدول في عنوان واحد ، كالجدول الدراسي <<< بما إننا مقبلين على دراسة ..


تكون خانته الأولى الأفقية مكتوب عليها :

جدول الفصل الأول من العام الدراسي 1428هـ 1429 هـ ..

ثم يكتب بعده خانات : سبت ، أحد ، إثنين ... وهكذا ..



الخانة المكتوب بها الفصل الدراسي نستخدم فيها إحدى الخواص الثلاث .. <thead>,<tbody> and <tfoot>


لا أعرف الفرق بينهم ، لكن بالتجربة النتيجة واحدة ..




هنا جدول صوري .. عملته كتجربة لهذه الخواص ...


لاحظو : sony h5

و

sony R1 ..








بالتوفيق

<html>

<head>
  <title> al3noud_photography </title>
</head>

<body>
 <table border="1">
   <thead  align="center" dir="rtl">
   <tr>
   <td>  by sony H5 </td>
   </tr>
       </thead>

           <td> <img src="http://www.ibnalislam.com/up/uploads/a526e95c74.jpg">
           </a>
            </td>
       <td> <img src="http://www.ibnalislam.com/up/uploads/94126c1d1c.jpg">
               </td>
       <td> <img src="http://www.friendsoflight.com/pp/data/502/-_750.jpg">
              <td>
       </tr>

       <tr>
       <tbody align="center">
           <td> by sony R1
              </td>
            </tbody>

       <td> <img src="http://www.ibnalislam.com/up/uploads/ab72bd63ae.jpg"> </td>
           <td> <img src="http://www.qatar-photo.com/gallery/data/500/046b966244.jpg">
           </td>
           <td> <img src="http://www.ibnalislam.com/up/uploads/f4f1c7d61a.jpg">
           </td>
          </tr>
 </table>



</body>

</html>

</html>






._____________





في النهاية نلخص درس الجدول كالتالي . .



ملخص درس الجداول :



*العناصر الأساسية للجدول تتلخص في كل من table للجدول و tr للسطور و td أو th للخلايا



* حدود الجدول يتم تعيينها بخاصية border والأمر ذاته منطبق على الحدود الداخلية للخلايا والسطور



* يفضل الاستعاضة بعنصر th لأول سطر وهو عنوان الجدول بدلاً من td



* يفضل إضافة فراغ html في الخلية الفارغة لكي تظهر حدودها ، فراغ الـ html يكتب كما يلي :

 

* وصف أعلى الجدول تتم إضافته عبر عنصر caption

وخاصيتا colspan و rowspan تستخدمان لتمديد الخلية لأكثر من عمود أو أكثر من سطر .




* بالإمكان إضافة أي عنصر html داخل خلايا الجدول

كإضافة جدول داخل خلية من خلايا الجدول

شيء جميل أنه بإمكانك إضافة صورةإلى أحد الخلايا ..

أو استعمال أحد وسوم النماذج داخل الجدول ..

أي أنه بإمكانكم داخل الخلية الواحدة . .

استخدام الأكواد لإضافة ماتريدون

داخل الخلية إما صورة أو نص أو جدول جديد . . . . وما إلى ذلك . .





* يمكن تحديد المسافة الداخلية بين خلايا الجدول ومحتواها بخاصية celpadding

وكذلك تحديد المسافة الخارجية بين خلايا الجدول أنفسها بخاصية celspacing




* خاصية bgcolor لتحديد لون خلفية الجدول وخاصية background لتحديد صورة لخلفية الجدول

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

أو خلية معينة منه .





* خاصية align لخلايا الجدول تحدد محاذاة محتوى الخلية أفقياً .




* خاصية valign لسطور الجدول تحدد المحاذاة العمودية للسطر .





* خاصية frame للجدول تحدد مكان ظهور حد أو حدود الجدول





أمثلة . . لتعزيز الفهم . .





مثــال عــام لجداول ..

http://www.w3schools.com/html/tryit....tryhtml_tables



مثـال لتوضيـح الخاصيـة border مع الوسم table /

http://www.w3schools.com/html/tryit...._table_borders




مثــال لكيفيـة عدم وضع اطار لجدول /

http://www.w3schools.com/html/tryit....ryhtml_tables3



مثـال لتوضيـح كيفيـة وضع الوسـم <th> في الصف أو في العامود /

http://www.w3schools.com/html/tryit...._table_headers



مثـال للخلايـا الفارغه في الجدول وكيفيـة ظهورهــا /

http://www.w3schools.com/html/tryit....tml_table_nbsp




مثــال لتوضيح كيفية استخدام وسم <caption> /

http://www.w3schools.com/html/tryit....ryhtml_tables2




مثـال لكيفية دمج الخلايا في الجدول /

http://www.w3schools.com/html/tryit....tml_table_span



مثــال لتوضيج كيفيـة استخدام أي وسم من الوسوم التي تعلمناها في الدروس السابقـة
او التي سوغ نتعلمها باذن الله في الدروس القادمـة داخل الخليـة في الجدول ..
وكذلك كيفـيـة عمل جدول داخل جدول /


http://www.w3schools.com/html/tryit....table_elements





مثـال لتوضيح الخاصيـة cellpadding في الوسم table /

http://www.w3schools.com/html/tryit....le_cellpadding




مثـال لتوضيح الخاصيـة cellspacing في الوسم table /

http://www.w3schools.com/html/tryit....le_cellspacing




مثال لكيفيـة وضع خلقيـة لجدوال كامل سواء كانت صورة أو لون /

http://www.w3schools.com/html/tryit....ble_background




مثال لكيفية وضع خلفيـة لخلية واحده في الجدول سواء كانت صورة أو لون /

http://www.w3schools.com/html/tryit....cellbackground




مثال لتوضيـح كيفيـة عمل محاذاة لكل خليه في الجدول على حدا /

http://www.w3schools.com/html/tryit....ml_table_align





مثال لتوضيح جميع قيم الخاصيـة frame في الوسم table /

http://www.w3schools.com/html/tryit....ml_table_frame






مثال لتوضيح كيفيـة استخدام الخاصيتين frame و border سويا مع وسم الجدول /

http://www.w3schools.com/tags/tryit....l_table_frame2




وهذه هي نفس الامثلـة التي توجد داخل الصفحات الخاصة بالوسوم الفرعيـة لوسم الجدول









الواجب . .


1- إنشاء جدول

يتكون من صفين وعمودين

أحد الخلايا فارغة

2 - جدول يتكون من عمودين وثلاثة صفوف

الصف العلوي يكون عناوين أي يظهر النص فيها بلون غامق

. . .





















.

. . .[/COLOR]

[*..المستقبل..*]

.
.


بصراحة ماقريت الدرس بس أبحل الواجب الحين وبكرى أقراءه وأنا مصحصحة ..




شدتني هذه :

* يفضل الاستعاضة بعنصر th لأول سطر وهو عنوان الجدول بدلاً من td<< هذي مافهمتها من الموقع ابداً

مرة شفتها في تطبيق لالاكي -->مدري الإسم صح .. وإستغربتها :s
وحبيت أسأل بس خف أسبق الأحداث ..


لعله يوضح لنا أو إذا رجعت بكرى فهمت بإذن الله ..

<html>
<title>
الجدول
</title>
<body>
<p align=center>
<b><i><u><font color="brawn" ,size=26>
الواجـــب 1
</b></i></u></p>
<table border=4, align=center>
<tr><td>1<td>2</tr>
<tr><td>السبت<td> &nbsp;</tr>

</table>

لي عودة غداً إن كتب ربي لي عمراً : )

.
.

[ريفــــــــــــــــان]

. . .

ذكرتني . . لحذفها . .

. . .

[* برود *]

جميل ..

تطبيقي ..

<html>

<head>
  <title>  الجدول</title>
</head>

<body>
 <table border="1" align="right" dir="rtl" width="50%">
   
<tr>
<td> العنوان الاول </td>
<td>العنوان الثاني </td>
</tr>
<tr>
<td> 123</td>
<td> &nbsp;  </td>
</tr>
</table>
</body>

</html>

<html>

<head>
  <title>  الجدول</title>
</head>

<body>
 <table border="1" dir="rtl">
 <colgroup span="1" width="50" align="right"></colgroup>  
<tr>
<th> العنوان الاول </th>
<th>العنوان الثاني </th>
</tr>
<tr>
<td> 123</td>
<td> 456  </td>
</tr>
<tr>
<td> 789</td>
<td> 10 11 12</td>

</tr>
</table>
</body>

[محمد جبلي]

ماشاء الله تبارك الله

شرح جدا رائـــع

بارك الله فيــكــم

.......................

الدرس مهم جداً
ركزوا عليــــه

......................

بإذن الله سوف أقوم بالتطبيــق

ومحاولـة الرد على التسائلات ان استطعت

بالتوفيــــــــق للجميــع

[الأمل الطائر]

السلام عليكم ...

معذرة يا أخوة فربما لن أتمكن من وضع تطبيقي حالياً ,,

لأني مسافرة إن شاء الله ..

إن شاء الله عند رجوعي راح أطبق الدروس الفائتة ,,

شكراً لكم

دعواتكم : )

[aroma]

ما شاء الله ..شرح رائع

تمت قراءة الدرس

و جاري التطبيق


,, بوركتم ,,

[محمد جبلي]

تطبيق عـ الماشي

راح اطوره باذن الله

<html>

<head>
<title>الجدول الدراسي</title>
</head>

<body>

<table style="width: 100%" frame="border" border="1">
	<tr>
		<th>السابعة</th>
		<th>السادسة</th>
		<th>الخامسة</th>
		<th>الرابعة</th>
		<th>الثالثة</th>
		<th>الثانية</th>
		<th>الأولى</th>
		<th></th>
	</tr>
	<tr>
		<td align="center">أحياء</td>
		<td align="center">حاسب</td>
		<td align="center">أحياء</td>
		<td align="center">كيمياء</td>
		<td align="center">حاسب</td>
		<td align="center">فيزياء</td>
		<td align="center">رياضيات</td>
		<th>السبت</th>
	</tr>
	<tr>
		<td align="center">حاسب</td>
		<td align="center">أحياء</td>
		<td align="center">كيمياء</td>
		<td align="center">أحياء</td>
		<td align="center">فيزياء</td>
		<td align="center">رياضيات</td>
		<td align="center">فيزياء</td>
		<th>الأحد</th>
	</tr>
	<tr>
		<td align="center">رياضيات</td>
		<td align="center">كيمياء</td>
		<td align="center">حاسب</td>
		<td align="center">فيزياء</td>
		<td align="center">رياضيات</td>
		<td align="center">حاسب</td>
		<td align="center">كيمياء</td>
		<th>الإثنين</th>
	</tr>
	<tr>
		<td align="center">فيزياء</td>
		<td align="center">رياضيات</td>
		<td align="center">فيزياء</td>
		<td align="center">رياضيات</td>
		<td align="center">أحياء</td>
		<td align="center">كيمياء</td>
		<td align="center">أحياء</td>
		<th>الثلاثاء</th>
	</tr>
	<tr>
		<td align="center">كيمياء</td>
		<td align="center">فيزياء</td>
		<td align="center">رياضيات</td>
		<td align="center">حاسب</td>
		<td align="center">كيمياء</td>
		<td align="center">أحياء</td>
		<td align="center">حاسب</td>
		<th>الاربعاء</th>
	</tr>
</table>

</body>

</html>

[ريفــــــــــــــــان]

. . .

هذا تطبيقي للخواص لكن ليس حل الواجب . .

<html>

<head>
  <title>table</title>
</head>

<body  bgcolor="#A9AD7A">
     <table align="center"  border="1"  cellpadding="20"  rules="all"  width="30"  cellspacing="30"  background="http://danidraws.com/images/2006-12/texture10.jpg">
     <caption> هذا جدولي </caption>
     <colgroup span="1" style="color:#00CC00;"></colgroup>
     <colgroup span="1" style="color:#9933FF;"></colgroup>
     <tr>
     <th> الأرقام </th>
     <th> الحروف </th>
      </tr>
       <tr align="center">
       <td>1</td>
       <td>أ</td>
       </tr>
       <tr align="center">
       <td>2</td>
       <td> ب </td>
       </tr>
</body>

</html>

. . .

[فرجيني]

حل الواجب :

<html>

<head>
  <title>HTML TABLES</title>
</head>

<body>

<table  align="center" border="1" width="5%">

       <tr>
       <td>الخلية 1 </td>
       <td>الخلية 2 </td>
       </tr>

       <tr>
         <td> الخلية 3 </td>
         <td>&nbsp;</td>
       </tr>
</table>

<br>

<table align="center" border="0" cellspacing="2%" cellpadding="4%">
    <tr>
    <th> عنوان 1</th>
     <th> عنوان 2</th>
     <th> عنوان 3</th>
    </tr>

    <tr>
    <td>خلية 1</td>
    <td> خلية 2</td>
    <td> خلية 3</td>

    </tr>


</table>




</body>

</html>

[شادل]

تطبيقي على عجالة ..

<html>
<head>
<title>my table</title>
</head> 
<body bgcolor="pink" text="purple" dir="rtl">

<center>
<font face="tahoma" size="4" color="purple">

<marquee behavior="alternate" direction="up">
<center><caption><h1>
الجدول المقترح لتزيدي من سعادتك 
</h1></caption></center>
</marquee>


<table bgcolor="pink" align="center" cellspacing="5" border="1" >

<tr align="center" bgcolor="yellow" valign="center">
<th>اليوم</th>
<th>العمل الذي تقومين به</th>
<th>ملاحظات</th>
</tr>

<tr align="center" bgcolor="yellow" valign="center">
<td>السبت</td>
<td>اقتصاص وقت من اليوم لممارسة الهواية المفضلة لك</td>
<td><input type="checkbox" name="done"  value="1">أنجز</td>
</tr>

<tr align="center" bgcolor="yellow" valign="center">
<td>الأحد</td>
<td>إرسال أطباق إلى أحد الجارات</td>
<td><input type="checkbox" name="done"  value="2">أنجز</td>
</tr>

<tr align="center" bgcolor="yellow" valign="center">
<td>الأثنين</td>
<td>الاجتماع بخادمات الحي و عمل برنامج قصير و ممتع</td>
<td><input type="checkbox" name="done"  value="3">أنجز</td>
</tr>

<tr align="center" bgcolor="yellow" valign="center">
<td>الثلاثاء</td>
<td>قراءة كتاب مفيد في التربية الذاتية و التفاؤل</td>
<td><input type="checkbox" name="done"  value="4">أنجز</td>
</tr>

<tr align="center" bgcolor="yellow" valign="center">
<td>الأربعاء</td>
<td>الاتصال على الصديقات و الزميلات و السؤال عنهن</td>
<td><input type="checkbox" name="done"  value="5">أنجز</td>
</tr>

<tr align="center" bgcolor="yellow" valign="center">
<td>الخميس</td>
<td>زيارة الأهل و الأقارب</td>
<td><input type="checkbox" name="done"  value="6">أنجز</td>
</tr>

<tr align="center" bgcolor="yellow" valign="center">
<td>الجمعة</td>
<td>قراءة سورة الكهف و الدعاء في ساعة الإجابة</td>
<td><input type="checkbox" name="done"  value="7">أنجز</td>
</tr>

<tr align="center" bgcolor="yellow" valign="center">
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>


</table>
</center>


<br><br>
<h1><a href="keypage.html" target="home">
الرجوع إلى الصفحة الرئيسية
</a>
<br>


</font>
</body>
</html>

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

[twinkle]

حل عاجل للواجب ^_^

1- إنشاء جدول يتكون من صفين وعمودين أحد الخلايا فارغة

<html>
<body>
<table border="2">
 <tr>
<td>&nbsp;</td>
<td>منتدى المعالي</td>
</tr>
<tr>
<td>فريق التعلم الذاتي</td>
<td>TMHL Tables</td>
</tr>
</table>
</body>
</html>

2 - جدول يتكون من عمودين وثلاثة صفوف الصف العلوي يكون عناوين أي يظهر النص فيها بلون غامق

<html>
<body>
<table border="2">
<tr>
<th>الكلمة</th>
<th>معناها</th>
</tr> 

<tr>
<td>منتدى المعالي</td>
<td>فريق التعلم الذاتي</td>
</tr>

<tr>
<td>منتدى التميز</td>
<td>فريق متكامل مبدع</td>
</tr>

</table>
</body>
</html>

[ريفــــــــــــــــان]

. . .

رائع . . فرجيني . .

. . .

[ريفــــــــــــــــان]

. . .

شادل . . رائع . .

ركزت . . على ما أخذناه فقط ..

وكامل الجدول رائع ..

. . .

[ريفــــــــــــــــان]

. . .

twinkle

حل مرتب وسليم . .

. . .

[ريفــــــــــــــــان]

. . .


شادل . .

تطبيقك رائع . . لكن ليس حل للواجب ..

ضعي فيه خلية فارغة

. . .

[دفء كلمه]

هذا تطبيقي أتمنى أن لايكون فيه أخطاء كثيره

كود PHP:

<html>

<head>
<body bgcolor="6699999CC">
  <title>  الجدول</title>
</head>
<table border="1" align="right" dir="rtl" width="100%">
<body>
 

<tr>
<td> الجزء</td>
<td>الحزب</td>
</tr>
<tr>
<td> الأول</td>
<td> &nbsp;  </td>
</tr>
</body>

</html> 


ــــــــــــــ

كود PHP:

<html>

<head>
<body bgcolor="66999CC">
  <title>  الجدول</title>
</head>

<body>
 <table border="1" dir=" align">
 <colgroup span="1" width="100" align="right"></colgroup>  
<tr>
<th> الجزء الاول </th>
<th>الحزب الأول </th>
</tr>
<tr>
<td> .....</td>
<td> ....  </td>
</tr>

<td> ....</td>
<td> ....</td>

</tr>

</body> 


ــــــــــــــــــــــــــــــــــــــــ ــــــــــــ




لدي سؤال على الهامش لوسمحتو ...((كيف أضع الصفحة اللي سويتها في صفحه ماهي في المحرر لأني أرى البعض يقول
وهذا التطبيق في الصفحه ويضع رابط لصفحه ليست محرر كيف ذلك؟؟ ))

[ريفــــــــــــــــان]

. . .

دفء كلمة . .

تطبيقك . . رائع جداً

لكن . . الـ <body>

مكانه غير صحيح . . المفروض يحيط بالجدول .. ولا علاقة له بالـ head

افتحيه قبل table

وأغلقيه آخر شيء . .

أيضاً . . الـ table لم تغلقيه

وهذه الملاحظات . . على كل التطبيقين

. . .


أما الصفحة المستقلة بدون محرر . .

فهذه القفزة التي سنقفزها بإذن الله . . قريباً جداً

بحيث ترين موقعك . . على الانترنت ويكون له رابط . .

يمكن لأي أحد أن يدخله . .


. . .

[مـــقدام]

هذا الواجب الأول

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
  <title>تطبيق</title>
</head>

<body>
  <th align="center">جدول</th>


<table border="1" align="center" cellpadding="5%" cellspacing="4%">
<tr>
  <td>1</td>
  <td>1</td>

</tr>
<tr>
  <td>1</td>
<td>&nbsp;</td>


</table>
</body>

</html>

الواجب الثاني

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
  <title> الواجب الثاني</title>
</head>

<body>
<table border="1" align="center">
<tr>
  <td><b>ناتجه</b></td>
    <td><b>الرقم</b></td>

</tr>
<tr>
  <td>12</td>
  <td>6x6</td>
  </tr>
<tr>
  <td>21</td>
  <td>7x3</td>
</tr>
<tr>
  <td>14</td>
  <td>8x2</td>
  </tr>
</table>

</body>

</html>

[ريفــــــــــــــــان]

. . .

الواجب الاول . .

رائع . .

لكن لم يتم إقفال الوسم <tr>

أيضاُ الوسم <th>

يكون بعد table

وليس قبله

. . .