اختر لونك:
وَقُلِ اعْمَلُوا فَسَيَرَى اللَّهُ عَمَلَكُمْ وَرَسُولُهُ وَالْمُؤْمِنُونَ ۖ وَسَتُرَدُّونَ إِلَىٰ عَالِمِ الْغَيْبِ وَالشَّهَادَةِ فَيُنَبِّئُكُم بِمَا كُنتُمْ تَعْمَلُونَ [ التوبة : ( 105 )] كلمة الإدارة

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

يُمنع كتابة مواضيع السحر والشعوذة والروحانيات والابراج بكافة الأشكال والمخالف سيعاقب بحظر مؤقت وإذا تكرر سيكون حظر دائم تنبيه هام جداً



أضف رد جديد

قديم 27-02-2019, 05:07 PM   #1
تاريخ التسجيل: Feb 2019
العمر: 28
المشاركات: 1,003
التقييم: 10
تاريخ التسجيل: Feb 2019
العمر: 28
المشاركات: 1,003
التقييم: 10
افتراضي كيفية إنشاء جدول أنيق بـ html و css

كيفية إنشاء جدول أنيق بـ html و CSS

جميعنا – نحن مصمّمي المواقع –تعلّمنا أن نبقى بعيدًا عن الخُطاطات layouts المستندة على الجداول. لهذا غالبًا ما ننساها ونهملها إلى أن نجد أنفسنا محتاجين إليها. هذا الدرس سيأخذك خطوة بخطوة لإنشاء جدول بيانات أنيق وسلس يحتوي مقارنة بين مميّزات عدة درّاجات نارية من طرازHarley Davidson . سنقوم ببناء الجدول حصرًا بـ html ثمّ سنصقله بـ CSS لإنشاء جدول html جميل وواضح.
الجدول سيقارن ميزات ثلاثة نماذج من الدراجات النارية من طراز Harley Davidson Sportster. سيتمّ بناء الجدول بـ html ثمّ سنُنسّقه بـ CSS لجعل البيانات واضحة.

مشاهدة الجدول النّهائي
01 (3).jpg

سنحتاج إلى عدّة ملفات لأجل تصميم هذا المشروع التّعليمي. وهي: صورة PNG سنستخدمها كخلفية، وصورة كبيرة بالأبيض والأسود لملء الخلفيّة، وشعار Harley Davidson إضافة إلى صور نماذج الدرّاجات النارية الثلاث التي سنقارنها.

02 (3).png

الملفّ عبارة عن html عاديّ. حيث يبدأ بـ DOCTYPE، عنوان الصفحة ورابط لـ CSS. يبدأ محتوى الصفحة بـ <H1>، والذي سيتم لاحقا تحويله إلى شعار HD، بعد ذلك سنضيف وعاء div لمساعدتنا على توسيط المحتوى.

03 (4).png

بعد ذلك سندرج <table> متبوعًا بـ <THEAD> لتحديد العناوين والتّرويسات headings في جدولنا. يحتوي <THEAD> على صفّين، أحدهما يتضمّن صور الدرّاجات والآخر يتضمّن عناوين كل نموذج في وسم <H2>. الجدول يحتوي ثلاثة أعمدة، ولكن الخلايا الأولى في الترويسة فارغة لذلك سنضيف الحرف الرّابط &nbsp;. لمساعدتنا على تنسيق الجدول وتحسين مقروئية البيانات وفي نفس الوقت سنضيف في الكود أصنافًا classes إلى الخلايا.

04 (3).png

بعد إغلاق <THEAD> يبدأ <TBODY>. وبينما تُستخدم <th> داخل <THEAD>، فإنّ <td> تستخدم داخل <TBODY>. كل سلسة من الخلايا مُتضمَّنة داخل صفّ واحد، وصفوفنا تساعدنا في تحديد الأعمدة. كما ستتم إضافة كافّة صفوف البيانات لإنهاء HTML.

HTML النّهائي
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Harley Davidson Sportster Motorcycle Model Comparison</title>

<link href="style.css" rel="stylesheet" />

</head>

<body>

<h1>Harley Davidson Motorcycles</h1>

<div id="container">

<table>
<thead>
<tr>
<th> </th>
<th class="iron"><img src="images/iron.jpg" alt="Harley Davidson Iron 883" /></th>
<th class="nightster"><img src="images/nightster.jpg" alt="Harley Davidson Nightster" /></th>
<th class="fortyeight"><img src="images/forty-eight.jpg" alt="Harley Davidson Forty-Eight" /></th>
</tr>
<tr>
<th> </th>
<th class="iron"><h2>Iron 883</h2></th>
<th class="nightster"><h2>Nightster</h2></th>
<th class="fortyeight"><h2>Forty-Eight</h2></th>
</tr>
</thead>

<tbody>
<tr>
<td class="feature">Engine</td>
<td class="iron">883cc</td>
<td class="nightster">1202cc</td>
<td class="fortyeight">1202cc</td>
</tr>

<tr>
<td class="feature">Torque</td>
<td class="iron">70Nm</td>
<td class="nightster">98Nm</td>
<td class="fortyeight">98Nm</td>
</tr>

<tr>
<td class="feature">Exhaust</td>
<td class="iron">Chrome, staggered shorty exhaust with dual mufflers</td>
<td class="nightster">Chrome, slash-cut ex-haust with dual mufflers</td>
<td class="fortyeight">Chrome, staggered shorty exhaust with dual slash-cut mufflers</td>
</tr>

<tr>
<td class="feature">Wheels</td>
<td class="iron">Black, 13-Spoke Cast Alumi-num</td>
<td class="nightster">Black, Laced Steel</td>
<td class="fortyeight">Black, Laced Steel</td>
</tr>

<tr>
<td class="feature">Ground Clearance</td>
<td class="iron">120mm</td>
<td class="nightster">130mm</td>
<td class="fortyeight">100mm</td>
</tr>

<tr>
<td class="feature">Price</td>
<td class="iron">£6,699</td>
<td class="nightster">£8,099</td>
<td class="fortyeight">£8,849</td>
</tr>
</tbody>

</table>

</div>

</body>
</html>
05 (3).png

يبدأ CSS بإزالة وتعويض تنسيق المتصفّح الافتراضي، ثم يقوم بتعيين التنسيق الكلّي للصّفحة. بعد ذلك نضيف صورة الخلفية إلى جسم الصّفحة. أمّا خصائص الخط العّام فستكون16px Georgia رمادي.

06 (4).png

بعد ذلك سيتمّ تحويل <H1> إلى شعار Harley Davidson باستخدام تقنية استبدال الصورة، ثم سنضع الوعاء div في وسط الصفحة. تُستخدم صورة الخلفية النّمطية للملء. وبعدها سنحدّد قيم الخاصّية box-shadow لـ CSS3 لمحاكاة تأثير الظّل المُنسدل في فوتوشوب.

07 (3).png

افتراضيًا سيعرض الجدول فجوات صغيرة بين خلايا الجدول. التصميم الذي نبتغي يتطلّب هامشًا بين الأعمدة ولكن دون ثغرات بين الصّفوف. تسمح لنا الخاصيّة border-spacing بضبط التباعد على المحورين Y و X. ستتمّ إضافة الهامش الداخلي Padding, كما سيتمّ توسيط النص في جميع العناصر <th> و <td>، ثم سنستثني الخلايا ذات الصّنف “feature”، حيث سنحاذي النصّوص فيها إلى اليسار. كما ستُمنح هذه الخلايا عرضًاwidth محدّدًا لتغيير تناسب الجدول لجعل ذلك العمود الأكبر من بين بقيّة الأعمدة.

08 (2).png

أعطينا لكلّ الأصناف “iron”، “nightster” و “fortyeight” خلفيّة بيضاء شفّافة باستخدام RGBa. كان بإمكاننا أن نستخدم صنفًا واحدًا لجميع هذه الخلايا، ولكنّ الأصناف المعيّنة ستساعدنا على التنقل في بيانات الجدول في الكود البرمجي. لأجل إضافة لمسة أخيرة على الجدول، سنضيف نفس الملء الشفّاف إلى صفوف الجدول، ولكن فقط عندما يطوف عليها مؤشّر الفأرة. هذا التأثير البسيط يعزّز سهولة استخدام الجدول، ممّا يساعد المستخدم على مطالعة ومقارنة البيانات.

CSS الكامل
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote, table, tr, td, th {
margin: 0; padding: 0; border: 0;
}

body {
background: #000 url(images/bg.jpg) center top fixed no-repeat;
font: 16px Georgia, Serif; color: #ccc;
}

h1 {
width: 168px; height: 130px; margin: 30px auto; position: relative;
background: url(images/harley-davidson.png); text-indent: -9999px;
}

#container {
width: 940px; margin: -115px auto; padding: 110px 10px 50px 10px;
background: url(images/bg-pattern.png);
box-shadow: 0px 0px 15px #000;
}

table {
border-spacing: 10px 0px;
}

th, td {
text-align: center; padding: 10px;
}

.feature {
width: 183px; text-align: right;
font-size: 24px; font-weight: normal; color: #fff;
}

.iron, .nightster, .fortyeight {
background: rgba(255,255,255,0.05);
}

h2 {
font-size: 24px; font-weight: normal; color: #fff;
}

tr:hover {
background: rgba(255,255,255,0.05);
}
thead tr:hover {
background: none;
}
جدول html / CSS النهائي
09.jpg

تحقّق بنفسك من المثال لرؤية الشكل النهائي للجدول بكلّ التّأثيرات التي ترافقه. استخدام الشفافية من ملفّات PNG24 وصيغة التّلوينRGBa ساعد على إنشاء تصميم أنيق عندما دُمج مع صورة الخلفية الكبيرة.
عمومًا تقنيات الجدول البسيطة هذه يمكن استخدامها في أيّ مشروع لعرض بياناتك الجدولية بطريقة واضحة وسهلة الفهم.

القيصر غير متواجد حالياً   اقتباس
قديم 28-07-2019, 07:51 PM   #2
الصورة الرمزية احمد البرنس
تاريخ التسجيل: Jul 2019
المشاركات: 500
التقييم: 10
افتراضي

بارك الله فيكم ونفعنا بما قدمتم
جزاكم الله خير الجزاء
سلمت اناملكم
فى انتظار ابدعاتكم
دمتم متألقين مبدعين متميزين
احمد البرنس غير متواجد حالياً   اقتباس
أضف رد جديد

الكلمات الدلالية (Tags)
منتديات رحيل, رحيل, شبكة رحيل, r7il, r7il.com


الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)
 
أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة


المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
إنشاء مدونة باستخدام Express (الجزء 2): توجيه الرّوابط في Express مهرة النجدية قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress 1 28-07-2019 04:43 PM
نظرة شاملة على قاعدة بيانات ووردبريس مهرة النجدية قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress 1 27-07-2019 11:05 PM
كيفية إنشاء جدول أنيق بـ html و css الفارس قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress 0 05-04-2019 01:24 PM
كيفية إنشاء و برمجه إضافات ووردبريس raheel قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress 0 31-03-2019 10:13 PM
طرق كسب المال عبر الإنترنت باستخدام ووردبريس raheel قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress 0 27-03-2019 07:04 PM


الساعة الآن 02:46 PM

 


Content Relevant URLs by vBSEO ©2010, Crawlability, Inc.