| عمود3 | عمود 2 | عمود 1 |
| عمود 3 سطر1 | عمود 2 سطر 1 | عمود 1 سطر 1 |
| عمود 3 سطر 2 | عمود 2 سطر 2 | عمود 1 سطر 2 |
| عمود 3 سطر 3 | عمود 2 سطر 3 | عمود 1 سطر 3 |
| عمود 3 سطر 4 | عمود 2 سطر4 | عمود 1 سطر 4 |
طريقة تركيب الجدول في مدونة بلوجر
الخطوة 1من لوحة تحكم بلوجر ، قالب ، تحرير HTML
ننقر بالزر الأيسر للفأرة داخل صفحة الأكواد،ثم نضغط على ( CTRL + F) ليظهر مربع البحث
.
- نبحث عن هذا الكود :]]></b:skin>
نضع فوقه كود CSS الموالي:
.CSSTableGenerator {margin:0px;padding:0px;width:100%;border:1px solid #3f7f00;-moz-border-radius-bottomleft:25px;-webkit-border-bottom-left-radius:25px;border-bottom-left-radius:25px;-moz-border-radius-bottomright:25px;-webkit-border-bottom-right-radius:25px;border-bottom-right-radius:25px;-moz-border-radius-topright:25px;-webkit-border-top-right-radius:25px;border-top-right-radius:25px;-moz-border-radius-topleft:25px;-webkit-border-top-left-radius:25px;border-top-left-radius:25px;}.CSSTableGenerator table{border-collapse: collapse;border-spacing: 0;width:100%;height:100%;margin:0px;padding:0px;}.CSSTableGenerator tr:last-child td:last-child {-moz-border-radius-bottomright:25px;-webkit-border-bottom-right-radius:25px;border-bottom-right-radius:25px;}.CSSTableGenerator table tr:first-child td:first-child {-moz-border-radius-topleft:25px;-webkit-border-top-left-radius:25px;border-top-left-radius:25px;}.CSSTableGenerator table tr:first-child td:last-child {-moz-border-radius-topright:25px;-webkit-border-top-right-radius:25px;border-top-right-radius:25px;}.CSSTableGenerator tr:last-child td:first-child{-moz-border-radius-bottomleft:25px;-webkit-border-bottom-left-radius:25px;border-bottom-left-radius:25px;}.CSSTableGenerator tr:hover td{background-color:#aaffaa;}.CSSTableGenerator td{vertical-align:middle;background-color:#ffffff;border:1px solid #3f7f00;border-width:0px 1px 1px 0px;text-align:right;padding:14px;font-size:14px;font-family:Times New Roman;font-weight:normal;color:#000000;}.CSSTableGenerator tr:last-child td{border-width:0px 1px 0px 0px;}.CSSTableGenerator tr td:last-child{border-width:0px 0px 1px 0px;}.CSSTableGenerator tr:last-child td:last-child{border-width:0px 0px 0px 0px;}.CSSTableGenerator tr:first-child td{background:-o-linear-gradient(bottom, #5fbf00 5%, #3f7f00 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5fbf00), color-stop(1, #3f7f00) );background:-moz-linear-gradient( center top, #5fbf00 5%, #3f7f00 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#5fbf00", endColorstr="#3f7f00"); background: -o-linear-gradient(top,#5fbf00,3f7f00);background-color:#5fbf00;border:0px solid #3f7f00;text-align:center;border-width:0px 0px 1px 1px;font-size:20px;font-family:Times New Roman;font-weight:bold;color:#ffffff;}.CSSTableGenerator tr:first-child:hover td{background:-o-linear-gradient(bottom, #5fbf00 5%, #3f7f00 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5fbf00), color-stop(1, #3f7f00) );background:-moz-linear-gradient( center top, #5fbf00 5%, #3f7f00 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#5fbf00", endColorstr="#3f7f00"); background: -o-linear-gradient(top,#5fbf00,3f7f00);background-color:#5fbf00;}.CSSTableGenerator tr:first-child td:first-child{border-width:0px 0px 1px 0px;}.CSSTableGenerator tr:first-child td:last-child{border-width:0px 0px 1px 1px;}
#3f7f00 لون خلفية سطر العناوين كذلك لون خطوط الجدول.
#aaffaa لون خلفية السطر لما يمر عليه مؤشر الفأرة " الماوس" .
#000000 لون الخط .
#ffffff لون خط العناوين. و كذلك لون خلفية السطور(لون أبيض).
الخطوة 2: في الصفحة التي نريد أن نضع فيها الجدول نفتح محرر أكواد HTML و نضع كود HTML الموالي:
- كود HTML
<div class="CSSTableGenerator" ><table ><tr><td>عمود3</td><td >عمود 2</td><td>عمود 1</td></tr><tr><td >عمود 3 سطر1</td><td>عمود 2 سطر 1</td><td>عمود 1 سطر 1</td></tr><tr><td >عمود 3 سطر 2</td><td>عمود 2 سطر 2</td><td>عمود 1 سطر 2</td></tr><tr><td >عمود 3 سطر 3</td><td>عمود 2 سطر 3</td><td>عمود 1 سطر 3</td></tr><tr><td >عمود 3 سطر 4</td><td>عمود 2 سطر4</td><td>عمود 1 سطر 4</td></tr></table></div>
الآن نشرح كيف نتحكم في عدد الأعمدة و الأسطر .
الجول الذي لدينا يحتوي على3 أعمدة و 4 أسطر
اذا أردت اضافة عمود للجدول ما عليك إلا إضافة الكود الملون بالأزرق بين:<tr>و</tr> كما في المثال الثالي:
<tr> <td>عمود4</td>... </tr>
<tr> <td>عمود4</td>... </tr>
<tr> <td>عمود4</td>...</tr>
<tr> <td>عمود4</td>... </tr>
<tr> <td>عمود4</td>... </tr>
و نفس الشيئ إذا أردت حذف عمود 3 مثلا احذف الكود الملون بالأزرق بين:<tr>و</tr>.في كامل الأسطر.
أما إذا أردت إضافة سطر 5 مثلا ما عليك إلا إضافة الكود الملون بالأحمر الرماني قبل </table> و تغيير الإسم من سطر 1 إلى سطر 5. و نفس الشيئ إذا أردت حذف السطر 1 مثلا ، قم بحذف الكود الملون بالأحمر الرماني
الخطوة الأخيرة : بعد التعديل على الكود و ملء الخانات بما يناسبك احفظ الإضافة و مبروك الجدول.
ملاحظة : هناك طرق أخرى لإظافة جدول إلى المدونة نذكر منها :
- ا رسم جدولك على الوورد"Word" و قم بملئه و تنسيقه ، ثم انسخه مباشرة في مشاركة أو صفحة من مدونتك.
- استخدم مولد الجداول مباشرة على النت ، يوجد الكثير من المواقع التي توفر هذه الخدمة نذكر منها :