‎‎گروه بندي ستونيHTML Table Colgroup -‎

Previous >    <Next  

‎عنصر‎<colgroup>‎ براي گروه بندي ستونهاي جدول مورد استفاده قرار ميگيرد . اين ‎اين گروه از ستونها ميتوانند نماي خاصي داشته باشند.

‎‎گروه بندي ستوني جدولHTML Table Colgroup -‎

‎اگر دريك جدول بخواهيم دوستون اول داراي استايل خاصي باشند، از‎<colgroup>‎ ‎و‎<col>‎ ‎استفاده ميشود.

MON TUE WED THU FRI SAT SUN
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>‎ در آن ‎براي معرفي ستونها قرار ميگيرد.

‎عنصر‎<col>‎ داراي ويژگي ‎span‎ بوده كه تعداد ستونهاي گروه را ‎مشخص ‎مي نمايد .با ويژگي‎style‎ در عنصر ستون، ميتوان ويژگيهاي سبك را براي آنها معرفي ‎نمود .ستونهاي جدول در يگ گروه داراي سبك يكساني ميباشند.

‎

‎‎نكته ـ محدويت هاي قانوني براي ويژگي هاي گروهي وجود دارد.

‎‎مثال ـ نمونه گروه بندي ستونهاي جدول

‎ 
<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>
...

--(go to editor for change code and run)

‎

‎نكته ـ عنصر‎<colgroup>‎ بايد فرزند‎<table>‎ باشد وقبل از هر ‎عنصري از ‎جدول مثل‎<tr>‎ ، ‎<td>‎ و..قرار داشته باشد .

‎‎قوانينCSS گروه بندي Legal CSS Properties -‎

‎براي استفاده از ويژگي هايCSS در گروه بندي جدول محدويتي وجود دارد وفقط ويژگي هاي زير فعال ‎ميباشند، بقيه موارد بي اثر ميباشند .ويژگي هاي موثر مطابق زيرند:

    ‎
  1. ‎‎width‎‎
  2. ‎‎visibilty‎‎
  3. ‎‎background‎‎
  4. ‎‎border‎‎
    5. ‎

‎‎مابقي ويژگي هايCSS در گروه بندي جدول بي اثر ميباشند .

‎‎چند گروهي در جدولMultiple Col Elements -‎

‎اگر بخواهيد ستونهاي جدول را براي تنظيم استايل متفاوت طبقه بندي كنيد، ميتوانيد عنصر ‎<col>‎‎را در ‎<colgroup>‎‎مطابق نياز تكرار نمائيد .

‎‎مثال ـ نمونه استفاده چندگروهي در جدول

‎ 
<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>
...

--(go to editor for change code and run)

‎‎گروه خاليEmpty Colgroup -‎

‎در صورتيكه گروهي از جدول بدون ويژگيCSS باشد آن گروه را تهي مي نامند .اگر بخواهيم ستونهاي ‎مياني جدول تنظيم استايل شود، مجبور خواهيم بود كه از گروه تهي استفاده نمائيم.

‎‎مثال ـ نمونه تنظيم استايل در ستونهاي مياني

‎ 
<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>
...

--(go to editor for change code and run)

‎‎در اين مثال سه ستون اول جدول جزو گروه اول كه تهي است، ميباشند.

‎‎مخفي نمودن ستونهاHide Columns -‎

‎ميتوان گروه ستونها را با‎visibilty:collapse‎ كه در ويژگي‎style‎ ‎،معرفي ميشود

‎‎پنهان نمود .اين ويژگي در تگ‎<col>‎ بايد اعلام شود .

‎‎مثال ـ نمونه پنهان كردن ستونهاي جدول

‎ 
<colgroup>
    <col span="2">
    <col span="3" style="visibility: collapse">
  </colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...

--(go to editor for change code and run)

Previous >    <Next