عسوووووووووووله
20-04-2006, 07:23 AM
بسم الله الرحمن الرحيم
الدرس السادس
الجداااااااااااااااااول TABLE
التعامل مع الجداول وإدراجها في صفحتكـ سهل جداً وممتع
وان شاء الله راح احاول ابسطها
قبل اي شي تخيل الجدول وارسمه وحدد عدد الاسطر والاعمده قبل ما تكتب الاكواد
فالجدول عباره عن عدد من السطور والاعمده والتعامل يكون اخذ سطر بسطر
يعني السطر الاول كم عامود فيه ونكتب الكود وننهيه
وننتقل للسطر الثاني ونشوف كم عامود فيه وننهيه
واوقات يكون داخل الجدول جدول او اكثر لذلك راح نتعامل بكل جدول لحاله
وسم الجدول Table
<table>. . .</table>
إنشاء سطر Table Row
<tr>. . .</tr>
إنشاء عامود Table Data
<td>. . . </td>
إضافة عنوان رئيسي للجدول
<CAPTION>جدول بيانات اعضاء الرائديه</CAPTION>
http://3e6r.net/data/media/20/linie0010.gif
وهنا جدول بسيط 2_2
<htmal>
<body>
<table border=3>
<CAPTION>جدول بيانات اعضاء الرائديه</CAPTION>
<tr>
<td> السطر الاول والعامود الاول </td>
<td>السطر الاول والعامود الثاني</td>
</tr>
<tr>
<td> السطر الثاني والعامود الاول </td>
<td>السطر الثاني والعامود الثاني</td>
</tr>
</table>
</body>
</html>
الخصائص التي تستخدم مع الجدول
BORDER
إضافة حدود للجدول ولتحديد سماكتها تختار قيم
BGCOLOR
لتحديد لون خلفية للجدول اما بكتابه اللون او كود اللون
ALIGN
هذى معروفه لمحاذاة الجدول يمين أو يسار right or left
WIDTH
لتحديد عرض الجدول ككل عن طريق كتابه رقم يحدد العرض
اونختار طريقه النسبه نحدد النسبه مثل 30% من عرض الصفحه
HEIGHT
لتحديد ارتفاع الجدول ومثل السابق نحدد الطول بكتابه القيمه او تكون القيمة نسبية
CELLPADDING
لتحديد المسافة الفاصلة بين الحدود وبداية النص في كل خلية اي الهوامش
CELLSPACING
لتحديد المسافة بين كل خلية من خلايا الجدول
وهذا كود إنشاء جدول الاطار سمكه 6 ولون الجدول 00FF00 "سماوي"
ارتفاعه 600 وعرضه 50% من عرض الصفحه والمسافه بين حد الخليه والنص 3 والمسافه بين الخلايا 9
واكيد لكم مطلق الحريه بالقيم
<TABLE BORDER="6" BGCOLOR="#CCDDDD" HEIGHT="300" WIDTH="50%"
CELLPADDING="3" CELLSPACING="9"> </table>
وهنا بدلت اللون بصوره BACKGROUND
<TABLE BORDER="6" BACKGROUND="1.JPG" HEIGHT="200" WIDTH="40%"
CELLPADDING="3" CELLSPACING="9"> </table>
http://3e6r.net/data/media/20/linie0010.gif
ناخذ جدول الطلاب 3 * 4
<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>
:biggrin:
:biggrin:
:biggrin:
لحظه صدع راااااااااااااسي
:eek:
شكلي صعبتها وهي سهله
ايش رايكم اخذ بريكـ اشرب شاي وارجع اكمل
:rolleyes:
الحمد لله مابقى الا شوي وتـنتهون من الحوسه
بعد ما خلصنا خصائص الجدول :confused: باقي لنا خصائص الصف تراها سهله التطبيق
ALIGN
محاذاة النص يمين او يسار او بالنصف ودائما افضل شي الوسط Right, Left, Center
VALIGN
محاذاة النص للأعلى أو للأسفل أو بالمنتصف Top, Bottom, Middle أو على امتداد الخط الأساسي للخلية Baseline
BGCOLOR
لون الخلفيه للخلايا راح ياخذ الصف كله وراح يتجاهل لون الجدول ويطبق اللون المحدد
http://3e6r.net/data/media/20/linie0010.gif
واخيرا خصائص الصف او العامود
في بعضها مثل اللى سبق ALIGN _ VALIGN_ BGCOLOR
WIDTH
لتحدد عرض الخلية بكتابة القيمة بالنسبة المئوية ويكفي تحديد عرض خلايه صف اوعامود راح يتم تطبيقه على كل الخلايا في كل الصفوف
HEIGHT
لتحدد الإرتفاع بكتابه القيمه او بالنسبه واكيد التحديد في الخليه راح يطبق على كل الخلايا بالعامود
اما الجديد هو
COLSPAN
هذى الخاصيه راح تدمج الخليه مع الخليه اللى بجنبها أفقياً
ROWSPAN
اما هنا راح تندمج الخليه مع الخليه اللى تحتها عمودياً
<TD COLSPAN="3"> دمج ثلاث خلايا بسطر واحد </TD>
<TD ROWSPAN="4"> دمج اربع خلايا بعامود واحد </TD>
جدول 4*4 مع حذف بعض الخلايا
<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>
لاحظ حذفت كود الخليه الثالثه لاني دمجته مع اللى قبلها افقياً
و لما دمجت الخليه الثالثه عامودياً حذفت الخليه الثالثه من السطر الرابعه
:101: صباح الخير وين وصلنا:101:
أتمنى من الله ان الجداول تكون سهل التطبيق
وانشاء الله :101: تستفيدون منها بصفحاتكم
والى اللقااااااء
الدرس السادس
الجداااااااااااااااااول TABLE
التعامل مع الجداول وإدراجها في صفحتكـ سهل جداً وممتع
وان شاء الله راح احاول ابسطها
قبل اي شي تخيل الجدول وارسمه وحدد عدد الاسطر والاعمده قبل ما تكتب الاكواد
فالجدول عباره عن عدد من السطور والاعمده والتعامل يكون اخذ سطر بسطر
يعني السطر الاول كم عامود فيه ونكتب الكود وننهيه
وننتقل للسطر الثاني ونشوف كم عامود فيه وننهيه
واوقات يكون داخل الجدول جدول او اكثر لذلك راح نتعامل بكل جدول لحاله
وسم الجدول Table
<table>. . .</table>
إنشاء سطر Table Row
<tr>. . .</tr>
إنشاء عامود Table Data
<td>. . . </td>
إضافة عنوان رئيسي للجدول
<CAPTION>جدول بيانات اعضاء الرائديه</CAPTION>
http://3e6r.net/data/media/20/linie0010.gif
وهنا جدول بسيط 2_2
<htmal>
<body>
<table border=3>
<CAPTION>جدول بيانات اعضاء الرائديه</CAPTION>
<tr>
<td> السطر الاول والعامود الاول </td>
<td>السطر الاول والعامود الثاني</td>
</tr>
<tr>
<td> السطر الثاني والعامود الاول </td>
<td>السطر الثاني والعامود الثاني</td>
</tr>
</table>
</body>
</html>
الخصائص التي تستخدم مع الجدول
BORDER
إضافة حدود للجدول ولتحديد سماكتها تختار قيم
BGCOLOR
لتحديد لون خلفية للجدول اما بكتابه اللون او كود اللون
ALIGN
هذى معروفه لمحاذاة الجدول يمين أو يسار right or left
WIDTH
لتحديد عرض الجدول ككل عن طريق كتابه رقم يحدد العرض
اونختار طريقه النسبه نحدد النسبه مثل 30% من عرض الصفحه
HEIGHT
لتحديد ارتفاع الجدول ومثل السابق نحدد الطول بكتابه القيمه او تكون القيمة نسبية
CELLPADDING
لتحديد المسافة الفاصلة بين الحدود وبداية النص في كل خلية اي الهوامش
CELLSPACING
لتحديد المسافة بين كل خلية من خلايا الجدول
وهذا كود إنشاء جدول الاطار سمكه 6 ولون الجدول 00FF00 "سماوي"
ارتفاعه 600 وعرضه 50% من عرض الصفحه والمسافه بين حد الخليه والنص 3 والمسافه بين الخلايا 9
واكيد لكم مطلق الحريه بالقيم
<TABLE BORDER="6" BGCOLOR="#CCDDDD" HEIGHT="300" WIDTH="50%"
CELLPADDING="3" CELLSPACING="9"> </table>
وهنا بدلت اللون بصوره BACKGROUND
<TABLE BORDER="6" BACKGROUND="1.JPG" HEIGHT="200" WIDTH="40%"
CELLPADDING="3" CELLSPACING="9"> </table>
http://3e6r.net/data/media/20/linie0010.gif
ناخذ جدول الطلاب 3 * 4
<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>
:biggrin:
:biggrin:
:biggrin:
لحظه صدع راااااااااااااسي
:eek:
شكلي صعبتها وهي سهله
ايش رايكم اخذ بريكـ اشرب شاي وارجع اكمل
:rolleyes:
الحمد لله مابقى الا شوي وتـنتهون من الحوسه
بعد ما خلصنا خصائص الجدول :confused: باقي لنا خصائص الصف تراها سهله التطبيق
ALIGN
محاذاة النص يمين او يسار او بالنصف ودائما افضل شي الوسط Right, Left, Center
VALIGN
محاذاة النص للأعلى أو للأسفل أو بالمنتصف Top, Bottom, Middle أو على امتداد الخط الأساسي للخلية Baseline
BGCOLOR
لون الخلفيه للخلايا راح ياخذ الصف كله وراح يتجاهل لون الجدول ويطبق اللون المحدد
http://3e6r.net/data/media/20/linie0010.gif
واخيرا خصائص الصف او العامود
في بعضها مثل اللى سبق ALIGN _ VALIGN_ BGCOLOR
WIDTH
لتحدد عرض الخلية بكتابة القيمة بالنسبة المئوية ويكفي تحديد عرض خلايه صف اوعامود راح يتم تطبيقه على كل الخلايا في كل الصفوف
HEIGHT
لتحدد الإرتفاع بكتابه القيمه او بالنسبه واكيد التحديد في الخليه راح يطبق على كل الخلايا بالعامود
اما الجديد هو
COLSPAN
هذى الخاصيه راح تدمج الخليه مع الخليه اللى بجنبها أفقياً
ROWSPAN
اما هنا راح تندمج الخليه مع الخليه اللى تحتها عمودياً
<TD COLSPAN="3"> دمج ثلاث خلايا بسطر واحد </TD>
<TD ROWSPAN="4"> دمج اربع خلايا بعامود واحد </TD>
جدول 4*4 مع حذف بعض الخلايا
<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>
لاحظ حذفت كود الخليه الثالثه لاني دمجته مع اللى قبلها افقياً
و لما دمجت الخليه الثالثه عامودياً حذفت الخليه الثالثه من السطر الرابعه
:101: صباح الخير وين وصلنا:101:
أتمنى من الله ان الجداول تكون سهل التطبيق
وانشاء الله :101: تستفيدون منها بصفحاتكم
والى اللقااااااء