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

ا

الفارس

New member
21 فبراير 2019
1,010
0
0
5a72efb910881_01(3).jpg.55fd5ab44c1afac81216c0b253b82d90.jpg

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

5a72efba587c3_02(3).png.b2ba095b847562cbdfde9c8ff78a6127.png

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

5a72efbbad75b_03(4).png.27fafac94dc75ff431c1b46a8ede694b.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>
 
يجب تسجيل الدخول أو التسجيل كي تتمكن من الرد هنا.
أعلى أسفل