colspan ගුුණාංගය

colspan ගුණාංගය HTML වගුවක තීර ඒකාබද්ධ කිරීම පාලනය කරයි. th සහ td ටැග් වලට යොදයි.

ගන්නා අගය: 1 සිට පූර්ණ සංඛ්‍යාවකි.

කෙසේ භාවිතා කරන්නේද: මෙම ගුණාංගය ඕනෑම td හෝ th කොටුවකට එකතු කරන්න. උදාහරණයක් ලෙස, colspan අගය 2 ලෙස සකස් කළහොත් - මෙම ගුණාංගය සකසන ලද කොටුව, වගුවේ තීරු දෙකක් අල්ලා ගනී. මේ සමග දකුණු පස ඇති යාබද කොටු කොහේවත් නොයයි, අපගේ පුළුල් වූ කොටුව ඒවා පිටතට තල්ලු කර වගුව බිඳ වැටේ. මෙය සිදු නොවන පරිදි, දකුණු පසින් ඇති කොටු එකක් ඉවත් කළ යුතුය. වඩා හොඳින් තේරුම් ගැනීම සඳහා උදාහරණ බලන්න.

උදාහරණය . ඒකාබද්ධ කිරීම් නොමැති වගුව

ඒකාබද්ධ කිරීම් නොමැති වගුවක් බලමු, අපි පසුව මෙම වගුව සමඟ වැඩ කරන්නෙමු:

html<table>
  <tr>
    <td>කොටුව1</td>
    <td>කොටුව2</td>
    <td>කොටුව3</td>
  </tr>
  <tr>
    <td>කොටුව4</td>
    <td>කොටුව5</td>
    <td>කොටුව6</td>
  </tr>
  <tr>
    <td>කොටුව7</td>
    <td>කොටුව8</td>
    <td>කොටුව9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

උදාහරණය . කොටුව තීරු දෙකක් පුළුල් කරමු

අපි 1 කොටුව තීරු දෙකක් පුළුල් කිරීමට උත්සාහ කරමු, එයට colspan ගුණාංගය 2 අගයෙන් සකසමු. මේ සමග එය දකුණු පස ඇති කොටු පිටතට තල්ලු කර වගුව බිඳ වැටේ:

html<table>
  <tr>
    <td colspan="2">කොටුව1</td>
    <td>කොටුව2</td>
    <td>කොටුව3</td>
  </tr>
  <tr>
    <td>කොටුව4</td>
    <td>කොටුව5</td>
    <td>කොටුව6</td>
  </tr>
  <tr>
    <td>කොටුව7</td>
    <td>කොටුව8</td>
    <td>කොටුව9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

උදාහරණය . වගුව බිඳ නොවැටී කොටුව පුළුල් කරමු

පෙර උදාහරණයේ වගුව බිඳ වැටීමේ ගැටලුව නිවරදි කිරීමට උත්සාහ කරමු, අපගේ කොටුවට දකුණින් ඇති කොටු වලින් එකක් ඉවත් කරමු (මෙය 2 හෝ 3 කොටුවයි - වෙනසක් නැත):

html<table>
  <tr>
    <td colspan="2">කොටුව1</td>
    <td>කොටුව2</td>
  </tr>
  <tr>
    <td>කොටුව4</td>
    <td>කොටුව5</td>
    <td>කොටුව6</td>
  </tr>
  <tr>
    <td>කොටුව7</td>
    <td>කොටුව8</td>
    <td>කොටුව9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

උදාහරණය . කොටුව තීරු තුනක් පුළුල් කරමු

අපි 1 කොටුව 3 තීරු පුළුල් කර එයට colspan ගුණාංගය 3 අගයෙන් සකසමු. මේ සමග වගුව බිඳ නොවැටීම සඳහා දකුණු පසින් තවත් කොටුවක් ඉවත් කරමු:

html<table>
  <tr>
    <td colspan="3">කොටුව1</td>
  </tr>
  <tr>
    <td>කොටුව4</td>
    <td>කොටුව5</td>
    <td>කොටුව6</td>
  </tr>
  <tr>
    <td>කොටුව7</td>
    <td>කොටුව8</td>
    <td>කොටුව9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

උදාහරණය . එකවර colspan සහ rowspan

අපි 4, 5, 7 සහ 8 අංක කොටු ඒකාබද්ධ කිරීමට උත්සාහ කරමු, colspan සහ rowspan ගුණාංග භාවිතා කරමින් (පෙර ඒකාබද්ධ කිරීම් වගුවෙන් ඉවත් කරමු):

html<table>
  <tr>
    <td colspan="3">කොටුව1</td>
  </tr>
  <tr>
    <td colspan="2" rowspan="2">කොටුව4</td>
    <td>කොටුව6</td>
  </tr>
  <tr>
    <td>කොටුව9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

මේවාත් බලන්න