HTML Table Colgroup - Jassif Team

HTML அட்டவணை கால்குரூப்

<colgroup> உறுப்பு அட்டவணையின் குறிப்பிட்ட நெடுவரிசைகளை பாணியமைக்க பயன்படுத்தப்படுகிறது.

HTML அட்டவணை கால்குரூப்

அட்டவணையின் முதல் இரண்டு நெடுவரிசைகளை பாணியமைக்க விரும்பினால், <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> உறுப்பால் குறிப்பிடப்படுகிறது.

span பண்புக்கூறு எத்தனை நெடுவரிசைகள் பாணியைப் பெறுகின்றன என்பதைக் குறிக்கிறது.

style பண்புக்கூறு நெடுவரிசைகளுக்கு கொடுக்க வேண்டிய பாணியைக் குறிக்கிறது.

எடுத்துக்காட்டு

<table>
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
...

📝 குறிப்பு:

<colgroup> குறிச்சொல் <table> உறுப்பின் குழந்தையாக இருக்க வேண்டும் மற்றும் மற்ற எந்த அட்டவணை உறுப்புகளுக்கும் முன்னால் வைக்கப்பட வேண்டும், <thead>, <tr>, <td> போன்றவை, ஆனால் <caption> உறுப்புக்குப் பிறகு, இருந்தால்.

சட்டபூர்வமான CSS பண்புகள்

கால்குரூப்பில் பயன்படுத்த அனுமதிக்கப்படும் CSS பண்புகளின் மிகவும் குறைந்த தேர்வு மட்டுமே உள்ளது:

width பண்பு
visibility பண்பு
background பண்புகள்
border பண்புகள்

மற்ற அனைத்து CSS பண்புகளும் உங்கள் அட்டவணைகளில் எந்த விளைவையும் கொண்டிருக்காது.

பல கால் உறுப்புகள்

வெவ்வேறு பாணிகளுடன் பல நெடுவரிசைகளை பாணியமைக்க விரும்பினால், <colgroup> உள்ளே ஒன்றுக்கு மேற்பட்ட <col> உறுப்புகளைப் பயன்படுத்தவும்:

எடுத்துக்காட்டு

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

MON	TUE	WED	THU	FRI	SAT	SUN
1	2	3	4	5	6	7

வெற்று கால்குரூப்புகள்

அட்டவணையின் நடுவில் உள்ள நெடுவரிசைகளை பாணியமைக்க விரும்பினால், முந்தைய நெடுவரிசைகளுக்கு ஒரு "வெற்று" <col> உறுப்பை (பாணிகள் இல்லாமல்) செருகவும்:

எடுத்துக்காட்டு

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

MON	TUE	WED	THU	FRI	SAT	SUN
1	2	3	4	5	6	7

நெடுவரிசைகளை மறைத்தல்

visibility: collapse பண்புடன் நெடுவரிசைகளை மறைக்கலாம்:

எடுத்துக்காட்டு

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

MON	TUE	WED	THU	FRI	SAT	SUN
1	2	3	4	5	6	7

(மூன்று நெடுவரிசைகள் மறைக்கப்பட்டுள்ளன)