HTML Table Colspan & Rowspan & Colgroup
-
في هذه المقالة بنتعرف على تطبيق colspan و rowspan و colgroup في الجدول في HTML، بنحكي عن الطرق المختلفة لتنفيذها Row
تمام نبدأ ب colgroup
يستخدم هذا element لغرض إضافة تصميم على اعمده محدده في الجدول.
تمام نوخذ مثال :
اذا كان المطلوب إضافة تميز لأول 2 columns في الجدول بنستخدم الكود:
<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
وحتى نفهم الموضوع طبق المثال التالي:
<!DOCTYPE html>
<html>
<head>
<title>My favicon Icon</title>
<link rel="icon" type="image/x-icon" href="favicon.jpg">
<style>
table {
width: 100%;
border-spacing: 50px;
}
table, th, td {
border: 1px solid red;
border-collapse: collapse;
}
th {
background-color: gray;
border-color: brown;
}
tr {
border-bottom: 1px solid rgb(138, 136, 136);
}
tr:hover {background-color: #b9bbbb;}
</style>
</head>
<body>
<table dir="rtl"><caption>التقرير الفصلي للطلاب</caption><colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr><th >اسم الطالب</th><th>المعدل</th><th>العمر</th><th>العنوان</th></tr>
<tr><td>حاتم</td><td>90</td>
<td>42</td><td>الرياض</td></tr>
<tr><td>ليان</td><td>99</td>
<td>10</td><td>الرياض</td></tr>
<tr><td>لارين</td><td>99</td>
<td>7</td><td>الرياض</td></tr>
<tr><td>ملك</td><td>99</td>
<td>1</td><td>الرياض</td></tr>
</table>
</body>
</html>
- يستخدم <colgroup> ك container للأعمدة المطلوب تميزيها
- يستخدم <col> لتحديد مجموعة الأعمدة المطلوب تميزيها
- يستخدم span لتحديد عدد الأعمدة المطلوب تميزيها
- يستخدم style لتحديد الخصائص المطلوب تطبيقها
يمكن تطبيق عدد محدود من الخصائص على colgroup وهي :
- width
- visibility
- background
- border
تطبيق <colgroup> على أكثر من مجموعه
لتطبيق ذلك المطلوب تحديد المجموعات فقط
<colgroup>
<col span="2" style="background-color: #D6EEEE">
<col span="3" style="background-color: pink">
</colgroup>
في هذا الكود بنعمل تطبيق على اول 2 columns بلون D6EEEE# وبعدها تطبيق على 3 columns التالية اللون pink
طبق المثال التالي :
<!DOCTYPE html>
<html>
<head>
<title>My favicon Icon</title>
<link rel="icon" type="image/x-icon" href="favicon.jpg">
<style>
table {
width: 100%;
border-spacing: 50px;
}
table, th, td {
border: 1px solid red;
border-collapse: collapse;
}
th {
background-color: gray;
border-color: brown;
}
tr {
border-bottom: 1px solid rgb(138, 136, 136);
}
tr:hover {background-color: #b9bbbb;}
</style>
</head>
<body>
<table dir="rtl"><caption>التقرير الفصلي للطلاب</caption><colgroup>
<col span="2" style="background-color: #D6EEEE">
<col span="4" style="background-color: #b3901e">
</colgroup>
<tr><th >اسم الطالب</th><th>المعدل</th><th>العمر</th><th>العنوان</th></tr>
<tr><td>حاتم</td><td>90</td>
<td>42</td><td>الرياض</td></tr>
<tr><td>ليان</td><td>99</td>
<td>10</td><td>الرياض</td></tr>
<tr><td>لارين</td><td>99</td>
<td>10</td><td>الرياض</td></tr>
<tr><td>ملك</td><td>99</td>
<td>1</td><td>الرياض</td></tr>
</table>
</body>
</html>
اذا كان المطلوب عدم تطبيق الخصائص على اول 2 columns وتطبيق على 3 columns التالية
حتي نطبق هذ الكلام بنستخدم:
Empty Colgroups
طبق الكود التالي :
<!DOCTYPE html>
<html>
<head>
<title>My favicon Icon</title>
<link rel="icon" type="image/x-icon" href="favicon.jpg">
<style>
table {
width: 100%;
border-spacing: 50px;
}
table, th, td {
border: 1px solid red;
border-collapse: collapse;
}
th {
background-color: gray;
border-color: brown;
}
tr {
border-bottom: 1px solid rgb(138, 136, 136);
}
tr:hover {background-color: #b9bbbb;}
</style>
</head>
<body>
<table dir="rtl"><caption>التقرير الفصلي للطلاب</caption><colgroup>
<col span="2">
<col span="4" style="background-color: #b3901e">
</colgroup>
<tr><th >اسم الطالب</th><th>المعدل</th><th>العمر</th><th>العنوان</th></tr>
<tr><td>حاتم</td><td>90</td>
<td>42</td><td>الرياض</td></tr>
<tr><td>ليان</td><td>99</td>
<td>10</td><td>الرياض</td></tr>
<tr><td>لارين</td><td>99</td>
<td>10</td><td>الرياض</td></tr>
<tr><td>ملك</td><td>99</td>
<td>1</td><td>الرياض</td></tr>
</table>
</body>
</html>
إخفاء الأعمدة Hide Columns
يمكن إخفاء مجموعة الاعمدة باستخدام
<colgroup>
<col span="2">
<col span="3" style="visibility: collapse">
</colgroup>
تطبيق Colspan
الفكرة ممكن تقسيم الأعمدة والصفوف الى اقسام او دمجها من خلال هذه الأكواد:
دمج اكثر من عمود في عمود واحد بنستخدم الامر
colspan="2"
طبق الكود التالي :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
<tr><th colspan="2">اسم الطالب</th><th>العمر</th></tr>
<tr><td>حاتم</td><td>عبدالرؤوف</td><td>42</td>
</tr>
<tr><td>ليان</td><td>حاتم</td><td>10</td>
</tr>
</table>
</body>
</html>
شغل الصفحة وشوف النتيجة
تم تطبيق اسم الطالب فوق 2 columns
تطبيق Rowspan
تستخدم لدمج مجموعة من Rows مع بعض
طبق المثال التالي :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
<tr><th>اسم الطالب</th><td>حاتم</td></tr>
<tr><th rowspan="2">الهاتف</th><td>00000000</td>
</tr>
<tr>
<td>00000000</td>
</tr>
</table>
</body>
</html>
شوف النتيجة
rowspan="2"
اترك تعليقك