டேபிள் செல் திணிப்பு மற்றும் இடைவெளியை அமைக்க CSS ஐப் பயன்படுத்துதல்

டேபிள் செல் திணிப்பு மற்றும் இடைவெளியை அமைக்க CSS ஐப் பயன்படுத்துதல்
Lucas Simon
ஞாயிறு, 30 ஜூன், 2024 ’அன்று’ பிற்பகல் 11:57:59
CSS

CSS உடன் ஸ்டைலிங் டேபிள் பேடிங் மற்றும் ஸ்பேசிங்

ஒரு HTML அட்டவணையில், `செல்பேடிங்` மற்றும் `செல்ஸ்பேசிங்` ஆகிய பண்புக்கூறுகள் அட்டவணை கலங்களுக்குள்ளும் இடையிலும் இடைவெளியை அமைக்க பாரம்பரியமாகப் பயன்படுத்தப்படுகின்றன. இருப்பினும், வலை மேம்பாடு வளர்ச்சியடையும் போது, ​​இந்த ஸ்டைலிங் நோக்கங்களுக்காக CSS ஐப் பயன்படுத்துவது மிகவும் பரவலாகி, சிறந்த நெகிழ்வுத்தன்மையையும் கட்டுப்பாட்டையும் வழங்குகிறது.

CSS ஐப் பயன்படுத்தி `செல்பேடிங்` மற்றும் `செல்ஸ்பேசிங்` ஆகியவற்றின் விளைவுகளை எவ்வாறு பிரதியெடுப்பது என்பதை இந்தக் கட்டுரை ஆராய்கிறது. இந்த முறைகளைப் புரிந்துகொள்வதன் மூலம், டெவலப்பர்கள் நவீன இணையத் தரங்களைக் கடைப்பிடிக்கும் போது, ​​மேலும் பராமரிக்கக்கூடிய மற்றும் அளவிடக்கூடிய குறியீட்டை அடைய முடியும்.

கட்டளை விளக்கம்
border-collapse: separate; பார்டர்-இடைவெளியைப் பயன்படுத்த அனுமதிக்கும், பார்டர்-சிதைவு சொத்தை இயல்புநிலைக்கு மீட்டமைக்கிறது.
border-spacing அட்டவணையில் அருகிலுள்ள கலங்களின் எல்லைகளுக்கு இடையே உள்ள தூரத்தைக் குறிப்பிடுகிறது.
padding HTML செல்பேடிங் பண்புக்கூறைப் போலவே டேபிள் கலங்களுக்குள் திணிப்பை அமைக்கிறது.
querySelectorAll ஆவணத்தில் குறிப்பிட்ட CSS தேர்வி(கள்) உடன் பொருந்தக்கூடிய அனைத்து உறுப்புகளையும் தேர்ந்தெடுக்கும்.
forEach querySelectorAll இலிருந்து NodeList உடன் பொதுவாகப் பயன்படுத்தப்படும் ஒவ்வொரு வரிசை உறுப்புக்கும் வழங்கப்பட்ட செயல்பாட்டை ஒருமுறை செயல்படுத்துகிறது.
style ஜாவாஸ்கிரிப்ட் வழியாக CSS பண்புகளுக்கு மாறும் புதுப்பிப்புகளை அனுமதிக்கும் ஒரு உறுப்பின் நடை பண்புக்கூறைப் பெறுகிறது அல்லது அமைக்கிறது.

டேபிள் பேடிங் மற்றும் ஸ்பேசிங்கிற்கான CSS ஐ செயல்படுத்துதல்

முதல் ஸ்கிரிப்ட்டில், விளைவுகளைப் பிரதிபலிக்க அடிப்படை HTML மற்றும் CSS ஐப் பயன்படுத்துகிறோம் cellpadding மற்றும் cellspacing பண்புகளை. அமைப்பதன் மூலம் border-collapse செய்ய separate, டேபிள் செல்கள் ஒரு எல்லைக்குள் சரிந்துவிடாமல் இருப்பதை உறுதிசெய்கிறோம், இது கலங்களுக்கு இடையே உள்ள இடைவெளியை வரையறுக்க அனுமதிக்கிறது border-spacing சொத்து. இது அமைப்பதற்குச் சமம் cellspacing="1" HTML இல். இதேபோல், தி padding உள்ளே உள்ள சொத்து td மற்றும் th தேர்வாளர்கள் பிரதிபலிக்கிறார்கள் cellpadding="1" ஒவ்வொரு கலத்திலும் 1-பிக்சல் பேடிங்கை அமைப்பதன் மூலம் பண்புக்கூறு. இந்த அணுகுமுறை CSS மூலம் விரும்பிய இடைவெளியை அடைய ஒரு நேரடியான முறையை வழங்குகிறது, இது குறியீட்டின் நெகிழ்வுத்தன்மை மற்றும் பராமரிப்பை மேம்படுத்துகிறது.

இரண்டாவது ஸ்கிரிப்ட் CSS உடன் ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி ஒரு டைனமிக் முறையைக் காட்டுகிறது. HTML இல் ஆரம்ப அட்டவணை அமைப்பு மற்றும் அடிப்படை வடிவமைப்பை வரையறுத்த பிறகு, அட்டவணையின் இடைவெளியை மாறும் வகையில் சரிசெய்ய ஜாவாஸ்கிரிப்டைப் பயன்படுத்துகிறோம். தி document.getElementById அட்டவணையை அதன் ஐடி மூலம் தேர்ந்தெடுக்க செயல்பாடு பயன்படுத்தப்படுகிறது. பின்னர் நாங்கள் அட்டவணையை அமைத்தோம் borderSpacing சொத்து '1px' க்கு அதே விளைவை அடைய cellspacing பண்பு. அடுத்து, நாங்கள் பயன்படுத்துகிறோம் querySelectorAll அனைத்தையும் தேர்ந்தெடுக்க td மற்றும் th அட்டவணையில் உள்ள கூறுகள், மற்றும் forEach 1-பிக்சலைப் பயன்படுத்துவதன் மூலம், இந்த உறுப்புகளை மீண்டும் மீண்டும் செய்யும் முறை padding ஒவ்வொருவருக்கும். CSS செயல்பாட்டை மேம்படுத்த ஜாவாஸ்கிரிப்ட் எவ்வாறு பயன்படுத்தப்படலாம் என்பதை இந்த ஸ்கிரிப்ட் காட்டுகிறது, குறிப்பிட்ட நிபந்தனைகள் அல்லது பயனர் தொடர்புகளின் அடிப்படையில் டேபிள் ஸ்டைலிங்கிற்கு மாறும் புதுப்பிப்புகளை அனுமதிக்கிறது.

டேபிள் செல் திணிப்பு மற்றும் இடைவெளியை CSS ஆக மாற்றுகிறது

HTML மற்றும் CSS ஐப் பயன்படுத்துதல்

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      border-collapse: separate; /* Resets spacing */
      border-spacing: 1px; /* Equivalent to cellspacing="1" */
    }
    td, th {
      padding: 1px; /* Equivalent to cellpadding="1" */
    }
  </style>
</head>
<body>
  <table>
    <tr><th>Header 1</th><th>Header 2</th></tr>
    <tr><td>Data 1</td><td>Data 2</td></tr>
  </table>
</body>
</html>

டேபிள் பேடிங் மற்றும் இடைவெளியை சரிசெய்வதற்கான டைனமிக் அப்ரோச்

ஜாவாஸ்கிரிப்ட் மற்றும் CSS ஐப் பயன்படுத்துதல்

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      border-collapse: separate;
    }
    td, th {
      padding: 1px;
    }
  </style>
</head>
<body>
  <table id="myTable">
    <tr><th>Header 1</th><th>Header 2</th></tr>
    <tr><td>Data 1</td><td>Data 2</td></tr>
  </table>
  <script>
    const table = document.getElementById('myTable');
    table.style.borderSpacing = '1px';
    const cells = table.querySelectorAll('td, th');
    cells.forEach(cell => {
      cell.style.padding = '1px';
    });
  </script>
</body>
</html>

CSS உடன் டேபிள் ஸ்டைலிங்கிற்கான மேம்பட்ட நுட்பங்கள்

அடிப்படை திணிப்பு மற்றும் இடைவெளிக்கு அப்பால், HTML அட்டவணைகளை வடிவமைக்க CSS பல்வேறு மேம்பட்ட நுட்பங்களை வழங்குகிறது. அத்தகைய ஒரு நுட்பம் போலி வகுப்புகளின் பயன்பாடு ஆகும் :nth-child மற்றும் :nth-of-type குறிப்பிட்ட வரிசைகள் அல்லது நெடுவரிசைகளை வடிவமைக்க. உதாரணமாக, பயன்படுத்தி tr:nth-child(even) சீரான வரிசைகளுக்கு நடைகளைப் பயன்படுத்தலாம், இது வாசிப்புத்திறனை மேம்படுத்தும் மாற்று வரிசை நிழலை அனுமதிக்கிறது. பெரிய தரவுத்தொகுப்புகளுக்கு இந்த முறை மிகவும் பயனுள்ளதாக இருக்கும், அங்கு காட்சி வேறுபாடு முக்கியமானது. மற்றொரு மேம்பட்ட முறை பயன்பாட்டை உள்ளடக்கியது CSS Grid சிக்கலான அட்டவணை அமைப்புகளை உருவாக்க. CSS கட்டம் பொதுவாக தளவமைப்பு நோக்கங்களுக்காகப் பயன்படுத்தப்பட்டாலும், கலங்கள், வரிசைகள் மற்றும் நெடுவரிசைகளின் நிலைப்பாடு மற்றும் இடைவெளியைக் கட்டுப்படுத்த அட்டவணை உறுப்புகளுக்கும் இது பயன்படுத்தப்படலாம்.

கூடுதலாக, CSS மாற்றங்கள் மற்றும் அனிமேஷன்களை டேபிள் ஸ்டைலிங்குடன் இணைப்பது பயனர் அனுபவத்தை கணிசமாக மேம்படுத்தும். மாற்றங்களைப் பயன்படுத்துவதன் மூலம் hover அட்டவணை வரிசைகள் அல்லது கலங்களில் விளைவுகள், நீங்கள் மிகவும் ஊடாடும் மற்றும் பார்வைக்கு ஈர்க்கும் அட்டவணையை உருவாக்கலாம். எடுத்துக்காட்டாக, மிதவையில் சிறிது வண்ண மாற்றம் அல்லது அளவிடுதல் விளைவைச் சேர்ப்பது, அட்டவணையுடன் தொடர்பு கொள்ளும் பயனர்களுக்கு உடனடி கருத்தை வழங்குகிறது. மேலும், அந்நியப்படுத்துதல் media queries அட்டவணைகள் பதிலளிக்கக்கூடியதாகவும் பல்வேறு சாதனங்களில் அணுகக்கூடியதாகவும் இருப்பதை உறுதி செய்கிறது. டெஸ்க்டாப்கள், டேப்லெட்டுகள் மற்றும் மொபைல் சாதனங்களில் நிலையான பயனர் அனுபவத்தை உறுதிசெய்து, திரையின் அளவை அடிப்படையாகக் கொண்டு டேபிள் தளவமைப்பு, எழுத்துரு அளவு மற்றும் செல் பேடிங்கைச் சரிசெய்ய மீடியா வினவல்கள் உங்களை அனுமதிக்கின்றன.

CSS உடன் டேபிள் ஸ்டைலிங் குறித்த பொதுவான கேள்விகள் மற்றும் பதில்கள்

  1. அட்டவணையில் மாற்று வரிசை வண்ணங்களை எவ்வாறு பயன்படுத்துவது?
  2. பயன்படுத்தவும் tr:nth-child(even) அல்லது tr:nth-child(odd) உங்கள் CSS இல் இலக்கு மற்றும் மாற்று வரிசைகளை வடிவமைக்கவும்.
  3. CSS உடன் டேபிளை எவ்வாறு பதிலளிக்க வேண்டும்?
  4. பயன்படுத்தவும் media queries வெவ்வேறு திரை அளவுகளின் அடிப்படையில் அட்டவணை தளவமைப்பு மற்றும் பாணிகளை சரிசெய்ய.
  5. அட்டவணைகளுக்கு CSS கட்டத்தைப் பயன்படுத்துவதன் நன்மை என்ன?
  6. CSS கட்டம் அட்டவணை உறுப்புகளின் நிலைப்படுத்தல் மற்றும் இடைவெளியின் மீது துல்லியமான கட்டுப்பாட்டை வழங்குகிறது, மேலும் சிக்கலான மற்றும் நெகிழ்வான தளவமைப்புகளை அனுமதிக்கிறது.
  7. அட்டவணை வரிசைகளில் மிதவை விளைவுகளைச் சேர்க்கலாமா?
  8. ஆம், நீங்கள் பயன்படுத்தலாம் :hover பயனர் அட்டவணை வரிசைகள் அல்லது செல்கள் மீது வட்டமிடும்போது பாணிகளைப் பயன்படுத்த போலி-வகுப்பு.
  9. ஒரு குறிப்பிட்ட நெடுவரிசையை முன்னிலைப்படுத்த CSS ஐ எவ்வாறு பயன்படுத்துவது?
  10. பயன்படுத்தவும் td:nth-child(column_number) உங்கள் அட்டவணையில் ஒரு குறிப்பிட்ட நெடுவரிசையை குறிவைத்து ஸ்டைல் ​​செய்ய.
  11. அட்டவணைகளுடன் போலி வகுப்புகளைப் பயன்படுத்துவதன் நன்மைகள் என்ன?
  12. போலி வகுப்புகள் போன்றவை :nth-child மற்றும் :nth-of-type இலக்கு ஸ்டைலிங் அனுமதிக்கும், குறிப்பிட்ட வரிசைகள் அல்லது நெடுவரிசைகளுக்கு குறிப்பிட்ட பாணிகளைப் பயன்படுத்துவதை எளிதாக்குகிறது.
  13. டேபிள் கலங்களில் அனிமேஷன்களை எவ்வாறு சேர்ப்பது?
  14. பயன்படுத்தவும் CSS animations அல்லது transitions அட்டவணை செல்களில் மாறும் விளைவுகளை உருவாக்க, பயனர் தொடர்புகளை மேம்படுத்துகிறது.
  15. அட்டவணை தலைப்புகளை மற்ற அட்டவணையில் இருந்து வித்தியாசமாக வடிவமைக்க முடியுமா?
  16. ஆம், நீங்கள் பயன்படுத்தலாம் th அட்டவணை தலைப்புகளுக்கு குறிப்பிட்ட பாணிகளைப் பயன்படுத்த தேர்வாளர், அவற்றை மற்ற அட்டவணை கலங்களிலிருந்து வேறுபடுத்துகிறார்.

அட்டவணை இடைவெளிக்கான CSS பற்றிய இறுதி எண்ணங்கள்

அட்டவணையை நிர்வகிக்க CSS ஐப் பயன்படுத்துதல் cellpadding மற்றும் cellspacing பாரம்பரிய HTML பண்புக்கூறுகளுக்கு நவீன மற்றும் திறமையான மாற்றீட்டை வழங்குகிறது. போன்ற CSS பண்புகளைப் பயன்படுத்துவதன் மூலம் border-spacing மற்றும் padding, அதிக நெகிழ்வுத்தன்மை மற்றும் கட்டுப்பாட்டுடன் அதே காட்சி விளைவுகளை நீங்கள் அடையலாம். இந்த முறை உங்கள் குறியீட்டின் பராமரிப்பு மற்றும் அளவிடுதல் ஆகியவற்றை மேம்படுத்துகிறது, உங்கள் அட்டவணைகள் வெவ்வேறு சாதனங்கள் மற்றும் திரை அளவுகள் முழுவதும் பதிலளிக்கக்கூடியதாகவும் பார்வைக்கு ஈர்க்கக்கூடியதாகவும் இருப்பதை உறுதிசெய்கிறது.