إضافة جدول "table " إلى مدونة بلوجر بأكواد HTML و CSS

عدد مشاهدات الموضوع:


بسم الله الرحمن الرحيم سنشرح اليوم احدى طرق اضافة جدول إلى مدونة بلوجر بإستعمال كود HTML و CSS ، الكود الذي لدينا هو لجدول يتكون من 3 أعمدة و 4 أسطر مع شرح طرقة التعديل على الجدول .

طريقة تركيب الجدول في مدونة بلوجر.
أولا: من لوحة تحكم بلوجر ثم قالب ثم تحرير HTML ثم ننقر بالزر الأيسر للفأرة داخل صفحة الأكواد ،  ثم نضغط على ( CTRL + F) ليظهر مربع البحث. ثم نبحث عن هذا الكود  :]]></b:skin>  
نضع فوقه  كود CSS الموالي:
  كود 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 لون خط العناوين. و كذلك لون خلفية السطور(لون أبيض).

ثانيا: في الصفحة التي نريد أن نضع فيها الجدول  نفتح محرر أكواد 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"  و قم بملئه و تنسيقه ، ثم انسخه مباشرة في مشاركة أو صفحة من مدونتك.
- استخدم مولد الجداول مباشرة على الانترنت، يوجد الكثير من المواقع التي توفر هذه الخدمة نذكر منها :

هناك تعليقان (2):

  1. غير معرف6:10 م

    شكرا لكم على هذه الاضافة الرائعه =)

    لاكن عندي سؤال : كيف اجعل صورة المدونة تتغير عند تحديث الصفحة ؟

    ردحذف
  2. فكرة ممتازة
    شكرا لك يا اخى الكريم
    تحياتى :كينج نت

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية