10- الجداول Tables - دورة تعلم لغة HTML


الجداول Tables
دورة  HTML
تحدثنا في الدرس السابق عن الصور Images، وفي درس اليوم سنتحدث عن الجداول Tables .
لإدراج جدول في لغة HTML نستخدم وسم <table>.

الجداول في لغة HTML :

ينقسم الجدول الي صفوف والتي تحدد بوسم <tr>، وكل صف يحتوي علي خلايا التي تحدد بوسم <td> إختصار لـ Table Data ، وذلك لأن الخلية تحتوي علي أي بيانات مثل: النصوص والروابط والصور والنماذج أو حتي جداول اخري.
مثال:

<table border="1">
<tr>
<td>صف 1, خلية1</td>
<td>صف 1, خلية 2</td>
</tr>
<tr>
<td>صف 2, خلية 1</td>
<td>صف 2, خلية 2</td>
</tr>
</table> 
نتيجة الكود:
صف 1, خلية1 صف 1, خلية 2
صف 2, خلية 1 صف 2, خلية 2

الجداول وسمة border :

السمة border هي المسؤلة عن حجم الحدود، واذا لم تحدد قيمة للسمة border سيكون الجدول بغير حدود، وطريقة اضافة الحدود هو اسناد قيمة للسمة border في وسم البداية <table> .
مثال:
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table> 

رأس الجدول Table Header :

رؤوس الجدول تحدد بالوسم <th>، أغلب المتصفحات تعرض رؤوس الجداول بخط عريض وفي المنتصف.
مثال:
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>صف1, خلية 1</td>
<td>صف1, خلية 2</td>
</tr>
<tr>
<td>صف 2, خلية 1</td>
<td>صف 2, خلية 2</td>
</tr>
</table> 
النتيجة:
Header 1 Header 2
صف1, خلية 1 صف1, خلية 2
صف 2, خلية 1 صف 2, خلية 2

الي اللقاء في الدرس القادم من دورة تعلم HTML - مدونة مينا

0 تعليقات:

إرسال تعليق