رؤوس جداول HTML
يمكن أن تحتوي جداول HTML على رؤوس لكل عمود أو صف ، أو للعديد من الأعمدة / الصفوف.
| إميل | توبيا | لينوس |
|---|---|---|
| 8:00 | ||
|---|---|---|
| 9:00 | ||
| 10:00 | ||
| 11:00 | ||
| 12:00 | ||
| 13:00 |
| MON | الثلاثاء | تزوج | تجميع | جمهورية مقدونيا | |
|---|---|---|---|---|---|
| 8:00 | |||||
| 9:00 | |||||
| 10:00 | |||||
| 11:00 | |||||
| 12:00 |
| ديسمبر | ||
|---|---|---|
رؤوس جداول HTML
يتم تحديد رؤوس الجدول thبالعناصر ، thويمثل كل عنصر خلية جدول.
مثال
<table>
<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>
رؤوس الجدول العمودي
لاستخدام العمود الأول كرؤوس للجدول ، حدد الخلية الأولى في كل صف thكعنصر:
مثال
<table>
<tr>
<th>Firstname</th>
<td>Jill</td>
<td>Eve</td>
</tr>
<tr>
<th>Lastname</th>
<td>Smith</td>
<td>Jackson</td>
</tr>
<tr>
<th>Age</th>
<td>94</td>
<td>50</td>
</tr>
</table>
محاذاة رؤوس الجدول
بشكل افتراضي ، تكون رؤوس الجدول غامقة وتتوسط:
| الاسم الاول | الكنية | عمر |
|---|---|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
لمحاذاة رؤوس الجدول إلى اليسار ، استخدم text-alignخاصية CSS:
مثال
th {
text-align: left;
}
رأس أعمدة متعددة
يمكن أن يكون لديك رأس يمتد على عمودين أو أكثر.
| اسم | عمر | |
|---|---|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
للقيام بذلك ، استخدم colspanالسمة على
<th>العنصر:
مثال
<table>
<tr>
<th colspan="2">Name</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>
سوف تتعلم المزيد عن colspan و rowspan في فصل Table colspan & rowspan .
الجدول التوضيحي
يمكنك إضافة تسمية توضيحية تعمل كعنوان للجدول بأكمله.
| شهر | مدخرات |
|---|---|
| كانون الثاني | $100 دولار |
| شهر فبراير | 50 دولارًا |
لإضافة تعليق إلى جدول ، استخدم <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>العلامة.