تعيين الأعمدة HTML Table Colgroup

الدرس السابق الدرس التالي
يُستخدم عنصر <colgroup> لتصميم أعمدة معينة في الجدول.
تصميم اعمدة معينة  HTML Table Colgroup
إذا كنت تريد تصميم العمودين الأولين من الجدول ، فاستخدم عنصري <colgroup> و <col>.
الاحد الاثنين الثلاثاء الاربعاء الخميس السبت الجمعة
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28

يجب استخدام عنصر <colgroup> كحاوية لمواصفات العمود.
يتم تحديد كل مجموعة باستخدام عنصر <col>.
تحدد السمة span عدد الأعمدة التي تحصل على التنسيق ب style
تحدد سمة style  لإعطاء الأعمدة التنسيق .
ملاحظة: هناك مجموعة محدودة للغاية من خصائص CSS القانونية لمجموعات colgroups.
مثال
 
 <!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>
 
<h2> colgroup </h2><p> أضف colgroup مع عنصر col يمتد على عمودين لتحديد نمط للعمودين: </p>
<table style="width: 100%;">
<colgroup>
  <col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
</table>
 
</body>
</html>
 
 
1

ملاحظة: يجب أن تكون علامة <colgroup> تابعة لعنصر <table> ويجب وضعها قبل أي عناصر جدول أخرى ، مثل <thead> و <tr> و <td> وما إلى ذلك ، ولكن بعد عنصر <caption> ، إذا كان موجودا.
خصائص CSS القانونية Legal CSS Properties
لا يوجد سوى مجموعة محدودة جدًا من خصائص CSS المسموح باستخدامها في مجموعة colgroup:
  • width
  • visibility
  • background
  • border
لن يكون لجميع خصائص CSS الأخرى أي تأثير على جداولك.
عناصر العمود المتعددة Multiple Col Elements
إذا كنت تريد تصميم المزيد من الأعمدة بأنماط مختلفة ، فاستخدم المزيد من عناصر <col> داخل <colgroup>:
مثال
  
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>
<h2> عناصر العمود المتعددة </h2>
<p> أضف عدة عناصر col في مجموعةcolgroup:</p>
<table style="width: 100%;">
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
    <col span="3" style="background-color: pink">
  </colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
</table>
 
</body>
</html>

مجموعات Colgroups فارغة Empty Colgroups
إذا كنت تريد style  الأعمدة في منتصف الجدول ، فقم بإدراج عنصر <col> "فارغ" (بدون أنماط style) للأعمدة قبل:
مثال
  
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>
 
<h2> مجموعات Colgroups فارغة </h2>
<p> أضف عناصر عمود "فارغة" تمثل الأعمدة قبل الأعمدة التي تريد تنسيقها: </p>
<table style="width: 100%;">
<colgroup>
  <col span="3">
  <col span="2" style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
</table>
</body>
</html>

إخفاء الأعمدة Hide Columns
يمكنك إخفاء الأعمدة بإمكانية الرؤية: خاصية الطي:
مثال
  
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>
 
<h2> إخفاء الأعمدة </h2>
<p> يمكنك إخفاء أعمدة معينة باستخدام خاصية الرؤية: </p>
 
<table style="width: 100%;">
<colgroup>
    <col span="2">
    <col span="3" style="visibility: collapse">
  </colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
</table>
<p><b> ملاحظة: </ b> لا يتم طي أعمدة الجدول بشكل صحيح في متصفحات Safari.</p>
</body>
</html>
الدرس السابق الدرس التالي
القسم: