تعيين الأعمدة 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>

الدرس السابق الدرس التالي