كيفية إنشاء جداول HTML باستخدام PHP

تمت الكتابة بواسطة: عبد الحكيم

تارخ آخر تحديث: 18 سبتمبر 2024

محتوى المقال

مقدمة عن الجداول في HTML
إنشاء جدول HTML بسيط باستخدام PHP
إنشاء جدول HTML ديناميكي باستخدام PHP
إدراج بيانات من قاعدة بيانات في جدول HTML باستخدام PHP
تنسيق الجدول باستخدام CSS
الخلاصة

إنشاء الجداول في HTML باستخدام PHP هو مهارة أساسية لكل مطور ويب يعمل على تطبيقات تتطلب عرض البيانات بطريقة منظمة. يمكن أن تكون الجداول وسيلة قوية لعرض البيانات بشكل مرئي ومنظم، مما يسهل على المستخدمين فهم المعلومات بسرعة. في هذا المقال، سنتعرف على كيفية إنشاء جداول HTML باستخدام PHP خطوة بخطوة، مع أمثلة توضيحية لكل حالة.

مقدمة عن الجداول في HTML

الجداول في HTML هي طريقة تقليدية لعرض البيانات بشكل منظم على الويب. يتم إنشاء الجداول باستخدام عناصر HTML مثل <table>، <tr>، <th>، و<td>. يتيح لنا PHP ديناميكية أكبر في إنشاء هذه الجداول، حيث يمكننا استخدامه لملء الجداول بالبيانات من قواعد البيانات أو مصادر أخرى.

إنشاء جدول HTML بسيط باستخدام PHP

لإنشاء جدول بسيط في HTML باستخدام PHP، نبدأ بكتابة هيكل الجدول الأساسي في HTML ثم نستخدم PHP لإدراج البيانات في الخلايا. لنبدأ بمثال على إنشاء جدول يعرض بعض البيانات الثابتة.

مثال على جدول HTML ثابت

لنقم بإنشاء جدول يعرض أسماء بعض الطلاب وأعمارهم:


            <?php

            echo '<table border="1">';

            echo '<tr><th>الاسم</th><th>العمر</th></tr>';

            echo '<tr><td>أحمد</td><td>20</td></tr>';

            echo '<tr><td>سارة</td><td>22</td></tr>';

            echo '<tr><td>كريم</td><td>21</td></tr>';

            echo '</table>';

            ?>

هذا الكود البسيط يقوم بإنشاء جدول HTML يحتوي على ثلاثة صفوف، حيث يتم عرض أسماء الطلاب وأعمارهم. كما يمكنك ملاحظة، يتم استخدام دوال echo في PHP لطباعة عناصر HTML.

إنشاء جدول HTML ديناميكي باستخدام PHP

في معظم الأحيان، نحتاج إلى إنشاء جداول ديناميكية تكون البيانات فيها متغيرة وليست ثابتة. لنفترض أننا نريد إنشاء جدول يعرض بيانات من مصفوفة في PHP.

مثال على جدول ديناميكي باستخدام مصفوفة

لنقم بإنشاء مصفوفة تحتوي على معلومات عن عدة منتجات، ثم نقوم بعرضها في جدول HTML.


            <?php

            $products = [

                ['اسم المنتج' => 'لابتوب', 'السعر' => 1500],

                ['اسم المنتج' => 'هاتف ذكي', 'السعر' => 800],

                ['اسم المنتج' => 'جهاز لوحي', 'السعر' => 600]

            ];


            echo '<table border="1">';

            echo '<tr><th>اسم المنتج</th><th>السعر</th></tr>';


            foreach ($products as $product) {

                echo '<tr><td>' . $product['اسم المنتج'] . '</td><td>' . $product['السعر'] . '</td></tr>';

            }


            echo '</table>';

            ?>

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

إدراج بيانات من قاعدة بيانات في جدول HTML باستخدام PHP

أحد أهم استخدامات PHP هو التفاعل مع قواعد البيانات. في هذا القسم، سنتعلم كيفية جلب البيانات من قاعدة بيانات MySQL وعرضها في جدول HTML.

الاتصال بقاعدة البيانات

قبل أن نتمكن من عرض البيانات، نحتاج إلى الاتصال بقاعدة البيانات. إليك مثال على كيفية إنشاء اتصال بقاعدة بيانات MySQL:


            <?php

            $servername = 'localhost';

            $username = 'root';

            $password = '';

            $dbname = 'myDatabase';


            $conn = new mysqli($servername, $username, $password, $dbname);


            if ($conn->connect_error) {

                die('Connection failed: ' . $conn->connect_error);

            }


            echo 'Connected successfully';

            ?>

هذا الكود يقوم بإنشاء اتصال بقاعدة بيانات MySQL باستخدام معلومات الخادم واسم المستخدم وكلمة المرور واسم قاعدة البيانات. إذا كان الاتصال ناجحًا، سيتم عرض رسالة "Connected successfully".

جلب البيانات من قاعدة البيانات

بعد الاتصال بقاعدة البيانات، يمكننا الآن جلب البيانات باستخدام استعلام SQL وعرضها في جدول HTML.


            <?php

            $sql = 'SELECT اسم_المنتج, السعر FROM products';

            $result = $conn->query($sql);


            if ($result->num_rows > 0) {

                echo '<table border="1">';

                echo '<tr><th>اسم المنتج</th><th>السعر</th></tr>';


                while($row = $result->fetch_assoc()) {

                    echo '<tr><td>' . $row['اسم_المنتج'] . '</td><td>' . $row['السعر'] . '</td></tr>';

                }


                echo '</table>';

            } else {

                echo 'No results';

            }


            $conn->close;

            ?>

في هذا المثال، نقوم بجلب بيانات اسم المنتج وسعره من جدول المنتجات في قاعدة البيانات، ثم نعرض هذه البيانات في جدول HTML. إذا لم تكن هناك بيانات، ستظهر رسالة "No results".

تنسيق الجدول باستخدام CSS

لتنسيق الجدول وجعله أكثر جاذبية، يمكننا استخدام CSS. إليك مثال على كيفية تطبيق بعض الأنماط على الجدول.


            <style>

                table {

                    width: 100%;

                    border-collapse: collapse;

                }


                th, td {

                    padding: 10px;

                    text-align: left;

                    border-bottom: 1px solid #ddd;

                }


                th {

                    background-color: #f2f2f2;

                }

            </style>

بهذه الطريقة، يمكنك جعل جدول HTML يبدو أفضل بكثير باستخدام CSS.

الخلاصة

إنشاء جداول HTML باستخدام PHP هو عملية سهلة وفعالة. سواء كنت تتعامل مع بيانات ثابتة أو ديناميكية، يمكنك استخدام PHP لتوليد الجداول وتنسيقها بالطريقة التي تحتاجها. من خلال فهم كيفية دمج PHP مع HTML، يمكنك بناء تطبيقات ويب قوية تعرض البيانات بطريقة منظمة وسهلة القراءة.