الجداول داخل لغة HTML

عناصر تنسيق النص داخل لغة HTML


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

مثال:

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

ملاحظة: 

إن عناصر td هي عبارة عن حاويات للبيانات الخاصة بالجدول.

يُمكن أن تحتوي على جميع أنواع عناصر HTML؛ النص والصور والقوائم والجداول الأخرى إلخ.

إضافة حد إلي جدول HTML


إذا لم تُحدد حداً للجدول، فسيتم عرضه بدون حدود.

يتم تعيين حد بإستخدام خاصية حد CSS.

مثال:

table, th, td {
border: 1px solid black;
}

تذكر تعريف حدود لكل من الجدول وخلايا الجدول.

دمج الحدود داخل الجدول

إذا كنت تريد أن يتم دمج الحدود إلى حد واحد، فأضف الخاصية التي تحتوي على الحد الأقصى لعناصر CSS.
مثال:

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}


إضافة فراغ "حشو" داخل الجدول


تحدد مساحة الخلايا المساحة بين محتوى الخلية وحدودها.

إذا لم تقم بتحديد الحشوة أو الفراغ، سيتم عرض خلايا الجدول بدون الحشو.

لتعيين الحشو، إستخدم خاصية padding CSS.

مثال:

th, td { 
padding: 15px;
}


محاذاة العناوين من اليسار

بشكل إفتراضي، تكون عناوين الجدول غامقة ويتم توسيطها.
لمحاذاة عناوين الجداول إلى اليسار، إستخدم خاصية محاذاة النص CSS text-align.
مثال:

th {

text-align: left;

}


تباعد الحدود داخل الجدول

تباعد الحدود يُحدد المسافة بين الخلايا.
لتعيين خاصية تباعد الحدود لجدول، إستخدم خاصية CSS border-spacing:
مثال:

table {

border-spacing: 5px;

}


ملاحظة: إذا كان الجدول قد قام بتقليص الحدود، فإن تباعد الحدود ليس له أي تأثير.

جعل الخلية تمتد في العديد من الأعمدة

لجعل الخلية تمتد لأكثر من عمود واحد، إستخدم السمة colspan.
مثال:


<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>


جعل الخلية تمتد في العديد من الصفوف

لجعل الخلية تمتد لأكثر من صف واحد، إستخدم سمة rowspan.
مثال:

<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>


إضافة تسمية توضيحية


لإضافة تسمية توضيحية إلى جدول HTML، إستخدم علامة <caption>.

مثال:

<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>


ملاحظة: يجب إدخال علامة <caption> مباشرة بعد علامة <table>.

إضافة نمط خاص للجدول

لتحديد نمط خاص للجدول، أضف سمة معرف id إلى الجدول.
مثال:



<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>





الآن يُمكنك تحديد نمط خاص لهذا الجدول.
مثال:

table#t01 {
width: 100%;
background-color: #f1f1c1;
}


إضافة المزيد من الأنماط:
مثال:

table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}


ملخص الجداول داخل لغة HTML

  • إستخدم عنصر HTML table لتحديد جدول.
  • إستخدم عنصر HTML tr لتحديد صف داخل الجدول.
  • إستخدم عنصر td HTML لتحديد بيانات داخل الجدول.
  • إستخدم عنصر HTML th لتحديد عنوان للجدول.
  • إستخدم عنصر HTML caption لتحديد عنوان توضيحي للجدول.
  • إستخدم خاصية حدود CSS لتعريف حد.
  • إستخدم خاصية تقليص الحدود CSS لطي حدود الخلية.
  • إستخدم خاصية padding CSS لإضافة الحشو إلى الخلايا.
  • إستخدم خاصية CSS-align text لمحاذاة نص الخلية.
  • إستخدم خاصية تباعد CSS text-align لتعيين التباعد بين الخلايا.
  • إستخدم سمة colspan لجعل خلية تمتد في العديد من الأعمدة.
  • إستخدم سمة rowspan لجعل خلية تمتد في العديد من الصفوف.
  • إستخدم السمة id لتعريف جدول واحد بشكل فريد.


0 التعليقات

إرسال تعليق