المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : وسم ال table ...

مــحــمــد
05-10-2008, 06:35 AM
بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته


table


1-استعمالها :
رأيت أن هذا الوسم يستحق موضوع لما فيه من خصائص ولأننا بحاجة له كثيراً الآن
و في المستقبل....
فإذا فتحتم مصدر صفحة المنتدى رأيتموها مليئة بتعليمة الجدول ....
وأي موقع ويب يحتاج بشكل أساسي عند تصميمه هذه التعليمة التي لا غنى عنها ....


2-الخصائص:
أ- خاصية المحاذاة :
align والتي يمكن أن تكون قيمتها (left -center- right)
وتعمل على إزاحة الجدول إما يميناً أو يساراً أو تضعه في منتصف الصفحة ...

ب-خاصية لون صفحة الكتابة bgcolor :
وقيمتها يمكن أن تكون أي لون ......
وهذا اللون سوف يظهر داخل الجدول أي مكان الكتابة ....
وطبعاً إفتراضياً يكون أبيض ...

ج-خاصية border:
الذي يعطي عرض إطار الجدول .....
يكون إفتراضياً 0 .....
وعندما نضع قيمته تساوي رقم فإننا نقول نريد إطار عرضه عدد بكسلات بهذا الرقم ...
وهنا نلاحظ لا يحتاج (%) فنضع الرقم الذي نريده فقط .....

د-خاصيةcellpadding :
وهي التي تحدد المسافة الفاصلة بين الكتابة في الخلية وحدود الخلية...
وتأخذ القيمة بالpixels ...

ه-خاصية cellspacing :
تحدد المسافة الفاصلة بين الخلايا بعضها البعض وبين الخلايا وإطار الجدول ....
وتأخذ القيمة بالpixels ...

و-خاصية frame :
هذه الخاصية رغم أهميتها الكبيرة لم نأخذها في المعهد ..
وبإذن الله سأتطرق لشرحها فيما بعد.... وحبذا لو يشرحها لنا الاستاذ خالد ....

ز-خاصية rules :
أيضاً هامة وأتركها للأستاذ ....

ح-summary : للأستاذ :) ...

ط-width :
تعين عرض الجدول .....
تعطى القيمة إما بالpixels فيكون عرض الجدول بعدد البكسلات التي وضعتها ...
أو بالpixels % فيكون عرض الجدول كذا% من عرض الصفحة الكلي ...

ي-bordercolor :
لتعيين لون إطار الجدول ...

طبعاً كل ما ذكر يوضع ضمن قوسي وسم ال table فهي خصائص له ...
وإليكم هذا المثال والذي يتألف من سطرين(row) وثلاث أعمدة (column) ....
ولكي تفهموا كل خاصية جيداً فعليكم بتغير القيم وملاحظة النتائج (فالحاسب أصدق إنباءً :) )
وبعده بإذن الله نتعلم كيف نرسم الجدول ...

<html>
<head>
<title>الجداول</title>
</head>
<body>
<table width="50%" align="center" border="10" bordercolor="#CC00CC" bgcolor="#66CCFF" cellpadding="10" cellspacing="10" rules="cols" summary=" txet like :welcome to 100hla">
<tr>
<td>tiger1</td>
<td>tiger2</td>
<td>tiger3</td>
</tr>
<tr>
<td>tiger1</td>
<td>tiger2</td>
<td>tiger3</td>
</tr>
</table>
</body>
</html>

وأترككم هنا ريثما أحضر كل خصائص الرسم بعون الله ..
وفي الختام أرجو من الاستاذ خالد أن يتكرم علي و يكمل ما قصرت (وأهم شيء استعمالاتها والملاحظات)....
فأنا ما زلت مبتدأ جداً في هذا المجال ...

ملاحظة :
يرجى نقل الموضوع إلى منتدى الدورة ولم أقدر أن أفعل ذلك حالياً ...

والسلام عليكم ....
مــحــمــد
05-10-2008, 07:20 AM
السلام عليكم ....

نكمل بعون الله ....

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

لرسم الجدول نستعين بالسوم التالية:
أ-tr الذي يعني أننا سنبدأ سطر جديد في الجدول ...
ب-td أي عمود جديد في السطر السابق ....
ج- th "هي جديدة " :).. وتعني إضافة عنوان حقل جديد للجدول ...
وطبعاً الحقل يمكن أن يكون عمودي أو أفقي ...
فمثال الحقول العمودية :
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>

طبعاً علينا قبل تجربة الكود أن نعرف كيف نقرأه لكي نعرف كيف نكتب فيخرج الجدول كما تخيلنا تماماً....
فمثلاً سأقرأ الكود السابق هكذا :
أنشأنا سطر ووضعنا في داخله خلية للعنوان وأنتقلنا إلى العمود الثاني من هذا السطر ووضعنا بيانات العنوان...
ثم أنشأنا سطر آخر يحوي نفس السطر السابق ...وفي السطر الثالث فعلنا نفس الشيء ...
طبعاً لا تنسوا تعليمة ال table وخاصية ال border على الأقل ="1" ليتضح الجدول ...

والآن مثال للحقول الأفقية ...
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>TIGER</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>

هنا أنشأنا في السطر الواحد ثلاث عناوين ...
ومن ثم أنشأنا سطر جديد في ثلاث بيانات تتعلق بالعناوين بحيث الأول مع الأول وهكذا .....

وهناك خصائص أيضاً للخلايا..
نكملها في المرة القادمة إن شاء الله ....لأنو بدي أدرس غير شي :) ..
وأرجو من الأستاذ خالد بعد أن يكمل ما نقصت أن يعطينا تمرين على الجداول" هيك من كعب الدست :) "..
أو أي محترف إذا فيه يساوي صورة على الرسام ويطلب منا كودها ...


بانتظار مشاركاتكم الفعالة ....

والسلام عليكم ورحمة الله وبركاته ...
أ. خالد
05-10-2008, 10:21 AM
1- frame

يستخدم لإعطاء إطار ولكن بخصائص مختلفة عن border :

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


هذه الخواص لن تظهر إلا عند وضع خاصية border وإعطاؤها قيمة أكبر من الصفر

<table border="1" frame="lhs">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>



rules 2

أيضاً يجب أن تستخدم مع border

none -- لا تأثيرات
groups -- إطار حول محيط الجدول فقط
rows -- إطار حول الأسطر
cols -- إطار حول الأعمدة
all -- إطار حول كل الخلايا

<table border="1" rules="all">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>


summary 3-

تستخدم لوضع ملخص عن الجدول يستعمل من قبل برامج ذوي الاحتياجات الخاصة حيث تقوم هذه البرامج بقراءة الملخص لذلك الشخص



وهي تمرين بسيط في المرفقات



أي شي تاني؟؟
J*O*H*N
05-13-2008, 09:14 PM
هاد حل التمرين و لو إني متأخر :p
أول طريقة ساويت جدول 7 صفوف و كل صف 14 خلية و صرت أدمج و احذف لصار عندي جدول بيشبه الكيبورد :D :(
بعدين عدت الشغل على الطريقة التالية:
هي أنه أنشأ الجدول بس من حقل إلى حقل لوصلت عالأخير و انحلت 9smil
ملاحظة: أستاذ ليش مسهل التمرين كتيييير عيار من كعب كعب الديسك :D :D
بس جد أستاذ سهرة حلوة عالتمرين 6smil
<HTML><HEAD><TITLE>ALI MOHAMMAD</TITLE></HEAD>
<BODY>
<TABLE BORDER="5" WIDTH="100%" HEIGHT="60%" CELLSPACING="6" BGCOLOR="#8B008B" BORDERCOLOR="#00008B">
<CAPTION>أستاذ ليش مسهل التمرين كتير الله يسامحك هاد من تحت الديسكين</CAPTION>
<TR><TD COLSPAN="2">JOHN</TD><TD COLSPAN="2" ROWSPAN="2">JOHN</TD><TD COLSPAN="2">JOHN</TD><TD COLSPAN="8">JOHN</TD>
</TR>
<TR><TD COLSPAN="2">JOHN</TD><TD>JOHN</TD><TD>JOHN</TD><TD COLSPAN="2">JOHN</TD><TD COLSPAN="4">JOHN</TD><TD COLSPAN="2" ROWSPAN="2">JOHN</TD>
</TR>
<TR><TD COLSPAN="2">JOHN</TD><TD COLSPAN="2">JOHN</TD><TD COLSPAN="4">JOHN</TD><TD COLSPAN="2">JOHN</TD><TD COLSPAN="2">JOHN</TD>
</TR>
<TR><TD COLSPAN="2">JOHN</TD><TD COLSPAN="2">JOHN</TD><TD COLSPAN="2">JOHN</TD><TD COLSPAN="2">JOHN</TD><TD ROWSPAN="3">JOHN</TD><TD ROWSPAN="3">JOHN</TD><TD COLSPAN="2">JOHN</TD><TD COLSPAN="2">JOHN</TD>
</TR>
<TR><TD>JOHN</TD><TD>JOHN</TD><TD COLSPAN="4">JOHN</TD><TD COLSPAN="2">JOHN</TD><TD COLSPAN="4" ROWSPAN="2">JOHN</TD>
</TR>
<TR><TD COLSPAN="2">JOHN</TD><TD COLSPAN="2">JOHN</TD><TD COLSPAN="2">JOHN</TD><TD COLSPAN="2" ROWSPAN="2">JOHN</TD>
</TR>
<TR><TD COLSPAN="2">JOHN</TD><TD COLSPAN="2">JOHN</TD><TD COLSPAN="2">JOHN</TD><TD COLSPAN="2">JOHN</TD><TD COLSPAN="2">JOHN</TD><TD COLSPAN="2">JOHN</TD>
</TR>
</TABLE>
</HTML>
أ. خالد
05-14-2008, 06:28 AM
الحل صحيح ...

بس النمر اللي طلب التمرين ماحله ليش ؟؟!!!
مــحــمــد
05-14-2008, 07:40 AM
والله يا أستاذ حقك عليي ....

بس عنجد إنشغلت بهالمذكرات ...

وجون كان عندي يوم اللي بلشنا نحل التمرين وفعلاً الله يجزيك الخيرخليتنا نفكر مزبوط ونلاقي أي جدول سهل ...

ووقفت عند آخر عمودين بالدمج إن شاء الله بالمعهد بسألك عليهم ....

والسلام عليكم ورحمة الله وبركاته ....
سلام
03-18-2009, 07:10 PM
هناك أيضا وسم <th> يستخدم عندما نريد اضافة تعليق على العمود
<table>
<tr>
<th>hello</th>
</tr>
</table>