نموذج جدول HTML | دروس HTML5

إنشاء الجداول بتنسيق HTML

أفضل طريقة لعرض البيانات بشكل أفضل هي استخدام الجداول. في هذا  الدرس، ستتعلم كيفية إنشاء جداول بتنسيق 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>

 إضافة حدًا إلى الجدول 

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

يتم تعريف الخط الدائري باستخدام خاصية الحدود في CSS:

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

خاصية طي الحدود في الجداول 

الخط المستدير للجداول والخلايا ينشئ أسطرًا منفصلة لكل من الجدول والخلايا. في هذه الحالة، يُنظر إلى الخطوط على أنها أزواج. لحل هذه المشكلة، يمكنك استخدام خاصية border-collapse في CSS:

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

إضافة مساحة لخلايا الجدول

المساحة المتروكة في الخلية هي المسافة بين محتويات الخلية والخط المحيط بها.

إذا لم تحدد مساحة متروكة للخلايا، فسيتم عرضها بدون مساحة متروكة.

نستخدم خاصية padding في CSS لتعيين المساحة المتروكة.

th, td {
padding: 15px;
}

محاذاة العناوين في الجداول

بشكل افتراضي، تكون العناوين بالخط العريض والجداول المركزية.

نستخدم خاصية محاذاة النص في CSS لمحاذاة النص في العناوين.

th {
text-align: left;
}

استخدم تباعد الحدود في الجداول 

تباعد الحدود يحدد المسافة بين الخلايا في الجداول.

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>

أضف التسمية التوضيحية إلى الجدول

استخدم علامة <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>

نمط محدد للجدول 

استخدم السمة 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;
}

كلمات مفتاحية: