بيت الكمبيوتر
سوف نتعلم اليوم . كيف نصمم الجداول والخلايا بلغة الـHTML , سيكون سهلاً ومتتعاً بإذن الله , نبدأ علي بركة الله .
لكي تصمم جداول وخلايا بالـHTML . يجب أن تعرف الوسوم التالية
الوسم الأول
<table> </table>
وسم الـtable هو المسئول عن تعريف الجداول . يعني يتم تعريف الجداول في ملف الـHTML بإستخدام وسم الـtable , وهو الذي يحتوي علي كل الوسوم الآتية , يعني كل الوسوم التالية تكتب بداخله
الوسم الثاني
<tr></tr>
وسم الـtr هو المسئول عن تقسيم الجدول إلي صفوف .
الوسم الثالث
<th></th>
وسم الـth هو المسئول عن عمل عنوان أو عناوين للجدول
الوسم الرابع
<td></td>
وسم الـtd , هو الذي يحمل و يحتوي علي نص أو صور أو روابط أو جداول أخري !
_____________________________________________________________________
هذه الوسوم هي كل شئ في الجداول , يعني إذا أردت أن تنشئ جدول بإستخدام الـHTML . يجب أن تعرف هذه الوسوم الأربعة وما أهميتها .
والآن هيا بنا لننشئ جدول بسيط بإستخدام الوسوم السابقة .
<html>
<head>
<meta charset="utf-8" />
<title>
مركز التحميل
</title>
</head>
<body>
<table>
<tr>
<th>الملفات التي تم تحميلها <th><th>الإسم</th>
</tr>
<tr>
<td>1042</td><td>أحمد الورداني</td>
</tr>
<tr>
<td>694</td><td>أبو خالد </td>
</tr>
<tr>
<td>353</td><td>زياد محمد </td>
</tr>
</table>
</body>
</html>
<head>
<meta charset="utf-8" />
<title>
مركز التحميل
</title>
</head>
<body>
<table>
<tr>
<th>الملفات التي تم تحميلها <th><th>الإسم</th>
</tr>
<tr>
<td>1042</td><td>أحمد الورداني</td>
</tr>
<tr>
<td>694</td><td>أبو خالد </td>
</tr>
<tr>
<td>353</td><td>زياد محمد </td>
</tr>
</table>
</body>
</html>
جرب بنفسك ..
هذا جدول بسيط تم تصميمه بلغة الـHTML .
لكن ليس هذا ما نريد . ! أليس كذلك ؟ , لا يوجد حدود بين كل محتوي والآخر , وهذا هو دور الـAttribute المعروف بالـborder .
نقوم بكتابة Attribute الـborder داخل وسم الـtable لكي تكون الحدود علي كل ما بداخل هذا الوسم .
<html>
<head>
<meta charset="utf-8" />
<title>
مركز التحميل
</title>
</head>
<body>
<table border="2">
<tr>
<th>الملفات التي تم تحميلها <th><th>الإسم</th>
</tr>
<tr>
<td>1042</td><td>أحمد الورداني</td>
</tr>
<tr>
<td>694</td><td>أبو خالد </td>
</tr>
<tr>
<td>353</td><td>زياد محمد </td>
</tr>
</table>
</body>
</html>
<head>
<meta charset="utf-8" />
<title>
مركز التحميل
</title>
</head>
<body>
<table border="2">
<tr>
<th>الملفات التي تم تحميلها <th><th>الإسم</th>
</tr>
<tr>
<td>1042</td><td>أحمد الورداني</td>
</tr>
<tr>
<td>694</td><td>أبو خالد </td>
</tr>
<tr>
<td>353</td><td>زياد محمد </td>
</tr>
</table>
</body>
</html>
جرب بنفسك ..
______________________________________________________________________________
______________________________________________________________________________
كيفية عمل جدول بلا حدود !
نقوم بكتابة الأكواد والوسوم دون وضع Attribute الـborder داخل وسم الـtable || أو نقوم بوضعه ونضع الـborder صفر (0).
<html>
<head>
<meta charset="utf-8" />
<title>
مركز التحميل
</title>
</head>
<body>
<table border="0">
<tr>
<th>الملفات التي تم تحميلها <th><th>الإسم</th>
</tr>
<tr>
<td>1042</td><td>أحمد الورداني</td>
</tr>
<tr>
<td>694</td><td>أبو خالد </td>
</tr>
<tr>
<td>353</td><td>زياد محمد </td>
</tr>
</table>
</body>
</html>
<head>
<meta charset="utf-8" />
<title>
مركز التحميل
</title>
</head>
<body>
<table border="0">
<tr>
<th>الملفات التي تم تحميلها <th><th>الإسم</th>
</tr>
<tr>
<td>1042</td><td>أحمد الورداني</td>
</tr>
<tr>
<td>694</td><td>أبو خالد </td>
</tr>
<tr>
<td>353</td><td>زياد محمد </td>
</tr>
</table>
</body>
</html>
______________________________________________________________________________
كيفية عمل عنوان أو رأس للجدول !
وسم الـth هو المسئول عن ذلك . نقوم بوضعه داخل وسم الـtr . و وسم الـtr يوضع داخل وسم الـtable .
<html>
<head>
<meta charset="utf-8" />
<title>
مركز التحميل
</title>
</head>
<body>
<table border="2">
<tr>
<th>الملفات التي تم تحميلها <th><th>الإسم</th>
</tr>
<tr>
<td>1042</td><td>أحمد الورداني</td>
</tr>
<tr>
<td>694</td><td>أبو خالد </td>
</tr>
<tr>
<td>353</td><td>زياد محمد </td>
</tr>
</table>
</body>
</html>
<head>
<meta charset="utf-8" />
<title>
مركز التحميل
</title>
</head>
<body>
<table border="2">
<tr>
<th>الملفات التي تم تحميلها <th><th>الإسم</th>
</tr>
<tr>
<td>1042</td><td>أحمد الورداني</td>
</tr>
<tr>
<td>694</td><td>أبو خالد </td>
</tr>
<tr>
<td>353</td><td>زياد محمد </td>
</tr>
</table>
</body>
</html>
جرب بنفسك ..
______________________________________________________________________________
<tr>
______________________________________________________________________________
<tr>
<th>Name</th> <td>Ahmed Elwerdany </td>
<tr>
<th>Name</th> <th colspan="3"> Phone </th>
______________________________________________________________________________
كيفية عمل شرح للجدول أو عنوان للجدول !
كيف نقوم بعمل عنوان للجدول خارج الجدول بطريقة جيدة :) بإستخدام وسم <caption> .
وسم <caption> هو وسم زوجي . نقوم بكتابته بعد وسم الـtable مباشرة , ونكتب بداخله العنوان .!
<html>
<head>
<meta charset="utf-8" />
<title>
مركز التحميل
</title>
</head>
<body>
<table border="2">
<caption>معلومات المستخدمين </caption><tr>
<th>الملفات التي تم تحميلها <th><th>الإسم</th>
</tr>
<tr>
<td>1042</td><td>أحمد الورداني</td>
</tr>
<tr>
<td>694</td><td>أبو خالد </td>
</tr>
<tr>
<td>353</td><td>زياد محمد </td>
</tr>
</table>
</body>
</html>
كيفية إنشاء عنوان للجدول في الجانب وليس في الأعلي ! ((مهم))
لكي ننشئ عنوان لجدول و وضعه بالأعلي نقوم بكتاية وسم th في وسم tr , و وسم الـtd يكتب في وسم tr آخر .
أما إذا أردنا أن نصمم جدول ويكون العنوان بالجانب نضع وسم الـth + وسم الـtd داخل وسم الـtr .
بشكل أوضح . نأخذ مثال بسيط . !
<html>
<head>
<meta charset="utf-8" />
<title>
مركز التحميل
</title>
</head>
<body>
<table border="2">
<caption>معلومات المستخدمين </caption><tr>
<th>Name</th> <td>Ahmed Elwerdany </td>
</tr>
<tr>
<th> Age</th> <td> 16</td>
</tr>
<th> Age</th> <td> 16</td>
</tr>
</table>
</body>
</html>
جرب بنفسك ..
______________________________________________________________________________
______________________________________________________________________________
كيفية عمل خلايا الجدول التي تمتد أكثر من صف واحد / عمود !
الطريقة سهلة جداً . دعونا نفهم ذلك بشكل أوضح .
أولاً : إذا كان رأس الجدول بالأعلي نستخدم Attribute إسمه colspan لنصمم أكثر من خلية أمام الرأس .
<html>
<head>
<meta charset="utf-8" />
<title>
مركز التحميل
</title>
</head>
<body>
<table border="2">
<caption>معلومات المستخدمين </caption><tr>
<th>Name</th> <th colspan="3"> Phone </th>
</tr>
<tr>
<td> Ahmed </td> <td> 4868946 </td> <td> 2168946 </td> <td> 996336 </td>
</tr>
<td> Ahmed </td> <td> 4868946 </td> <td> 2168946 </td> <td> 996336 </td>
</tr>
</table>
</body>
</html>
إذا كان رأس الجدول بالجانب نسنخدم Attribute إسمه rowspan , ونضع كل خليه جديدة داخل وسم الـtr .. مثال يوضع أكثر !
<html>
<head>
<meta charset="utf-8" />
<title>
مركز التحميل
</title>
</head>
<body>
<table border="2">
<caption>معلومات المستخدمين </caption>
<tr>
<th>Name</th> <td> Ahmed </td>
</tr>
<tr>
<th rowspan="3"> Phone </th> <td> 4352345</td>
</tr>
<tr><td> 24352345</td> </tr>
<tr> <td> 4352345</td></tr>
</table>
</body>
</html>
<head>
<meta charset="utf-8" />
<title>
مركز التحميل
</title>
</head>
<body>
<table border="2">
<caption>معلومات المستخدمين </caption>
<tr>
<th>Name</th> <td> Ahmed </td>
</tr>
<tr>
<th rowspan="3"> Phone </th> <td> 4352345</td>
</tr>
<tr><td> 24352345</td> </tr>
<tr> <td> 4352345</td></tr>
</table>
</body>
</html>
جرب بنفسك
______________________________________________________________________________
______________________________________________________________________________
محتوي الخلية !
تستطيع أن تكتب داخل الخلية كل شئ (( نص - صور - قائمة - روابط - جداول أخري )) . ولنأخذ مثال بسيط لتوضيح الفكرة .
<html>
<head>
<meta charset="utf-8" />
<title>
مركز التحميل
</title>
</head>
<body>
<table border="2">
<tr>
<td><h4> أحمد الورداني </h4><br> <p>مدونة المبرمج </p> </td> <td> <img src="http://icons.iconarchive.com/icons/hamzasaleem/stock/128/App-Store-icon.png" /> </td>
</tr>
<tr>
<td>
<a href="http://bmpor.blogspot.com/">مدونة المبرمج </a>
</td>
<td>
<ul> <li> ناجح في عمله </li> <li> يؤدي واجبه علي أكمل وجه </li>
</ul>
</td>
</tr>
</table>
</body>
</html>
<head>
<meta charset="utf-8" />
<title>
مركز التحميل
</title>
</head>
<body>
<table border="2">
<tr>
<td><h4> أحمد الورداني </h4><br> <p>مدونة المبرمج </p> </td> <td> <img src="http://icons.iconarchive.com/icons/hamzasaleem/stock/128/App-Store-icon.png" /> </td>
</tr>
<tr>
<td>
<a href="http://bmpor.blogspot.com/">مدونة المبرمج </a>
</td>
<td>
<ul> <li> ناجح في عمله </li> <li> يؤدي واجبه علي أكمل وجه </li>
</ul>
</td>
</tr>
</table>
</body>
</html>
جرب بنفسك
______________________________________________________________________________
خلق مساحة أكبر بين محتوي الخلية والحدود !
يمكنك خلق مساحة بين محتوي الخلية والحدود من خلال attribute المعروف بـcellpadding . هذا مثال توضيحي !
<html>
<head>
<meta charset="utf-8" />
<title>
مركز التحميل
</title>
</head>
<body>
<table border="1">
<caption> هذا الجدول بدون وضع تأثير تباعد المساحة بين الحدود ومحتوي الخلية </caption>
<tr> <td> أنت مبرمج محترف </td> <td> صمم موقعك بسهولة </td> </tr> <tr><td>إسمي أحمد الورداني </td> <td> درس مهم جداً </td> </tr>
</table>
<table border="1" cellpadding="12">
<caption> هذا الجدول بإستخدام الـcellpadding</caption>
<tr> <td> أنت مبرمج محترف </td> <td> صمم موقعك بسهولة </td> </tr> <tr><td>إسمي أحمد الورداني </td> <td> درس مهم جداً </td> </tr>
</table>
</body>
</html>
<head>
<meta charset="utf-8" />
<title>
مركز التحميل
</title>
</head>
<body>
<table border="1">
<caption> هذا الجدول بدون وضع تأثير تباعد المساحة بين الحدود ومحتوي الخلية </caption>
<tr> <td> أنت مبرمج محترف </td> <td> صمم موقعك بسهولة </td> </tr> <tr><td>إسمي أحمد الورداني </td> <td> درس مهم جداً </td> </tr>
</table>
<table border="1" cellpadding="12">
<caption> هذا الجدول بإستخدام الـcellpadding</caption>
<tr> <td> أنت مبرمج محترف </td> <td> صمم موقعك بسهولة </td> </tr> <tr><td>إسمي أحمد الورداني </td> <td> درس مهم جداً </td> </tr>
</body>
</html>
______________________________________________________________________________
كيفية استخدام cellspacing لزيادة المسافة بين الخلايا ؟
سنتعلم كيفية إستخدام Attribute المعروف بـcellspacing لزيادة المساخة بين الخلايا . الأمر في غاية السهولة والأهمية أيضاً .
مثال توضيحي .
<html>
<head>
<meta charset="utf-8" />
<title> أيها المبرمج ! </title>
</head>
<body>
<table border="1">
<caption><h4> بدن إستخدام cellspacing </h4> </caption>
<tr>
<td>الأول</td>
<td>أحمد</td>
</tr>
<tr>
<td>الثاني</td>
<td>محمد</td>
</tr>
</table>
<br> <br> <br> <br> <hr>
<table border="1" cellspacing="0">
<caption> وهنا الـ<br> cellspacing <br> يساوي صفر </caption>
<tr>
<td>الأول</td>
<td>أحمد</td>
</tr>
<tr>
<td>الثاني</td>
<td>محمد</td>
</tr>
</table>
<br> <br> <br> <br><hr>
<table border="1" cellspacing="10">
<caption> وهنا الـ<br> cellspacing <br> يساوي 10 ! </caption>
<tr>
<td>الأول</td>
<td>أحمد</td>
</tr>
<tr>
<td>الثاني</td>
<td>محمد</td>
</tr>
</table>
</body>
</html>
<head>
<meta charset="utf-8" />
<title> أيها المبرمج ! </title>
</head>
<body>
<table border="1">
<caption><h4> بدن إستخدام cellspacing </h4> </caption>
<tr>
<td>الأول</td>
<td>أحمد</td>
</tr>
<tr>
<td>الثاني</td>
<td>محمد</td>
</tr>
</table>
<br> <br> <br> <br> <hr>
<table border="1" cellspacing="0">
<caption> وهنا الـ<br> cellspacing <br> يساوي صفر </caption>
<tr>
<td>الأول</td>
<td>أحمد</td>
</tr>
<tr>
<td>الثاني</td>
<td>محمد</td>
</tr>
</table>
<br> <br> <br> <br><hr>
<table border="1" cellspacing="10">
<caption> وهنا الـ<br> cellspacing <br> يساوي 10 ! </caption>
<tr>
<td>الأول</td>
<td>أحمد</td>
</tr>
<tr>
<td>الثاني</td>
<td>محمد</td>
</tr>
</table>
</body>
</html>
وكان ذلك هو آخر مثال .
بكده يكون انتهي الدرس الجميل .
صلي الله وسلم علي سيدنا محمد وعلي آله وصحبه أجمعين . دمتم في رعاية الله :) .
ليست هناك تعليقات:
إرسال تعليق