كيفية عمل جدول في مدونة بلوجر

انشاء جدول في بلوجر داخل التدوينات أو المشاركات من الأشياء المهمة حيث أن المدون يحتاج لإدراج بعض الجداول التي توضح معلومات منظمة عن شي محدد 

ولكن ما هي كيفية عمل جدول في مدونة بلوجر ؟وماهي الطرق المتبعة في اضافة الجدول دون صعوبة وبسهولة تامة وقد قمنا بإضافة طريقتين اليوم يمكن المدونين بها اضافة الجدول إلى المشاركات وهذه الطريقتين عبارة عن طريقة يدوية تتم عبر تكويد الجدول وإضافته عبر وسوم html وهي طريقة متعبة نوعا ما وتحتاج إلى التركيز بينما هناك مواقع توفر ادراج جدول في مشاركات بلوجر دون أن تقوم بكتابة حرف واحد دعونا نذهب الى هذه الطريقتين بالتفصيل

الطريقة اليدوية لـ عمل جدول في مدونة بلوجر 

تبدأ هذه الطريقة بمعرفة الاكواد الأساسية للجدول التي تبدأ بـ <table> وتنتهي بـ <table/> وتبدأ وسوم الصفوف من اليسار بوسم <tr> وتنتهي بوسم    <tr/> طبعا يتم ادراج وسوم الصفوف  داخل وسم الجدول <table> والان سنذكر وسوم الخلايا التي يتم إدراجها داخل وسم الصف وذلك بالترتيب من الصف الأول الى الأخير حيث تبدأ بوسم <thead> الذي هو وسم الصف الاول الذي يمثل عناوين الأعمدة بحيث يبدأ وسم الخلايا في الصف الأول بوسم <th>وعند اكتمال وسم الهيدر يتم اقفاله بوسم <thead/>ويبدأ وسم بقية صفوف الجدول بوسم <tbody>وينتهي بـ <tbody/>

ويتم ادراج الصفوف الباقية بوسم <tr> وتنتهي بوسم <tr/> طبعا داخل هذا الوسم وسوم الخلايا لكل خلية وسم

<td> النص في الخلية </td>

لاحظ هذا الكود المستخدم في بناء الجدول الذي بالأسفل وهو مثال لجدول في أبسط حالاته وبدون حتى اضافة أكواد css اليه

خلية 2	خلية 1
خلية 4	خلية 3
خلية 6	خلية 5

وهذا هو الكود المستخدم في إنشاء الجدول بالاعلى تفكر في الجدول وسيكفيك فهم الشرح لانه يشرح نفسه بنفسه

<table border="3"> <thead>

<tr>

<th>خلية 2</th>

<th>خلية 1</th>

</tr>

</thead>

<tbody> <tr>

<td>خلية 4</td>

<td>خلية 3</td>

</tr> <tr>

<td>خلية 6</td>

<td>خلية 5</td>

</tr> </tbody>

</table>

وهنا اكواد جدول مع إضافة اكواد css اليه 

<style type="text/css">

 table.rbaahnet-table {

  font-size: 12px;

  border: 1px solid #CCC; 

  font-family: Arial, Helvetica, sans-serif;

 } 

 . rbaahnet-table td {

  padding: 4px;

  margin: 3px;

  border: 1px solid #CCC;

 }

 . rbaahnet-table th {

  background-color: #EEEEEE; 

  color: #FFF;

  font-weight: bold;

 }

</style>

<table class="rbaahnet-table">

<thead><tr class="rbaahnet-firstrow"><th>خلية 2</th><th>خلية 1</th></tr></thead><tbody>

 <tr><td>خلية 4</td><td>خلية 3</td></tr>

 <tr><td>خلية 6</td><td>خلية 5</td></tr>

</tbody></table>

وهذا هو شكلة بعد إضافة الاكواد الى الصفحة

خلية 2	خلية 1
خلية 4	خلية 3
خلية 6	خلية 5

الطريقة الآلية لإضافة جدول الى مدونة بلوجر

هناك مواقع على شبكة الانترنت تمكنك من اضافة جدول عبر برنامج اكسل وذلك عبر تصميم الجدول في اكسل ثم نسخه ولصقه في احد هذه المواقع ومنها

موقع Tableizer

اتبع الطريقة الآتية لتصميم جدول بلغة html

 

1. انسخ الجدول من برنامج اكسل 
2. ادخل إلى موقع Tableizer 
3. قم بلصق الجدول المنسوخ في مربع البرنامج كما بالصورة 
4. الخيار no css يعني تخليك عن ادراج وسوم لغة css وذلك يعني أنه لن تضهر الوان الحدود والخلفيات 
5. الخيار font size يعني حجم الخط في الجدول 
6. الخيار header color يعني لون خلفية الصف الأول في الجدول 
7. الخيار font يعني نوع الخط في الجدول 
8. الخيار الاخير هو Tableize it يعني تحويل الجدول الذي نسخته من اكسل إلى اكواد html وبجانبه خيار reset يعني حذف الجدول في المربع اذا كنت ترغب بإضافة جدول آخر
9. بعد الضغط على الزر Tableize it ستضهر اكواد الجدول بلغة html والصقها في مشاركات بلوجر داخل صفحة التأليف بلغة html

الدخول إلى موقع Tableizer لتفهم كيفية عمل جدول في مدونة بلوجر

الموقع الثاني موقع tables generator

هذا الموقع مميز في اضافة الجداول الى بلوجر حيث يمكنك نسخ الجدول من برنامج اكسل ولصقه عبر استيراد ملف الى الموقع أو تصميم جدول من الصفر عبر أدواته المختلفة 

لقد قمنا بتصميم جدول في هذا الموقع وشرحنا في الجدول واجهة الموقع وأدواته بالإضافة الى مثال لنوعية الجدول تفضلوا لرؤية هذا الجدول والشرح  

File ملف	Edit تعديل	Sit size إعادة تعيين الحجم	Column عمود	Row صفوف	Cell خلايا
Import csv file تعني استيراد ملف الجدول	Undo يعني تراجع عن فعل شي	Clear table مسح النص في الجدول	Insert to left ادراج لليسار	Insert above ادراج صف اعلى	Vertical align محاذاة النص ويمكن محاذاته بالادوات بالاسفل
Past table data تعني لصق ملف الجدول	Repeat عودة	Clear formating محو تنسيق الجدول	Insert to right ادراج لليمين	Insert below ادراج صف اسفل	Merge cells دمج الخلايا
Save table يعني حفظ الجدول	Autosave table locally حفظ تلقائي	Transpose table قلب الجدول	Remove إزالة العمود	Remove إزالة الصف	Split cells فك الدمج
Load table يعني تحميل الجدول		Cell spacing حجم الخلايا

يمكنك اختيار شكل الجدول عبر الاداة theme واختيار خلفية الخلايا عبر رمز القطرة الاسود أو تغيير حدود الجدول عبر الرمز مربع داخله خطوط بشكل ايقونة كما بالصورة 

كما يمكنك الاشارة على الخيارات بالاسفل لعمل جدول احترافي بالتعديل في layout ( مخطط الجدول )

center table horizontally

توسيط الجدول عمودياً ✓

make table responsive

جعل الجدول متجاوب مع الشاشات جميعها ✓

Other

first row is a table header

اول صف هو عنوان الجدول ✓

enable table sorting

تمكين تنضم الجدول ✓

keep header visible when scrolling table

ابقاء الهيدر مرئي عند تصفح الشاشة الجدول ✓

بعد الانتهاء من تصميم جدولك عليك بالضغط على generator ليتم تحديث مدخلات الجدول وبعد ذلك copy cleapoard وذلك يعني نسخه إلى الحافظة لكي تستعمله كما قلنا بالاعلى داخل صفحة التاليف بلغة html

كان هذا أساس فقط  لتعلم تكويد الجداول حتى تتعلم عزيزي المتابع كيفية عمل جدول في مدونة بلوجر وقد تكون لدينا دروس لاحقة في هذا الخصوص نتمنى أن تكونوا قد استفدتم  ولو شيء قليل واتمنى ان تشاركونا بالتعليقات وابداء آرائكم واستفساراتكم

✔️ شاهد أيضاً

إضافة مربع نص html الى مدونات بلوجر

إضافة أيقونات html الى بلوجر عبر خط fontawesome

تعلم إضافة جدول المحتويات لمدونات بلوجر

حل مشكلة ضهور الصور مشوشة بمدونات بلوجر

تحياتنا لكم