كيف تدرج جدول في مدونات blogger ، أو في تصميم الموقع
* يتم إدراك الجداول في المدونات من خلال كود html ، أي أنك يجب أن تكون في وضع edit html أثناء الكتابة وليس في وضع التحرير compose .
* يمكنك إدراج جدول بأي عدد تريده من الصفوق والأعمده ، إلي جانب إمكانية التحكم في هذا الجدول من حيث مثلاََ أبعاده ، سمك إطار الجدول ، التباعد بين الخلايا ...الخ .
* أي جدول يحتوي علي :
صفوف rows
أعمدة columns
خلايا cells
ملاحظات مهمة قبل كتابة الكود
1- لإدراج أي كود html يتم إدراج الوسم tag الخاص به ، فمثلاََ وسم الجدول هو <table> .
2- أغلب الوسوم يجب إغلاقها في النهاية (بعد كتابة الكود) ، وذلك من خلال إضافة العلامة / قبل اسم الوسم ، فمثلاََ وسم إغلاق الجدول هو </table> .
3- معظم الوسوم لها خصائصattributes تتحكم فيها ، فمثلاََ الوسم <table> له خصائص مثل width (للتحكم في عرض الجدول) والخاصية border للتحكم في سمك إطار الجدول ..الخ .
4- في حالة كتابة خصائص الوسم لا تغلق الوسم الا بعد كتابة هذه الخصائص ، أي إذا كنت ترغب مثلاََ في كتابة الوسم table وتريد وضع خاصية العرض تساوي 200 فتكون علي هذا الشكل
<table width=200> .
5- يتم وضع الوسوم في الكود من خلال طريقة تسمي nesting ( الترجمة لها تعني تعشيش) أي وضع الوسوم في شكل عش العصفور، انظرالشكل التالي لتفهم ما أعنيه :
أنظر المثال التالي لجدول بسيط
الكود الذي تحتاجه للجدول السابق هو
<table width="200" border="1" cellspacing="2" cellpadding="2"><tbody>
<tr>
<td>Height:</td>
<td>2.2m</td>
</tr>
<tr>
<td>Weight:</td>
<td>185kg</td>
</tr>
</tbody>
</table>
ملاحظات علي الكود السابق
1- خصائص الوسم يتم وضعها
، بعد ترك مسافة بين كل
خاصية والأخري .
2- تم تحديد سمك إطار
الجدول ب 1 أي 1 بكسل ،
ويمكنك أن تزيل الإطار
بجعل القيمة = 0
3- يتمإدراج الوس<tbody> قبل البدء في كتابة محتوي الخلايا ، وطبعاََ يجب إغلاق هذا الوسم بالشكل </tbody> .
4- يتم اضافة صف جديد في كل مرة من خلال الوسم <tr>
وإغلاقه كما تعلمنا بالشكل التالي </tr> .
5- يتم اضافة خلية في كل صف من خلال الخاصية <td>
وإغلاقه أيضاََ من خلال </td> .
6- في الكود السابق نجد الصف الأول يأخذ اللون الأحمر ، والصف الثاني يأخذ اللون الأزرق .
7- عرض الجدول table width يراعي أن يكون أقل من عرض المكان المخصص للتدوين، وإذا لم يتم تحديد العرض فإن عرض الجدول سيكون full .
8- الخاصية cellpanding هي التباعد بين حدود الخلايا ومحتواها .
9- الخاصية cellspacing تحدد التباعد أو المسافة بين كل خلية والتي تجاورها .
10- يمكنك إدراج المذيد من الصفوف بنفس الطريقة ، أو إدراج المذيد من الخلايا داخل كل صف .
11- محتوي كل خلية ليس شرطاّّ أن يكون نصوص بل من الممكن أن نضع صورة ، فيديو ..الخ (من خلال الكود الخاص بإدراج الصور أو الفيديو)، وفي ذلك ميزة كبيرة يمكن الاستفادة منها مثلاََ في وضع كتالوج من الصور علي هذا الشكل مثلاََ:
كيفية تنسيق النصوص داخل الجدول
هناك طريقة سهلة جداََ لتنسيق النصوص من حيث مثلاَََ نوع الخط face أو هل هو عريض bold أو مائل italic أو تحته خط underline ..الخ , وفي هذا لن نستخدم الأكواد ، بل كل ما عليك هو أن تنتهي من تصميم الجدول كما تعلمنا ، ثم تنتقل من الوضع edit html إلي الوضع تحرير compose ، وتبدأ في تحرير الجدول وما ستراه هو ما ستحصل عليه what you see is what you get .
لإدراج الجدول بعد تنسيقه في الشريط الجانبي sidebar للمدونة :
قم بنسخ الكود الخاص بالجدول من الوضع edit html ثم قم بالذهاب الي :
layout-> Page Elements -> Add a Page Element -> HTML/JavaScript
والصق الكود واحفظ القطعة save
لعمل جدول بعنوان عريض table header
انظر الي هذا المثال :
S/No. |
Inventory |
Qty |
1. |
Plate |
50 |
2. |
Cup |
22 |
3. |
Bowl |
30 |
هذا هو الكود الخاص بالجدول الأعلي
<table border="1" cellpadding="1" cellspacing="0" width="200"><tbody>
<tr>
<th>S/No.</th>
<th>Inventory</th>
<th>Qty</th>
</tr>
<tr>
<td>1.</td>
<td>Plate</td>
<td>50</td>
</tr>
<tr>
<td>2.</td>
<td>Cup</td>
<td>22</td>
</tr>
<tr>
<td>3.</td>
<td>Bowl</td>
<td>30</td>
</tr>
</tbody>
<table/>
* ملاحظات
1- الوسم <th> ، (وهو اختصار ل table header ) يستخدم للإشارة إلي أن الصف الأول هو عبارة عن رأس header ( أي عنوان ) ، ومن ثم يقوم بتمييزه بأن يعطيه سمكاََ أكبر .
2- يمكن جعل أي صف عنوان بهذه الطريقة.
لعمل توسيع لصف أو عمود
row span or column span
في بعض الأحيان تحتاج إلي دمج خلايا معينة وجعلها خلية واحدة ، كما بالشكل التالي :
Menu |
Starters |
Salad |
$1.00 |
Soup |
$2.00> |
Main |
Fish |
$3.00 |
Chicken |
$4.00 |
Lamb |
$5.00 |
هذا هو الكود الخاص بالجدول الأعلي
<table border="1" cellpadding="0" cellspacing="0" width="300"><tbody>
<tr>
<td colspan="3">Menu</td>
</tr>
<tr>
<td rowspan="2">Starters</td>
<td>Salad</td>
<td>$1.00</td>
</tr>
<tr>
<td>Soup</td>
<td>$2.00</td>
</tr>>
<tr>
<td rowspan="3">Main</td>
<td>Fish</td>
<td>$3.00</td>
</tr>
<tr>
<td>Chicken</td>
<td>$4.00</td>
</tr>
<tr>
<td>Lamb</td>
<td>$5.00</td>
</tr>
</tbody>
</table>
ملاحظات :
1- في أول صف ، في أول خلية قمنا بحجز مساحة ثلاثة أعمدة من خلال الخاصية colspan=3 ، وهو أن يقوم الجدول بتوسيع الخلية الأولي في الصف الأول بمساحة أفقية عرضها 3 أعمدة .
2- في الصف الثاني ، في الخلية الأولي قمنا بحجز مساحة رأسية بطول خليتين (كل خلية تمثل صف) من خلال الخاصية rowspan=2 .
3- في الصف الرابع في الخلية الأولي قمنا بحجز مساحة رأسية قدرها ثلاث خلايا (كل خلية تمثل صف) .
4- أي أنه لكي يتم التوسيع الأفقي نستخدم الخاصية colspan ، ولكي يتم التوسيع الرأسي نستخدم الخاصية rowspan .
للتحكم في لون خلفية الجدول ، أو وضع صورة في الخلفية
border color , background color ,background images
في بعض الأحيان يكون من الأفضل لو قمنا باضافة لمسات جمالية للجدول ، كما بالشكل التالي :
هذا هو الكود الخاص بالجدول الأعلي
<textarea> <table border="1" bordercolor="#ff3366" cellpadding="0" cellspacing="0" width="200"> <tbody>
<tr>
<td bgcolor="#33ffcc">Music</td>
<td background="http://www.blogpulp.com/imagehost/images/381245101.jpg">Videos</td>
</tr>
<tr>
<td bgcolor="#ff66cc">Games</td>
<td><img src="http://bp1.blogger.com/_zEJkBhiAHuU/SHebr6I9FYI/AAAAAAAAANY/_T8S6CCHjy0/S220/depressed.jpg" /></td>
</tr>
</tbody>
</table> </textarea>
* ملاحظات
1- الخاصية bordercolor تحدد لون إطار الجدول ، وعموما يمكن أن تكتب قيمة اللون مباشرة (مثلا bordercolor="red") ، أو أن تكتب الرقم الكودي لكل لون ( وهي طريقة أكثر مرونة تستطيع من خلالها إدراج ألاف من التدرجات اللونية , والرابط التالي به الأكواد الخاصة بكل لون
http://tips-for-new-bloggers.blogspot.com/2007/02/hexadecimal-html-color-codes-and-names.html
2-مكن تحديد لون خلفية أي خلية من الخاصية bgcolor .
3- يمكن تحديد صور كخلفية للخلية من خلال الخاصية background بدلاََ من الخاصية bgcolor ، تم يتم وضع عنوان (مسار) الصورة كما هو موضح بالمثال .
4- لإدراج صورة كمحتوي في الخلية ، من خلال الكود الخلص بإدراج الصور من خلال الخاصية img src ، وهي اختصار ل image source أي مصدر الصورة ، وبالطبع يتعين عليك تحديد عنوان الصورة .
5- يمكن تحديد لون للجدول ككل أو خلفية للجدول ، وذلك من خلال كتابة الخاصية عند الجدول وليس أي خلية ، وبالطبع إذا قمت مثلاََ بتحديد لون للجدول ككل ثم قمت بتلوين خلية ما بلون أحمر ، ستأخذ الخلية اللون الأحمر لأن طبقة الخلايا فوق طبقة الجدول ،
ملاحظات
الخاصية align تحدد محازاة
الجدول (إلي اليمين أو اليسار
أو الوسط) ، أي أن قيمتها إما
left أو right أو center .
طريقة بديلة لإدراج الجداول في التدوينات (المدونات)
وهي سهلة جداََ ،كل ما عليك هو القيام بتصميم الجدول من خلال برنامج الوورد أو excel تم بعد الإنتهاء من تصميمه ، قم بنسخ الجدول والصقة عند التدوين في وضع التحرير compose ،ثم بعد ذلك يمكنك التعديل فيه أيضاََ من خلال وضع التأليف edit html أو من خلال وضع التحرير من حيث الخطوط مثلاََ ..الخ
تلخيص مهم
1- اكتب علامة <table> قبل بداية
الجدول
2- اكتب علامة </table> بعد
نهاية الجدول
3- اكتب علامة <tr > قبل بداية
الصف
4- اكتب علامة </tr> بعد نهاية الصف
5- اكتب علامة <td > قبل كتابة
الخلية
6- اكتب علامة </td> بعد نهاية
الخلية
7- اكتب علامة <th> قبل كتابة خلية
ذات رأس header
8- اكتب علامة </th> بعد كتابة
خلية ذات رأس header
أهم الخصائص للجدول والخلايا
1- Border لتحديد سمك إطار الجدول ، وقيمتها تكون بالبكسل .
2- Cellspacing لتحديد حجم التباعد بين الخلايا.
3- Cellpanding لتحديد حجم التباعد بين حدود الخلية ومحتواها.
4- Bordercolor لتحديد لون إطار الجدول
5- Width لتحديد عرض الجدول.
6- Height لتحديد ارتفاع الجدول.
7- Colspan لتحديد تمدد الخلية أفقياََ.
8- Rowspan لتحديد تمدد الخلية رأسياََ.
