لذا علينا جميعاً معرفة كيفية الوصول لطريقة عمل جداول بكافة الأشكال والألوان بطريقة صحيحة وسهلة دون الحاجة لتعلم البرمجة إن كنت مجرد في حاجة لعمل جدول مواصفات خاص بك وبالشكل الذي تود وقد تسأل نفسك بعض الأسئلة الهامة مثل.
كيف أقوم بعمل جدول مواصفات إحترافي؟
كيفية إعداد جدول مواصفات مميز؟
ما هي متطلبات عمل جدول مواصفات متجاوب؟
بالبداية علينا جميعاً محاولة الحصول على برنامج Dreamweaver وهو أحد برامج شركة أدوبي المشهورة ويمكنك شرائه أو الحصول على مدة تجريبية منه ويمكن من خلال المدة التجريبية أن تقوم بعمل جميع الجداول والتصميمات التي تريد العمل بها بعد ذلك بكل بساطة.
وبعد الحصول على برنامج دريم ويفر وفتحه عليك تحديد عمل صفحة جديدة وحددها HTML ليفتح لك البرنامج بكافة خصائصه وبعدها تأكد من أنك قمت بتحديد والضغط على زرار Split الموجود أعلى يسار الشاشة لتتمكن من المعاينة للجدول وكذلك رؤية الكود كاملاً لتخصيص أفضل للبرنامج وبعدها عليك الذهاب للقائمة العلوية من البرنامج والضغط على زرار insert ومنه نقوم بالضغط على زرار Table لتفتح لنا نافذة نحدد فيها الخصائص الرئيسية للجدول وهي كالأتي.
الخاصية Rows
ومنها تحدد عدد الصفوف التي تحت بعضها البعض يمكنك أن تحدد أي عدد تريد بل ويمكنك أن تزيد العدد بعد ذلك وتعدله أيضاً كما تود من الكود أو من خلال وضع الكود مرة أخرى ببرنامج الدريم ويفر والتعديل عليه بوضع الكود أسفل وسم <body> بصفحة HTML جديدة بمنطقة الكود بدريم ويفر.
الخاصية Columns أو Cols
وهي العماويد ويمكنك تحديدها كما يناسبك وتعديلها بنفس الطريقة وهي على سبيل المثال يكون برأس كل عامود الكلمة المحددة للبيانات مثل عامود الإسم وعامود السن وعامود المدينة كمثال فقط.
الخاصية Table width
وهي الخاصية التي يمكنك من خلالها تحديد عرض ومساحة الجدول يمكنك تحديدها إما pixels أو بالبكسل وهو إن كنت جديد لا أنصحك بها لأنك ستضع رقم محدد ولن يتغير وقد يحدث مشاكل إما بتغير المتصفحات أو أبعاد الشاشات وكذلك عند إستخدام الموبايل أو يمكنك إختيار الخيار النسبة المئوية أو percent وهو ما أنصح به وأفضله ليكون الجدول متجاوب مع أي نظام وشاشة للعرض ويمكنك تحديده ليكون 100 % بالنسبة المئوية أو كما يناسبك.
الخاصية Border thickness
وهو خاصية سمك الحدود والخط المحدد للجدول إجعله 1 فقط أو إرفع الرقم كما يناسبك وهو مهم لتحديد الجدول وفصل العناصر الداخلة فيه وهو أمر لا غنى عنه في حالة كان الجدول بالشكل الإفتراضي الذي نعرفه جميعاً.
الخاصية Cell padding أو CellPad
ويمكنك من خلالها تكبير حجم المستطيلات جميعاً المكونة للجدول وبشكل إفتراضي إتركها على الرقم 1 ويمكنك تزويدها كما يناسبك ويمكنك إستعراض جميع التغييرات على برنامج دريم ويفر للتأكد من كل شيء.
الخاصية Cell spacing أو CellSpace
ويمكنك في تلك الخاصية تحديد المسافات بين المستطيلات المكونة للجدول وكلما زودت رقم الخاصية تباعدت المسافات بين المستطيلات المكونة للجدول ويمكنك أيضاً معاينة التغييرات من برنامج دريم ويفر ولكن بشكل إفتراضي أتركها على الرقم 1 وهو الأنسب.
الأن جميع الخصائص الرئيسية للجدول تم تحديدها بالشكل الصحيح وبعد الضغط على زرار ok أنت الأن معك جدول بالفعل يحتاج لبعض التنسيق ليكون جاهز للتعبئة ووضعه في مقالك أو الموضوع الخاص بك بموقعك أو بمدونتك.
الأن عليك ظبط إتجاهات الجدول والكتابة أول شيء ستجد بعد إضافة الجدول على برنامج أدوبي دريم ويفر ستجد الجدول محدد وأسفل شاشة دريم ويفر خصائص الجدول عليك أن تقوم بتغيير الخاصية Align وتجعلها Center وهو لتوسيط الجدول وجعله أكثر تناسق في الشكل.
الأن أكتب على رأس كل عامود الإسم المحدد لبيانات العامود وليكن الإسم والسن والمدينة ونلاحظ أن الكتابة كذلك تحتاج لتنسيق أفضل ونقوم بعد كتابة أسماء العماويد أن نضغط علي رأس كل عامود من أعلاه لنحدده كاملاً وسنجد أن العامود تلون باللون الأحمر وظهر فوقه سهم أسود الأن نغير الإعدادات Horz والخاصية Vert إلى Center و Middle أو كما تود ولكن هذا الأفضل ولكل عامود تكرر نفس الأمر وكذلك يمكنك وأنت محدد للعامود كاملاً تغيير لونه من أسفل شاشة البرنامج من الخاصية Bg وتغيير لون العامود كاملاً من المربع الصغير بجانبها.
ودائماً نجد رأس العامود له لون محدد غير بقية الخانات التي أسفله نعم الأمر سهل فقط تضغط بداخل كل مستطيل برأس كل عامود وبالخصائص من أسفل شاشة البرنامج ستجد تلوين المستطيل من خاصية Bg تجد بجانبها مربع صغير إضغط عليه وحدد اللون الذي تريده وكرر الخطوة لكل مستطيل برأس عامود.
هل هذا كل شيء بالطبع يظل هناك شيء بسيط ألا وهو الضغط مع السحب للفواصل بين العماويد ولتكون النسب متساوية وقريبة من بعضها البعض مثال هنا معنا جدول من 3 عماويد فقسمنا نسبة 100 % على الثلاثة عماويد فكانت النسبة 33 % لكل عامود وتركنا عامود واحد فقط بنسبة 34 % ليكون متناسق أكثر.
والطريقة الأسهل وهي تحديد العامود كاملاً بحيث يظهر من فوقه السهم الأسود ويلون العامود بالكامل باللون الأحمر ثم من الخصائص أسفل شاشة البرنامج نقوم بالضغط على زرار CSS الموجود أسفل يسار البرنامج ومن الخاصية W نقوم بتحديد نسبة كل عامود محدد وليكون تحديد عامودين بنسبة 33 % والعامود الثالث 34 % وهكذا بحيث نكتب في الخانة بجانب الخاصية W إما 33% أو 34% في حالة 3 عماويد.
ملحوظة بسيطة قد تجد مشكلة بالإتجاهات بنسخة الدريم ويفر حيث تجد العامود الأيمن في دريم ويفر يظهر بالمقال أنه العامود الأيسر والعكس في حالة كان محتوى الجدول باللغة العربية لذا عليك من البداية بعد التصميم على نسخة الدريم ويفر الخاصة بك أخذ الكود من البداية ومعاينته على المقالة فإن كانت الإتجاهات مثل ما قمت بتصميمه فكان بها وإن كانت معكوسة فقط عليك تصميم الجدول من اليسار لليمين وسيكون من اليمين لليسار بالمقالة هذه مشكلة قد تحدث ببعض نسخ الدريم ويفر.
الأن فقط نستطيع أن نقول أنه معنا جدول حقيقي جاهز لتعبئة البيانات بالشكل والطريقة التي تريد وتناسبك وهذا مثال على الكود الذي أتممناه بتلك الخطوات بالظبط.
| الإسم | السن | المدينة |
| كمال | 20 | الإسكندرية |
| عمر | 22 | بورسعيد |
بالطبع الشكل سيتغير قليلاً من قالب للأخر ولكن على كل حال الجدول الأن موجود ويعمل ولمعاينة الكود وأخذ نسخة منه ستجد الكود كامل داخل صندوق الأكواد عليك تحديده كاملاً ونسخه إن كنت تريده.
الكود
<table align="center" border="1" cellpadding="1" cellspacing="1" style="width: 100%;">
<tbody><tr>
<td align="center" bgcolor="#CCCCCC" valign="middle" width="34%">الإسم</td>
<td align="center" bgcolor="#CCCCCC" valign="middle" width="33%">السن</td>
<td align="center" bgcolor="#CCCCCC" valign="middle" width="33%">المدينة</td>
</tr>
<tr>
<td align="center" valign="middle">كمال</td>
<td align="center" valign="middle">20</td>
<td align="center" valign="middle">الإسكندرية</td>
</tr>
<tr>
<td align="center" valign="middle">عمر</td>
<td align="center" valign="middle">22</td>
<td align="center" valign="middle">بورسعيد</td>
</tr>
</tbody></table>
الأن لم يبقى لنا إلا تجميل الجدول ببعض الجماليات ويمكننا أخذ فكرة أكبر من موقع w3schools فبه بعض الأكواد الجميلة والسهلة ولكن توفيراً للوقت سنقوم بتطبيق إستايل مميز للجدول من تلك الخصائص المميزة بالأكواد.
فقط وبكل بساطة سنضع على سبيل المثال الكود إستايل بعد نهاية كود الجدول مباشرة لتجميل الجدول وليكون الكود كاملاً على الشكل التالي.
الكود
<table align="center" border="1" cellpadding="1" cellspacing="1" style="width: 100%;">
<tbody><tr>
<td align="center" bgcolor="#CCCCCC" valign="middle" width="34%">الإسم</td>
<td align="center" bgcolor="#CCCCCC" valign="middle" width="33%">السن</td>
<td align="center" bgcolor="#CCCCCC" valign="middle" width="33%">المدينة</td>
</tr>
<tr>
<td align="center" valign="middle">كمال</td>
<td align="center" valign="middle">20</td>
<td align="center" valign="middle">الإسكندرية</td>
</tr>
<tr>
<td align="center" valign="middle">عمر</td>
<td align="center" valign="middle">22</td>
<td align="center" valign="middle">بورسعيد</td>
</tr>
</tbody></table>
<style>
tr:nth-child(even) {background-color: #f2f2f2;}
tr:hover {background-color: #f0fdff;}
</style>
لا تقلق الكود سليم ويعمل فقط عليك إضافته بالطريقة الصحيحة بداخل صندوق الكتابة وعلى سبيل المثال ستقوم بكتابة كلمة مميزة تستطيع إيجادها بسرعة مثل 111111111111 وبعد كتابتها تقوم بعملها بسطر خاص بها لوحدها بالطبع وتقوم بتوسيطها وبعدها تقوم بالضغط على زرار القلم الموجود بصندوق الكتابة ببلوجر أو بأي نظام إدارة محتوى مشابه له وتقوم بالضغط على خيار عرض HTML.
وبعد أن تجد الكلمة ألا وهي 111111111111 يمكنك تظليلها وحذفها وعمل لصق لكود الجدول وإرجاع صندوق الكتابة إلى عرض وضع الإنشاء وبهذا يكون قد تم تركيب الجدول بطريقة صحيحة جرب أي من الكودين وإختر ما يناسبك منهم فالهدف الأهم من كود الجدول أن تكون قد فهمت ولو بشكل بسيط كيف تستطيع بنفسك عمل جدول خاص بك وبالشكل الذي يناسبك.
وبالطبع أكواد الألوان واضحة بالكود ويمكنك تغييرها للألوان التي تناسبك كذلك جميعها بالكود بعد علامة # ولإختيار الكود الذي يناسبك باللون المناسب لك أكثر يمكنك الإختيار من موقع HTML COLOR CODES وبعد إختيار اللون تقوم بنسخ الكود بجانب كلمة HEX ولصقه مكان كود اللون القديم الذي تريد تغييره والأن بالفعل يمكنك عمل كل ذلك بنفسك ووحدك وهو أمر هام في مشوارك مع تطوير موقعك أو تعلم برمجة الويب من البداية تماماً.
نعم كانت الرحلة طويلة نوعاً ما ولكن شيقة والأن ننتقل للكود الجاهز الإحترافي الذي لن تستطيع التعامل معه وتعديله إلا بعد خوض كل تلك الرحلة من البداية حتى لا يتلف الكود معك وتستطيع التعامل معه والوصول للنتيجة التي تريد.
نبدأ بالكود باللغة العربية بالمثال والذي يمكنك تعديله ليناسب موقعك وتخصصه أكثر
ويمكنك تعديل الجدول ليلائم موقعك تغير وتحذف وتضيف كل ماتريد بكل سهولة وأما عن كود الجدول السابق تجده بصندوق الأكواد التالي.
الكود
<div class="mo table"> <table class="methods"> <tbody> <tr> <th style="text-align: right; width: 45%;"> <svg height="16" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M0 1v16.981h4v5.019l7-5.019h13v-16.981h-24zm13 12h-8v-1h8v1zm6-3h-14v-1h14v1zm0-3h-14v-1h14v1z"></path></svg> إسم التطبيق :</th> <td style="text-align: center; width: 55%;">App Name</td> </tr> <tr> <th style="text-align: right; width: 45%;"> <svg height="16" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M22 24h-20l-2-10h24l-2 10zm-1.444-22.001l.439-1.999h-17.994l.439 1.999h17.116zm1.7 4.001l.37-2h-21.256l.371 2h20.515zm-19.731 6l-.254-2h19.45l-.262 2h2.017l.524-4h-24l.509 4h2.016z"></path></svg> نوع التطبيق :</th> <td style="text-align: center; width: 55%;"><a href="#">Category</a></td> </tr> <tr> <th style="text-align: right; width: 45%;"> <svg height="16" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M6 8l.001 9.444c0 .861.696 1.556 1.557 1.556h.442v3.542c0 .804.707 1.458 1.51 1.458.806 0 1.49-.654 1.49-1.459v-3.541h2v3.542c0 .804.707 1.458 1.511 1.458.806 0 1.489-.654 1.489-1.459v-3.541l.444-.001c.858 0 1.556-.696 1.556-1.557v-9.442h-12zm16 1.471c0-.805-.695-1.471-1.5-1.471-.805-.001-1.5.667-1.5 1.472v6.106c0 .806.694 1.422 1.5 1.422.805 0 1.5-.615 1.5-1.422v-6.107zm-17 0c0-.805-.695-1.471-1.5-1.471-.805-.001-1.5.667-1.5 1.472v6.106c0 .806.694 1.422 1.5 1.422.805 0 1.5-.615 1.5-1.422v-6.107zm9.951-7.312l.94-1.859c.068-.132-.019-.3-.163-.3-.066 0-.13.038-.164.105l-.949 1.878c-1.531-.737-3.544-.812-5.229 0l-.95-1.878c-.033-.067-.097-.105-.164-.105-.144 0-.231.168-.163.3l.94 1.859c-1.845 1.034-3.049 2.584-3.049 4.84h12c0-2.256-1.204-3.806-3.049-4.84zm-5.45 2.841c-.276 0-.501-.224-.501-.5 0-.274.225-.5.501-.5s.499.226.499.5c0 .276-.223.5-.499.5zm4.998 0c-.276 0-.499-.224-.499-.5 0-.274.223-.5.499-.5s.501.226.501.5c0 .276-.225.5-.501.5z"></path></svg> نظام التشغيل :</th> <td style="text-align: center; width: 55%;">Android 4.0+</td> </tr> <tr> <th style="text-align: right;"> <svg height="16" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M13 17h4v1h-4v-1zm0-1h4v-1h-4v1zm9-14v22h-20v-22h3c1.23 0 2.181-1.084 3-2h8c.82.916 1.771 2 3 2h3zm-11 1c0 .552.448 1 1 1 .553 0 1-.448 1-1s-.447-1-1-1c-.552 0-1 .448-1 1zm9 1h-4l-2 2h-3.897l-2.103-2h-4v18h16v-18zm-7 9h4v-1h-4v1zm0-2h4v-1h-4v1zm-6.5.077l.386-.355c.449.218.735.383 1.241.745.952-1.081 1.58-1.627 2.748-2.355l.125.288c-.963.841-1.669 1.777-2.686 3.6-.626-.738-1.044-1.208-1.814-1.923zm.098 5l.386-.355c.449.218.735.383 1.241.745.952-1.081 1.58-1.627 2.748-2.355l.125.289c-.963.841-1.669 1.777-2.686 3.6-.627-.739-1.045-1.209-1.814-1.924z"></path></svg> رخصة التطبيق :</th> <td style="text-align: center;">Free</td> </tr> <tr> <th style="text-align: right;"> <svg height="16" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M19 0h-14c-2.762 0-5 2.239-5 5v14c0 2.761 2.238 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm3 19c0 1.302-.839 2.401-2 2.816v-2.816h-1v3h-2v-3h-1v3h-2v-3h-1v3h-2v-3h-1v3h-2v-3h-1v3h-2v-3h-1v2.815c-1.161-.414-2-1.513-2-2.815v-14c0-1.302.839-2.401 2-2.816v2.816h1v-3h2v6h1v-6h2v3h1v-3h2v3h1v-3h2v6h1v-6h2v3h1v-2.816c1.161.415 2 1.514 2 2.816v14zm-14.141-9h1.141v6h-1.354v-3.889h-1.488v-1c.893-.041 1.701-.201 1.701-1.111zm8.315 4.667h1.826v1.306h-3.922v-.958c1.529-1.491 2.379-2.244 2.389-3.018 0-.462-.268-.717-.754-.717-.453 0-.816.245-1.168.524l-.424-1.148c.545-.452 1.191-.656 1.833-.656 1.179 0 1.941.74 1.941 1.885.001 1.155-.899 2.043-1.721 2.782z"></path></svg> إصدار التطبيق :</th> <td style="text-align: center;">v4.0.4</td> </tr> <tr> <th style="text-align: right;"> <svg height="16" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M15 10h4l-7 8-7-8h4v-10h6v10zm6 9v5h-18v-5h18zm-6 2h-1v1h1v-1zm2 0h-1v1h1v-1zm2 0h-1v1h1v-1z"></path></svg> حجم التطبيق :</th> <td style="text-align: center;">33MB</td> </tr> <tr> <th style="text-align: right;"> <svg height="16" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M21 10h-8c-1.657 0-3 1.343-3 3v8c0 1.657 1.343 3 3 3h8c1.657 0 3-1.343 3-3v-8c0-1.657-1.343-3-3-3zm-1.865 11l-.66-1.846h-3l-.663 1.846h-1.66l3.041-8h1.602l3.053 8h-1.713zm-2.153-6.137l1.051 3.018h-2.103l1.052-3.018zm-11.837-6.977c.038.581.104 1.116.194 1.593-1.224.224-1.274-.984-.194-1.593zm8.855-4.886v5h-1c-.743 0-1.442.173-2.076.465-.196-.806-.783-1.53-1.679-1.964.077-.298.123-.522.167-.744l-1.35-.262c-.023.113-.063.328-.136.614-.456-.066-.94-.075-1.431-.025.011-.329.032-.653.06-.963h1.507v-1.279h-1.326c.065-.326.121-.521.176-.705l-1.317-.396c-.097.323-.178.64-.259 1.101h-1.504v1.278h1.341c-.036.414-.057.842-.064 1.275-1.48.544-2.109 1.581-2.109 2.521 0 1.11.876 2.086 2.261 1.96 1.72-.156 2.869-1.456 3.542-3.053.885.536.838 1.161.773 1.552-.966.913-1.576 2.196-1.576 3.625v1h-5c-1.657 0-3-1.343-3-3v-8c0-1.657 1.343-3 3-3h8c1.657 0 3 1.343 3 3zm-7.5 4.467c.327-.042.658-.05.969-.026-.214.476-.496.948-.855 1.319-.055-.396-.093-.83-.114-1.293z"></path></svg> لغة التطبيق :</th> <td style="text-align: center;">EN.AR</td> </tr> <tr> <th style="text-align: right;"> <svg height="16" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M24 10.935v2.131l-8 3.947v-2.23l5.64-2.783-5.64-2.79v-2.223l8 3.948zm-16 3.848l-5.64-2.783 5.64-2.79v-2.223l-8 3.948v2.131l8 3.947v-2.23zm7.047-10.783h-2.078l-4.011 16h2.073l4.016-16z"></path></svg> معلومات المطور :</th> <td style="text-align: center;"><a href="#">Dev Team</a></td> </tr> </tbody></table> </div>
عليك تظليل كامل الكود ووضعه بالمقال كما شرحنا سابقاً ليعمل معك وبالطبع يمكنك إضافة الإستايل بنفس الطريقة السابقة بعد كود الجدول مباشرة وكود الإستايل مرة أخرى تجده بصندوق الأكواد التالي.
الكود
<style>
tr:nth-child(even) {background-color: #f2f2f2;}
tr:hover {background-color: #f0fdff;}
</style>
وكما ترى بالصورة النتيجة مع إستخدام الإستايل ليظهر لنا جدول مواصفات إحترافي وبه خصائص إضافية مميزة تزيد من رونقه وكل ذلك بكود واحد فقط إما الجدول فقط أو كود واحد به كود الجدول وكذلك كود الإستايل معاً.
الأن يمكننا التعديل على هذا الجدول والخروج منه بجداول لا نهائية من تعديل بالمواصفات والألوان وحتى برموز الجدول والإستايل حتى تصل للجدول الذي تريد ويمكنك تغيير لون الخط وحجمه من صندوق الكتابة بشكل عادي جداً حتى تصل للجدول الذي تعتمده بموقعك وتضعه بكل مقالة لك أو حتى في المقالات التي تحتاج لذلك لترتقي بشكل وتنسيق موقعك لأعلى درجة.
يمكنك تعديل الأحجام والنسب كذلك كما يناسبك فقط حلل الكود جيداً وعدل عليه كما تريد ولكن لا تنسى حفظ نسخة أصلية عندك من كل تعديل ناجح حتى لا تتشتت بين الأكواد والإصدارات التي أنتجتها من التعديلات المختلفة.
ملاحظة هامة إن أضفت كود الإستايل بمقال سيحول جميع الجداول بتلك المقالة للإستايل الذي وضعته لذا حدد بكل مقال إما أن تضع إستايل للجداول أم لا لأن كود الإستايل سيعمل على جميع الجداول بالمقال إن تمت إضافته.
وبالنسبة للصور أو الأيكونات الموجودة بالجدول فسيكون هناك مقالة أخرى بها شرح كامل عن أنواع تلك الصور والأيكونات والمناسب منها للأنواع المختلفة من القوالب والنوع الذي يعمل على جميع القوالب ولكن بمميزات أقل قليلاً وبكود أكبر والكثير جداً من الإختلافات كذلك إصدارات الصور والأيكونات المختلفة التي بعضها قد يعمل على بعض القوالب وبعضها لا وكل ذلك بمقال خاص قريباً.
الخلاصة
كلنا نتعلم كل يوم شيء جديد وأتمني أن تخرج من هذه المقالة وقد وجدت ضالتك في الوصول لجدول مواصفات مميز خاص بك وإحترافي ويناسب موقعك بل وتعلمت كيفية عمل الجداول ووضع الإستايل لها كل ذلك بسهولة بالغة ويمكنك البحث والتطور أكثر لإضافة المزيد من المميزات والخصائص لجدول المواصفات الخاص بك.
