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

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

ترجمة -وبتصرّف- للمقال How To Create a Slick Features Table in HTML & CSS لصاحبه iggy

تم التعديل في 6 مارس 2018 بواسطة zahershullar