الدرس الثالث عشر: الجداول
( جدول بسيط | خصائص الجداول | جداول المحترفين |
الجداول المتداخله )
الجداول هي مميزه لصفحات الانترنت ونحتاجها
لترتيب شكل الموقع واضافه لمسه جماليه فيه
جدول بسيط
الجداول تتكون من اعمده وصفوف نبدأ دائما
بالصفوف ولإدراج صف نستخدم<tr> اما عند ادراج الاعمده فنستخدم<td> وقبل كل هذا نستخدم وسم الجداول <table> ولاننسي الاطار فبدونه لن يتضح ان هذا جدول
وخاصية الاطار مر علينا من قبل ولكن لنتذكره معاborder=
الان لنقم بتصميم جدول بسيط
<html><head></head><body>
<table border="2">
<tr>
<td>ahmed
<td>mohamed
<td>tarek
</tr>
<tr>
<td>mona
<td>asmaa
<td>sara
</body>
</html>
لننتقل الي خصائص الجداول
نستطيع محاذاة الخط في كل خليه وايضا تغير
لون الخط وتغير خلفية كل خليه وكل هذا من خلال المثال التالي
<html><head></head><body>
<table border="2"
bordercolor="ff00cc">
<tr bgcolor="red">
<td>ahmed
<td
bgcolor="green">mohamed
<td>tarek
</tr>
<tr>
<td>mona
<td><font
color="00cc99" size="6"
align="center">asmaa</font>
<td>sara
</body>
</html>
لقد جمعنا الكثير من التأثيرات في هذا الجدول
ولكن مازالت الامور بسيطه الا توافقني الرأي؟؟
‘جداول المحترفين
لن اتحدث كثيرا ان اعني بهذا العنوان دمج
الصفوف والاعمده سوف نستخدم لدمج الاعمده colspan ولدمج الصفوف rowspan
<html><head></head><body>
<table border="2">
<tr>
<td colspan=2>ahmed
<td rowspan=2>tarek
</tr>
<tr>
<td>mona
<td>asmaa
</body>
</html>
الاّن اصبحت الامور اكثر وضوحا لكن انظرمعي
الي
Width
تستخدم لتحديد عرض الجدول ككل <table
width="400"> او <table
width="50%">
Height
لتحديد ارتفاع الجدول وتكون كالخاصيه السابقه
Cellspacing لتحديد المسافه بين كل خليه من خلايا الجدول <table cellspacing="20">
Cellpadding لتحديد المسافه الفاصله بين الحدود وبداية النص
في كل خليه
<table cellpadding="10">
لاحظ ان كل مايكتب داخل الجداول تستطيع تطبيق
تأثيرات النص عليه وايضا تستطيع وضع ارتباط تشعبي داخل الجداول فقط لديك عقلك
وتفكيرك الي أي مدي ستصل .....
الجداول المتداخله
هذا الجزء استكمالا لجداول المحترفين
<html><head></head><body>
<table
border=2>
<tr>
<td>TABLE1</td>
<td>
<table>
<tr>
<td>TABLE2</td><tr>
<tr>
<td>TABLE3</td></tr>
</tr></table>
</body></html>
0 التعليقات:
إرسال تعليق