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

HTML அட்டவணைகளில் செல்பேடிங் மற்றும் செல்ஸ்பேசிங் அமைக்க CSS ஐப் பயன்படுத்துதல்
Lucas Simon
சனி, 22 ஜூன், 2024 ’அன்று’ பிற்பகல் 1:52:21
CSS

CSS அட்டவணை இடைவெளி அறிமுகம்

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

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

கட்டளை விளக்கம்
border-collapse டேபிள் பார்டர்கள் ஒரு பார்டராக சரிவதா அல்லது பிரிக்கப்பட வேண்டுமா என்பதை இந்த CSS பண்பு அமைக்கிறது.
padding கலத்தின் உள்ளடக்கத்திற்கும் அதன் எல்லைக்கும் இடையிலான இடைவெளியை வரையறுக்கிறது.
border அகலம் மற்றும் வண்ணம் உட்பட அட்டவணை கலங்களின் பார்டர் பாணியைக் குறிப்பிடுகிறது.
<th> HTML அட்டவணையில் தலைப்புக் கலத்தை வரையறுக்கிறது.
<td> HTML அட்டவணையில் நிலையான கலத்தை வரையறுக்கிறது.
width அட்டவணையின் அகலத்தைக் குறிப்பிடுகிறது.

அட்டவணை இடைவெளிக்கான CSS ஐப் புரிந்துகொள்வது

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

இரண்டாவது ஸ்கிரிப்ட், இன்லைன் CSS ஐப் பயன்படுத்தி ஒரே மாதிரியான முடிவுகளை எவ்வாறு அடைவது என்பதை விளக்குகிறது, இது முழு ஆவணத்தையும் பாதிக்காமல் குறிப்பிட்ட கூறுகளுக்கு நேரடியாக பாணிகளைப் பயன்படுத்துவதற்கு பயனுள்ளதாக இருக்கும். இன்லைன் CSS தனிப்பட்ட கூறுகளைக் கையாளும் போது அதிக நெகிழ்வுத்தன்மையை வழங்குகிறது ஆனால் அதிகமாகப் பயன்படுத்தினால் HTML குறியீட்டை குறைவாகப் படிக்க முடியும். அமைப்பதன் மூலம் border-collapse அதன் மேல் <table> குறிச்சொல் மற்றும் பயன்படுத்தி style மீது பண்பு <th> மற்றும் <td> குறிச்சொற்கள், நாங்கள் அட்டவணை முழுவதும் நிலையான செல் திணிப்பு உறுதி. பாரம்பரிய பண்புகளுடன் ஒப்பிடுகையில், HTML கூறுகளை ஸ்டைலிங் செய்வதற்கு CSS எவ்வாறு மிகவும் மட்டு மற்றும் பராமரிக்கக்கூடிய அணுகுமுறையை வழங்க முடியும் என்பதை இந்த முறை எடுத்துக்காட்டுகிறது.

CSS உடன் Cellpadding மற்றும் Cellspacing ஐ மாற்றுகிறது

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Table Spacing</title>
<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    padding: 10px;
  }
</style>
</head>
<body>
<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>
</body>
</html>

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

நெகிழ்வுத்தன்மைக்கு இன்லைன் CSS ஐப் பயன்படுத்துதல்

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Table Spacing</title>
</head>
<body>
<table style="border-collapse: collapse; width: 100%;">
  <tr>
    <th style="border: 1px solid black; padding: 10px;">Header 1</th>
    <th style="border: 1px solid black; padding: 10px;">Header 2</th>
  </tr>
  <tr>
    <td style="border: 1px solid black; padding: 10px;">Cell 1</td>
    <td style="border: 1px solid black; padding: 10px;">Cell 2</td>
  </tr>
</table>
</body>
</html>

அட்டவணை இடைவெளிக்கான மேம்பட்ட CSS நுட்பங்கள்

அட்டவணை இடைவெளிக்கு CSS ஐப் பயன்படுத்துவதற்கான மற்றொரு முக்கியமான அம்சம் இடையே உள்ள வேறுபாடுகளைப் புரிந்துகொள்வது அடங்கும் border-spacing மற்றும் padding. போது padding செல்கள் உள்ள இடத்தை கட்டுப்படுத்துகிறது, border-spacing செல்களுக்கு இடையிலான இடைவெளியைக் கட்டுப்படுத்தப் பயன்படுகிறது. விண்ணப்பிக்கும் border-spacing செல்களை மிகவும் தெளிவாகப் பிரிப்பதன் மூலம் பார்வைக்கு ஈர்க்கக்கூடிய அட்டவணைகளை நீங்கள் உருவாக்க வேண்டியிருக்கும் போது இது மிகவும் பயனுள்ளதாக இருக்கும். உபயோகிக்க border-spacing, நீங்கள் அதை நேரடியாக விண்ணப்பிக்கலாம் <table> உங்கள் CSS இல் உள்ள உறுப்பு, இது போன்றது: table { border-spacing: 10px; }. இது ஒவ்வொரு கலத்தையும் 10 பிக்சல்களால் பிரிக்கிறது, உங்கள் அட்டவணையின் வாசிப்புத்திறனையும் அழகியலையும் மேம்படுத்துகிறது.

கூடுதலாக, CSS போலி வகுப்புகள் மற்றும் போலி கூறுகளை மேம்படுத்துவது அட்டவணை ஸ்டைலை மேலும் மேம்படுத்தலாம். உதாரணமாக, பயன்படுத்தி :nth-child மற்றும் :nth-of-type ஸ்டைலிங்கிற்கான குறிப்பிட்ட வரிசைகள் அல்லது நெடுவரிசைகளை குறிவைக்க தேர்வாளர்கள் உங்களை அனுமதிக்கிறது. மற்ற ஒவ்வொரு வரிசை அல்லது நெடுவரிசையையும் முன்னிலைப்படுத்த இது பயனுள்ளதாக இருக்கும், மேலும் சிறந்த வாசிப்புத்திறனுக்காக ஒரு கோடிட்ட விளைவை வழங்குகிறது. உதாரணமாக, விண்ணப்பித்தல் tr:nth-child(even) { background-color: #f2f2f2; } ஒவ்வொரு இரட்டை வரிசைக்கும் வெளிர் சாம்பல் பின்னணியைக் கொடுக்கும். இத்தகைய நுட்பங்கள், செயல்பாட்டுடன் மட்டுமல்லாமல், பார்வைக்கு ஈர்க்கக்கூடிய மற்றும் படிக்க எளிதான அட்டவணைகளை உருவாக்குவதில் கருவியாக உள்ளன.

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

  1. CSSஐப் பயன்படுத்தி செல்பேசிங்கை எவ்வாறு அமைப்பது?
  2. பயன்படுத்த border-spacing செல்கள் இடையே இடைவெளி அமைக்க சொத்து.
  3. CSS இல் செல்பேடிங்கை எவ்வாறு அமைப்பது?
  4. பயன்படுத்த padding உள்ளே உள்ள சொத்து th அல்லது td செல்களுக்குள் இடத்தை அமைக்க உறுப்புகள்.
  5. எல்லை சரிவு என்ன செய்கிறது?
  6. தி border-collapse சொத்து அருகில் உள்ள டேபிள் செல் பார்டர்களை ஒரு பார்டராக இணைக்கிறது.
  7. அட்டவணை இடைவெளிக்கு இன்லைன் CSS ஐப் பயன்படுத்தலாமா?
  8. ஆம், நீங்கள் பயன்படுத்தலாம் style நேரடியாக CSS ஐ சேர்க்கும் பண்பு <table>, <th>, மற்றும் <td> குறிச்சொற்கள்.
  9. திணிப்புக்கும் எல்லை இடைவெளிக்கும் என்ன வித்தியாசம்?
  10. Padding செல்களுக்குள் இருக்கும் இடத்தைக் கட்டுப்படுத்துகிறது border-spacing செல்களுக்கு இடையிலான இடைவெளியைக் கட்டுப்படுத்துகிறது.
  11. ஒரு அட்டவணையில் உள்ள மற்ற எல்லா வரிசைகளையும் நான் எவ்வாறு முன்னிலைப்படுத்துவது?
  12. பயன்படுத்த :nth-child பாணி மாற்று வரிசைகளுக்கு சமமான அல்லது ஒற்றைப்படை வாதத்துடன் போலி வகுப்பு.
  13. கோடிட்ட அட்டவணையை உருவாக்க CSS ஐப் பயன்படுத்தலாமா?
  14. ஆம், பயன்படுத்தி ஸ்டைல்களைப் பயன்படுத்தவும் :nth-child அல்லது :nth-of-type ஒரு கோடிட்ட விளைவை அடைய தேர்வாளர்கள்.
  15. CSSல் டேபிள் பார்டர்களை எப்படி தடிமனாக மாற்றுவது?
  16. பயன்படுத்த border ஒரு குறிப்பிட்ட அகலம் கொண்ட சொத்து th மற்றும் td தேர்வாளர்கள்.
  17. HTML பண்புக்கூறுகளை விட அட்டவணை இடைவெளிக்கு CSS ஐப் பயன்படுத்துவது சிறந்ததா?
  18. ஆம், CSS ஐப் பயன்படுத்துவது மிகவும் நெகிழ்வானது மற்றும் உள்ளடக்கம் மற்றும் ஸ்டைலிங் ஆகியவற்றைப் பிரித்து பராமரிக்கிறது, இது வலை அபிவிருத்தியில் சிறந்த நடைமுறையாகும்.

CSS அட்டவணை இடைவெளியுடன் மூடுதல்

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