HTML Table Headers
-
في هذه المقالة بنتعرف على تطبيق header في الجدول في HTML، بنحكي عن الطرق المختلفة لتنفيذها وتغير النمط Style، ويمكن تطبيق header على أي جزء من الجدول ممكن الجدول كامل او ممكن column او Row وممكن لعدد من column او Row
تطبيق header على جميع الجدول :
مثل ما تعلمنا في الدروس السابقة لتطبيق header على جميع الجدول يتم عن طريق اضاقة Row اول الجدول وبعدها نضيف <th>
شوف المثال التالي :
<!DOCTYPE html>
<html>
<head>
<title>My favicon Icon</title>
<link rel="icon" type="image/x-icon" href="favicon.jpg">
<style>
table{
width: 100%;
height: 100vh;
}
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
th {
background-color: gray;
border-color: brown;
width: 50%;
}
td {
background-color: gainsboro;
}
</style>
</head>
<body>
<table dir="rtl">
<tr><th >نوع السيارة</th><th>الموديل</th></tr>
<tr>
<td>BMW</td>
<td>2022</td>
</tr>
<tr>
<td>Mercedes</td>
<td>2021</td>
</tr>
<tr>
<td>Honda</td>
<td>2022</td>
</tr>
</table>
</body>
</html>
تطبيق header بشكل عمودي Vertical
لتطبيق header بشكل عمودي Vertical لازم يكون اول عمود Cell في الصف من نوع header، وحتي نفهم الموضوع طبق الكود التالي في صفحة HTML
<!DOCTYPE html>
<html>
<head>
<title>My favicon Icon</title>
<link rel="icon" type="image/x-icon" href="favicon.jpg">
<style>
table{
width: 100%;
}
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
th {
background-color: gray;
border-color: brown;
width: 50%;
}
td {
background-color: gainsboro;
}
</style>
</head>
<body>
<table dir="rtl">
<tr><th >نوع السيارة</th><td>BMW</td>
<td>Mercedes</td>
<td>Honda</td>
</tr>
<tr><th>الموديل</th><td>2022</td>
<td>2021</td>
<td>2022</td>
</tr>
</table>
</body>
</html>
النتيجة :
تطبيق Header على اكثر من Columns
يمكن تطبيق Header على اكثر من columns باستخدام الامر colspan
طبق المثال التالي:
<!DOCTYPE html>
<html>
<head>
<title>My favicon Icon</title>
<link rel="icon" type="image/x-icon" href="favicon.jpg">
<style>
table{
width: 100%;
}
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
th {
background-color: gray;
border-color: brown;
width: 50%;
}
td {
background-color: gainsboro;
}
</style>
</head>
<body>
<table dir="rtl">
<tr><th colspan="2">اسم الطالب</th><th>المعدل</th></tr>
<tr><td>حاتم</td><td>محمد</td><td>90</td>
</tr>
<tr><td>ليان</td><td>حاتم</td><td>99</td>
</tr>
</table>
</body>
</html>
النتيحة
لاحظ اول عمودين تم ادراجهم تحت header واحد باسم "اسم الطالب"
الامر colspan يكتب بالشكل التالي :
colspan="2"
القيمة 2 هي عدد الأعمدة المطلوب دمجها
لاحظ ان عدد Cells في السطر الأول يساوي 2 ، بيمنا في السطور اللاحقة يساوي 3 والسبب ان السطر الأول يحتوي على 3 cells لكن او 2 cells تم دمجهم.
ما تنسي تنتبه لهاي النقطة لان في حال كان العدد غير مناسب مع colspan ممكن يعمل مشكلة.
Table Caption
Caption تستخدم لإضافة اسم توضيحي للجدول كامل، ويكون فوق Header
طبق المثال التالي:
<!DOCTYPE html>
<html>
<head>
<title>My favicon Icon</title>
<link rel="icon" type="image/x-icon" href="favicon.jpg">
<style>
table{
width: 100%;
}
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
th {
background-color: gray;
border-color: brown;
width: 50%;
}
td {
background-color: gainsboro;
}
</style>
</head>
<body>
<table dir="rtl"><caption>التقرير الفصلي للطلاب</caption><tr><th colspan="2">اسم الطالب</th><th>المعدل</th></tr>
<tr><td>حاتم</td><td>محمد</td><td>90</td>
</tr>
<tr><td>ليان</td><td>حاتم</td><td>99</td>
</tr>
</table>
</body>
</html>
النتيجة :
ملاحظة : يجب وضع
<caption> tag
مباشرة بعد
<table> tag
اترك تعليقك