كيف تكتب كود لعمل جدول Table باستخدام HTML فى موقعك

المحتويات: 1. الجداول فى لغة HTML. 2. خاصية اطار الجدول. 3. العناوين داخل الجدول.

شرح كيف تكتب كود لعمل جداول Tables فى لغة HTML 

من مميزات عمل جداول عند تصميمك للصفحه انها تعمل على تنظيم و توضيح محتويات الصفحه كما انها تعطى انطباع بالاحترافيه
و هذه بعض الاساسيات عند انشاء جدول بلغة HTML

اول شيئ لتعريف جدول داخل الصفحة تستخدم الوسم 

<table>

و لاضافة صف داخل الجدول تستخدم الوسم 

<tr>

و لاضافة خلية داخل الصف تستخدم الوسم 

<td>

مثال:

<"table border="1>

    <tr>

          <td>Text Text Text</td>

          <td>Text Text Text</td>

    </tr>

</table>

و سيظهر بهذا الشكل

 

Text Text Text

Text  Text Text

و بهذا نفهم ان الصف تابع للجدول

و الخلية تابعة للصف.

و يمكن انشاء جدول متعدد الصفوف و الخلايا.

مثال:

<"table border="1>

      <tr>

           <td>Text xxxxx</td>

           <td>Text xxxxx</td>

      </tr>

      <tr>

           <td>Text xxxxx</td>

           <td></td>

       </tr>

 </table>   

و سيظهر بهذا الشكل

Text xxxxx xxxxxxxxx xxxxxxxxx	Text xxxxx xxxxxxxxx xxxxxxxxx
Text xxxxx xxxxxxxxx xxxxxxxxx	Text xxxxx xxxxxxxxx xxxxxxxxx

خاصية أطار الجدول

و كما هو واضح بالمثال ان الجدول محاط باطار و يحدث هذا لاننا قمنا باسناد للخاصية border القيمة واحد

و يمكنك عمل جدول بدون اى اطار عن طريق اسناد 0

او عمل جدول ذو اطار كبير عن طريق اسناد رقم كبير للخاصية border.

مثال:

<"table border="0>

            <tr>

                <td>This Table</td>

                <td>Without Border</td>

            </tr>

</table>

هكذا

This Table

Without Border

__________________

<"table border="4>

            <tr>

                <td>This Table</td>

                <td>With Large Border</td>

            </tr>

</table>   

بهذا الشكل

This Table

With Large Border

العناوين داخل الجدول

يمكنك تعريف بعض الخلايا كعناوين للجدول و ذلك باستبدال الوسم <td> بالوسم <th>

مثال:

<"table border="1>

            <tr>

                <th>Cell 01</th>

                <th>Cell 02</th>

            </tr>

            <tr>

                <td>Cell 03</td>

                <td>Cell 04</td>

            </tr>

</table>

هكذا

Cell 01	Cell 02
Cell 03	Cell 04

<"table border="1>

            <tr>

                <th>Cell 01</th>

                <td>Cell 02</td>

            </tr>

            <tr>

                <th>Cell 03</th>

                <td>Cell 04</td>

            </tr>

</table>   

هكذا

Cell 01	Cell 02
Cell 03	Cell 04

قد يهمك ايضا:

الروابط فى HTML و انواعها