لغة Html الدرس السادس مع عسوووله

عسوووووووووووله · 20-04-2006, 07:23 AM

بسم الله الرحمن الرحيم

الدرس السادس

الجداااااااااااااااااول TABLE

التعامل مع الجداول وإدراجها في صفحتكـ سهل جداً وممتع

وان شاء الله راح احاول ابسطها

قبل اي شي تخيل الجدول وارسمه وحدد عدد الاسطر والاعمده قبل ما تكتب الاكواد

فالجدول عباره عن عدد من السطور والاعمده والتعامل يكون اخذ سطر بسطر

يعني السطر الاول كم عامود فيه ونكتب الكود وننهيه

وننتقل للسطر الثاني ونشوف كم عامود فيه وننهيه

واوقات يكون داخل الجدول جدول او اكثر لذلك راح نتعامل بكل جدول لحاله

وسم الجدول Table

<table>. . .<‎/table>

إنشاء سطر Table Row

<tr>. . .<‎/tr>

إنشاء عامود Table Data

<td>. . . </td>

إضافة عنوان رئيسي للجدول

<CAPTION>جدول بيانات اعضاء الرائديه</CAPTION>

وهنا جدول بسيط 2_2

[HTML]<htmal>
<body>
<table border=3>
<CAPTION>جدول بيانات اعضاء الرائديه</CAPTION>
<tr>
<td> السطر الاول والعامود الاول </td>
<td>السطر الاول والعامود الثاني</td>
</tr>

<tr>
<td> السطر الثاني والعامود الاول </td>
<td>السطر الثاني والعامود الثاني</td>
</tr>

</table>
</body>
</html>
[/HTML]

الخصائص التي تستخدم مع الجدول

BORDER
إضافة حدود للجدول ولتحديد سماكتها تختار قيم

BGCOLOR
لتحديد لون خلفية للجدول اما بكتابه اللون او كود اللون

ALIGN
هذى معروفه لمحاذاة الجدول يمين أو يسار right or left

WIDTH
لتحديد عرض الجدول ككل عن طريق كتابه رقم يحدد العرض
اونختار طريقه النسبه نحدد النسبه مثل 30% من عرض الصفحه

HEIGHT
لتحديد ارتفاع الجدول ومثل السابق نحدد الطول بكتابه القيمه او تكون القيمة نسبية

CELLPADDING
لتحديد المسافة الفاصلة بين الحدود وبداية النص في كل خلية اي الهوامش

CELLSPACING
لتحديد المسافة بين كل خلية من خلايا الجدول

وهذا كود إنشاء جدول الاطار سمكه 6 ولون الجدول 00FF00 "سماوي"

ارتفاعه 600 وعرضه 50% من عرض الصفحه والمسافه بين حد الخليه والنص 3 والمسافه بين الخلايا 9

واكيد لكم مطلق الحريه بالقيم

[HTML]
‎<TABLE BORDER="6" BGCOLOR="#CCDDDD" HEIGHT="300" WIDTH="50%"
CELLPADDING="3" CELLSPACING="9"‎>‎ </table>
[/HTML]

وهنا بدلت اللون بصوره BACKGROUND

[HTML]
‎<TABLE BORDER="6" BACKGROUND="1.JPG" HEIGHT="200" WIDTH="40%"
CELLPADDING="3" CELLSPACING="9"‎>‎ </table>
[/HTML]

ناخذ جدول الطلاب 3 * 4

[HTML]
<HTML>
<body>
‎<TABLE BORDER="6" BGCOLOR="#CCDDDD" ALIGN="RIGHT" HEIGHT="300"
WIDTH="40%" CELLPADDING="3" CELLSPACING="9"‎>‎
<CAPTION>جـــــ 2006 ــــدول الطلاب</CAPTION>
<TR ALIGN="CENTER" VALIGIN="CENTER"
BGCOLOR="DDFFCC" BORDERCOLOR="BLACK">
<TD>المدرسه</TD>
<TD>الصف</TD>
<TD>اسم الطالب</TD>
</TR>

<TR ALIGN="center">
<TD>الابتدائيه</TD>
<TD>سادس</TD>
<TD ALIGN="RIGHT">طلال</TD>
</TR>

<TR ALIGN="center">
<TD>المتوسطه</TD>
<TD>اول</TD>
<TD ALIGN="RIGHT">فيصل</TD>
</TR>

<TR ALIGN="center">
<TD>الثانويه</TD>
<TD>ثاني</TD>
<TD ALIGN="RIGHT">ماجد</TD>
</TR>

</TABLE>
</body>
</HTML>
[/HTML]

لحظه صدع راااااااااااااسي

شكلي صعبتها وهي سهله

ايش رايكم اخذ بريكـ اشرب شاي وارجع اكمل

الحمد لله مابقى الا شوي وتـنتهون من الحوسه

بعد ما خلصنا خصائص الجدول باقي لنا خصائص الصف تراها سهله التطبيق

ALIGN
محاذاة النص يمين او يسار او بالنصف ودائما افضل شي الوسط Right, Left, Center

VALIGN
محاذاة النص للأعلى أو للأسفل أو بالمنتصف Top, Bottom, Middle أو على امتداد الخط الأساسي للخلية Baseline

BGCOLOR
لون الخلفيه للخلايا راح ياخذ الصف كله وراح يتجاهل لون الجدول ويطبق اللون المحدد

واخيرا خصائص الصف او العامود

في بعضها مثل اللى سبق ALIGN _ VALIGN_ BGCOLOR

WIDTH
لتحدد عرض الخلية بكتابة القيمة بالنسبة المئوية ويكفي تحديد عرض خلايه صف اوعامود راح يتم تطبيقه على كل الخلايا في كل الصفوف

HEIGHT
لتحدد الإرتفاع بكتابه القيمه او بالنسبه واكيد التحديد في الخليه راح يطبق على كل الخلايا بالعامود

اما الجديد هو

COLSPAN
هذى الخاصيه راح تدمج الخليه مع الخليه اللى بجنبها أفقياً

ROWSPAN
اما هنا راح تندمج الخليه مع الخليه اللى تحتها عمودياً

[HTML]
<TD COLSPAN="3"> دمج ثلاث خلايا بسطر واحد <‎/TD>
[/HTML]

[HTML]
<TD ROWSPAN="4"> دمج اربع خلايا بعامود واحد <‎/TD>
[/HTML]

جدول 4*4 مع حذف بعض الخلايا

[HTML]
<html>
<body>
<TABLE BORDER="3" ALIGN="center">
<TR>
<TD>السطر الاول الاولى</TD>
<TD>السطر الاول الثانيه</TD>
<TD>السطر الاول الثالثه</TD>
<TD>السطر الاول الرابعه</TD>
</TR>

<TR>
<TD>السطر الثاني الاولى</TD>
<TD COLSPAN="2" >السطر الثاني دمج الخليه الثانيه+الثالثه</TD>
<TD>السطر الثاني الرابعه</TD>
</TR>

<TR>
<TD>السطر الثالث الاولى</TD>
<TD>السطر الثالث الثانيه</TD>
<TD ROWSPAN="2">السطر الثالث دمج الخليه الثالثه+ الثالثه بالسطر الرابع</TD>
<TD>السطر الثالث الرابعه</TD>
</TR>

<TR>
<TD>السطر الرابع الاولى</TD>
<TD>السطر الرابع الثانيه</TD>
<TD>السطر الرابع الرابعه</TD>
</TR>

</TABLE>
</body>
</html>
[/HTML]

لاحظ حذفت كود الخليه الثالثه لاني دمجته مع اللى قبلها افقياً

و لما دمجت الخليه الثالثه عامودياً حذفت الخليه الثالثه من السطر الرابعه

صباح الخير وين وصلنا

أتمنى من الله ان الجداول تكون سهل التطبيق

وانشاء الله تستفيدون منها بصفحاتكم

والى اللقااااااء

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
لغة Html الدرس السابع مع عسوووله	عسوووووووووووله	:: منتدى الكمبيوتر والبرامج::	3	24-04-2006 03:56 PM
لغة Html الدرس الرابع مع عسوووله	عسوووووووووووله	:: منتدى الكمبيوتر والبرامج::	4	11-04-2006 07:45 PM
لغة Html الدرس الخامس مع عسوووله	عسوووووووووووله	:: منتدى الكمبيوتر والبرامج::	6	11-04-2006 07:35 PM
لغة HTML الدرس الثالث مع عسوووله	عسوووووووووووله	:: منتدى الكمبيوتر والبرامج::	13	07-04-2006 12:26 PM
لغة HTML الدرس الثاني مع عسوووله	عسوووووووووووله	:: منتدى الكمبيوتر والبرامج::	4	09-08-2004 04:17 AM