آخر المواضيع :
الرئيسية » , , » طريقة إنشاء جدول داخل مواضيع بلوجر

طريقة إنشاء جدول داخل مواضيع بلوجر

كتب بواسطة الكاتب غير معرف في 19‏/05‏/2012 | 15:52

Smiley face
تشاهدون الآن:
موضوع:طريقة إنشاء جدول داخل مواضيع بلوجر
سلسلة:[أكواد مهمة للمدونين]
نبذة:إضافة جدول وخصائصه.
الصنف:دروس,أكواد,جافاسكريبت,بلوجر
لابد و لاشك أن أسوأ شيئ في بلوجر هو عدم إحتوائه لجدول ضمن قائمة الأدوات رغم أن الجدول من بين أهم الأدوات التي يجب أن تتوفر عليه المدونة لأنه بكل بساطة هو المسؤول عن تنسيق الموضوع وتزيينه والكثير...الكثير.
نذكر مثلاً في مدونة الأفلام أن نضع عنوان الفيلم وصورته ومدته وصنف الفيلم في جدول أفضل من وضع هذه المعلومات في كل سطر.
مثال آخر بواسطة الجداول يمكن تقسيم الصفحة إلى 4 أجزاء أو أكثر  لكتابة الفقرات أفقياً  مثل الجرائد كذلك لوضع الصور واحدة جانب ال
أخرى أو حتى لصناعة معارض الصور والفيديو.
لذا سنتكلم اليوم عن كيفية إضافة كود جدول بالتفصيل الممل... تابعوا معنا.
جدول معلومات:
الآن لإضافة جدول أنسخ الكود التالي داخل الموضوع بعد الإنتقال إلى وضع html
<div align="center">
<table border="1" cellpadding="5" cellspacing="5" style="background-color: #84d41d; width: 600px;">
<tbody>
<tr>
<th colspan="3" width"600">عنوان 1</th>
</tr>
<tr>
<td width="25%">عنوان 2</td>
<th rowspan="4" width="50%">img</th>
<td width="25%">عنوان 3</td>
</tr>
<tr>
<td width="25%">عنوان 2</td>
<td width="25%">عنوان 3</td>
</tr>
<tr>
<td width="25%">عنوان 2</td>
<td width="25%">عنوان 3</td>
</tr>
<tr>
<td width="25%">عنوان 2</td>
<td width="25%">عنوان 3</td>
</tr>
<tr>
<th colspan="3" width="600">عنوان 1</th>
</tr>
</tbody>
</table>
</div>
النتيجة:
عنوان 1
عنوان 2 img عنوان 3
عنوان 2 عنوان 3
عنوان 2 عنوان 3
عنوان 2 عنوان 3
عنوان 1
اللون الأزرق لضبط قياسات الجدول والخانات حيث:
:border خاصة بحدود الجدول. (القيمة 0 تعني لا وجود لحدود الجدول)
:width خاصة بالعرض.
cellpading و-cellspasing خاصة بحدود الخلية
اللون الأحمر خاصة بلون خلفية الجدول.
اللون الأصفر خاصة بموضع الجدول.
لإضافة سطر نستعمل الكود

<tr width"600">
<th colspan="3" width"600">عنوان 1</th>
أو
<td colspan="3" width"60%">عنوان 1</td>
</tr>
اللون الأزرق يعني بداية ونهاية السطر.
اللون الأخضر يعني بداية ونهاية الخلية الموجودة داخل سطر.
اللون البرتقالي يعني عرض الخلية أو السطر.
اللون الأحمر هو عرض خلية تلقائي و الذي يحسب  بجمع عرض كل الأعمدة المتواجدة في سطر واحد,  في مثالنا وضعنا 3 لأنه
إستعملنا 3 أعمدة في سطر واحد وهي عمود (img,عنوان 2,عنوان 3) .
ملاحظة:
لإضافة خلية يجب دمجها داخل الوسم الملون باللون الأزرق.

لإضافة خلية بسيطة نحذف اللون الأحمر الموجود داخل اللون الأخضر.
لإنشاء الجدول الواقع بين السطرين الذين يحملان الإسم  <عنوان 1 > ننسخ الكود التالي:

<tr>
<td width="25%">عنوان 2</td>
<th rowspan="4" width="50%">
img</th>
<td width="25%">عنوان 3</td>
</tr>
<tr>
<td width="25%">عنوان 2</td>
<td width="25%">
عنوان 3</td>
</tr>
<tr>
<td width="25%">
عنوان 2</td>
<td width="25%">
عنوان 3</td>
</tr>
<tr>
<td width="25%">
عنوان 2</td>
<td width="25%">
عنوان 3</td>
</tr>
اللون الأزرق يعني عرض الخلية أو السطر.
اللون البرتقالي هو لتغيير نص الخلية.
اللون الأصفر يعني بداية ونهاية السطر. في مثالنا وضعنا 4 أسطر
اللون الأحمر يعني بداية ونهاية الخلية الموجودة داخل سطر.

اللون الأخضر يعني عرض خلية تلقائي و الذي يحسب  بجمع عرض كل الأسطر المتواجدة في عمود واحد,  في مثالنا وضعنا 4 لأنه إستعملنا 4 أسطر تحمل الإسم <عنوان 3> .
ملاحظة: 
السطر الأول يحمل 3 خانات أما الأسطر الثلاثة الأخرى تحمل سوى خانتين ويعود السبب إلى الكود الملون باللون الأخضر في السطر الأول, بحيث يقدم خلية واحدة محسوبة تلقائياً وفق عدد  الأسطر.
لإضافة صورة داخل الخلايا نغير اللون البرتقالي img  مثلا بالكود التالي :

<img height="260" src="http://4.bp.blogspot.com/-ciQl0c-hq28/T8D9IA8Sr0I/AAAAAAAABGM/uVEq6mPAA6E/s1600/tableau-html-colspan.png" width="200" />


مع تغيير:
اللون الأحمر برابط الصورة.
اللون الأزرق بطول وعرض الصورة.

صورة توضيحية:
شكراً جزيلاً وإلى الموضوع القادم إن شاء الله.


Smiley face Smiley face

بقلم سليمان بوزمبراك (slimane bouzembrak)

الإسم الكامل سليمان بوزمبراك (slimane bouzembrak) ،طالب جامعي صاحب موقع من أجلك إلى الأبد,و موقع فيديوهات من أجلك,و موقع قنوات من أجلك، الهدف من خلال هذه المواقع تسهيل البحث على المواطن العربي في بحثه بشتى المواقع بحيث يضم أفضل المواضيع و المواقع في شتى المجالات ،لمزيد من المعلومات راسلني بالضغط هنا ،أو تابعونا على هذه الموقع ،أو من خلال صفحتنا على الفايسبوك.

0 التعليقات:

أضف تعليق

جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).

مواضيع صديقة

فيديو الأسبوع

لقطات من الفيلم الهندي zindaghi (لمشاهدة الفيلم كاملا إضغط هنا)



تابعنا على شبكة التواصل الإجتماعية

زوار الموقع

free counters

قسم الوثائقيات

المتواجدين الآن

 
تصميم : الموقع الرسمي | Johny Template | Mas Template
تعريب: slimax-bzk| الموقع الرسمي
جميع الحقوق محفوظة © أفريل 2012 | من أجلك إلى الأبد
بدعم من: بلوجر