HTML ಕೋಷ್ಟಕಗಳಲ್ಲಿ ಸೆಲ್‌ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ಸೆಲ್‌ಸ್ಪೇಸಿಂಗ್ ಅನ್ನು ಹೊಂದಿಸಲು CSS ಅನ್ನು ಬಳಸುವುದು

Lucas Simon

ಶನಿವಾರ, ಜೂನ್ 22, 2024 01:07:34 ಅಪರಾಹ್ನ

CSS ಟೇಬಲ್ ಸ್ಪೇಸಿಂಗ್ ಪರಿಚಯ

HTML ಕೋಷ್ಟಕಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ, ಕೋಶಗಳ ಒಳಗೆ ಮತ್ತು ನಡುವಿನ ಅಂತರವನ್ನು ನಿಯಂತ್ರಿಸುವುದು ಅಪೇಕ್ಷಿತ ವಿನ್ಯಾಸವನ್ನು ಸಾಧಿಸಲು ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಸಾಂಪ್ರದಾಯಿಕವಾಗಿ, ಈ ಅಂತರವನ್ನು ನಿರ್ವಹಿಸಲು ಸೆಲ್‌ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ಸೆಲ್‌ಸ್ಪೇಸಿಂಗ್ ಗುಣಲಕ್ಷಣಗಳನ್ನು ನೇರವಾಗಿ HTML ಟ್ಯಾಗ್‌ಗಳಲ್ಲಿ ಬಳಸಲಾಗುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಅಭ್ಯಾಸಗಳು ಉತ್ತಮ ನಮ್ಯತೆ ಮತ್ತು ಕಾಳಜಿಗಳ ಪ್ರತ್ಯೇಕತೆಗಾಗಿ CSS ಅನ್ನು ಬಳಸಲು ಶಿಫಾರಸು ಮಾಡುತ್ತವೆ.

ಅದನ್ನು ಹೇಗೆ ಬದಲಾಯಿಸುವುದು ಎಂಬುದನ್ನು ಈ ಲೇಖನವು ಅನ್ವೇಷಿಸುತ್ತದೆ ಸೆಲ್ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ಜೀವಕೋಶಗಳ ಅಂತರ CSS ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ ಗುಣಲಕ್ಷಣಗಳು. ನಿಮ್ಮ ಕೋಷ್ಟಕಗಳ ನೋಟ ಮತ್ತು ನಿರ್ವಹಣೆಯನ್ನು ಹೆಚ್ಚಿಸುವ ಮೂಲಕ ಅದೇ ಪರಿಣಾಮಗಳನ್ನು ನೀವು ಹೇಗೆ ಸಾಧಿಸಬಹುದು ಎಂಬುದನ್ನು ಪ್ರದರ್ಶಿಸಲು ನಾವು ಸ್ಪಷ್ಟ ಉದಾಹರಣೆಗಳನ್ನು ಒದಗಿಸುತ್ತೇವೆ.

ಆಜ್ಞೆ	ವಿವರಣೆ
border-collapse	ಈ CSS ಪ್ರಾಪರ್ಟಿ ಟೇಬಲ್ ಬಾರ್ಡರ್‌ಗಳು ಒಂದೇ ಗಡಿಗೆ ಕುಸಿಯಬೇಕೆ ಅಥವಾ ಪ್ರತ್ಯೇಕಿಸಬೇಕೆ ಎಂಬುದನ್ನು ಹೊಂದಿಸುತ್ತದೆ.
padding	ಕೋಶದ ವಿಷಯ ಮತ್ತು ಅದರ ಗಡಿಯ ನಡುವಿನ ಜಾಗವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ.
border	ಅಗಲ ಮತ್ತು ಬಣ್ಣವನ್ನು ಒಳಗೊಂಡಂತೆ ಟೇಬಲ್ ಕೋಶಗಳ ಗಡಿ ಶೈಲಿಯನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ.
<th>	HTML ಕೋಷ್ಟಕದಲ್ಲಿ ಹೆಡರ್ ಸೆಲ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ.
<td>	HTML ಕೋಷ್ಟಕದಲ್ಲಿ ಪ್ರಮಾಣಿತ ಕೋಶವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ.
width	ಮೇಜಿನ ಅಗಲವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ.

ಟೇಬಲ್ ಸ್ಪೇಸಿಂಗ್ಗಾಗಿ ಸಿಎಸ್ಎಸ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ಒದಗಿಸಿದ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳಲ್ಲಿ, ನಾವು ಸಾಂಪ್ರದಾಯಿಕ 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 ಟೇಬಲ್ ಸ್ಪೇಸಿಂಗ್ ಬಗ್ಗೆ ಸಾಮಾನ್ಯ ಪ್ರಶ್ನೆಗಳು

CSS ಬಳಸಿಕೊಂಡು ಸೆಲ್‌ಸ್ಪೇಸಿಂಗ್ ಅನ್ನು ಹೇಗೆ ಹೊಂದಿಸುವುದು?
ಬಳಸಿ border-spacing ಕೋಶಗಳ ನಡುವಿನ ಜಾಗವನ್ನು ಹೊಂದಿಸಲು ಆಸ್ತಿ.
ನಾನು CSS ನಲ್ಲಿ ಸೆಲ್‌ಪಾಡಿಂಗ್ ಅನ್ನು ಹೇಗೆ ಹೊಂದಿಸಬಹುದು?
ಬಳಸಿ padding ಒಳಗೆ ಆಸ್ತಿ th ಅಥವಾ td ಜೀವಕೋಶಗಳಲ್ಲಿ ಜಾಗವನ್ನು ಹೊಂದಿಸಲು ಅಂಶಗಳು.
ಗಡಿ ಕುಸಿತ ಏನು ಮಾಡುತ್ತದೆ?
ದಿ border-collapse ಆಸ್ತಿಯು ಪಕ್ಕದ ಟೇಬಲ್ ಸೆಲ್ ಗಡಿಗಳನ್ನು ಒಂದೇ ಗಡಿಗೆ ವಿಲೀನಗೊಳಿಸುತ್ತದೆ.
ಟೇಬಲ್ ಸ್ಪೇಸಿಂಗ್‌ಗಾಗಿ ನಾನು ಇನ್‌ಲೈನ್ CSS ಅನ್ನು ಬಳಸಬಹುದೇ?
ಹೌದು, ನೀವು ಬಳಸಬಹುದು style ಗೆ ನೇರವಾಗಿ CSS ಸೇರಿಸಲು ಗುಣಲಕ್ಷಣ <table>, <th>, ಮತ್ತು <td> ಟ್ಯಾಗ್ಗಳು.
ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ಗಡಿ ಅಂತರದ ನಡುವಿನ ವ್ಯತ್ಯಾಸವೇನು?
Padding ಜೀವಕೋಶಗಳ ಒಳಗಿನ ಜಾಗವನ್ನು ನಿಯಂತ್ರಿಸುತ್ತದೆ border-spacing ಜೀವಕೋಶಗಳ ನಡುವಿನ ಜಾಗವನ್ನು ನಿಯಂತ್ರಿಸುತ್ತದೆ.
ಕೋಷ್ಟಕದಲ್ಲಿ ಪ್ರತಿ ಇತರ ಸಾಲನ್ನು ನಾನು ಹೇಗೆ ಹೈಲೈಟ್ ಮಾಡಬಹುದು?
ಬಳಸಿ :nth-child ಶೈಲಿ ಪರ್ಯಾಯ ಸಾಲುಗಳಿಗೆ ಸಮ ಅಥವಾ ಬೆಸ ವಾದವನ್ನು ಹೊಂದಿರುವ ಹುಸಿ-ವರ್ಗ.
ಪಟ್ಟೆಯುಳ್ಳ ಕೋಷ್ಟಕವನ್ನು ರಚಿಸಲು ನಾನು CSS ಅನ್ನು ಬಳಸಬಹುದೇ?
ಹೌದು, ಬಳಸಿ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಿ :nth-child ಅಥವಾ :nth-of-type ಪಟ್ಟೆ ಪರಿಣಾಮವನ್ನು ಸಾಧಿಸಲು ಆಯ್ಕೆಗಾರರು.
CSS ನಲ್ಲಿ ಟೇಬಲ್ ಬಾರ್ಡರ್‌ಗಳನ್ನು ದಪ್ಪವಾಗಿಸುವುದು ಹೇಗೆ?
ಬಳಸಿ border ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಅಗಲವನ್ನು ಹೊಂದಿರುವ ಆಸ್ತಿ th ಮತ್ತು td ಆಯ್ಕೆಗಾರರು.
HTML ಗುಣಲಕ್ಷಣಗಳಿಗಿಂತ ಟೇಬಲ್ ಸ್ಪೇಸಿಂಗ್‌ಗಾಗಿ CSS ಅನ್ನು ಬಳಸುವುದು ಉತ್ತಮವೇ?
ಹೌದು, CSS ಅನ್ನು ಬಳಸುವುದು ಹೆಚ್ಚು ಮೃದುವಾಗಿರುತ್ತದೆ ಮತ್ತು ವಿಷಯ ಮತ್ತು ಶೈಲಿಯ ಪ್ರತ್ಯೇಕತೆಯನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ, ಇದು ವೆಬ್ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ ಉತ್ತಮ ಅಭ್ಯಾಸವಾಗಿದೆ.

CSS ಟೇಬಲ್ ಸ್ಪೇಸಿಂಗ್‌ನೊಂದಿಗೆ ಸುತ್ತುವುದು

ಟೇಬಲ್ ಸ್ಪೇಸಿಂಗ್‌ಗಾಗಿ CSS ಅನ್ನು ಅನ್ವಯಿಸುವುದರಿಂದ ನಿಮ್ಮ HTML ಕೋಡ್ ಅನ್ನು ಆಧುನೀಕರಿಸುವುದು ಮಾತ್ರವಲ್ಲದೆ ಅದರ ನಿರ್ವಹಣೆ ಮತ್ತು ಓದುವಿಕೆಯನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ. ಅದರ ಉಪಯೋಗ border-collapse, padding, ಮತ್ತು border-spacing ಗುಣಲಕ್ಷಣಗಳು ಟೇಬಲ್ ವಿನ್ಯಾಸದ ಮೇಲೆ ನಿಖರವಾದ ನಿಯಂತ್ರಣವನ್ನು ಅನುಮತಿಸುತ್ತದೆ, ಸಾಂಪ್ರದಾಯಿಕ HTML ಗುಣಲಕ್ಷಣಗಳಿಗೆ ಹೋಲಿಸಿದರೆ ಹೆಚ್ಚು ಸೊಗಸಾದ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ಪರಿಹಾರವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಕ್ಲೀನ್, ರೆಸ್ಪಾನ್ಸಿವ್ ಮತ್ತು ದೃಷ್ಟಿಗೆ ಇಷ್ಟವಾಗುವ ವೆಬ್ ಕೋಷ್ಟಕಗಳನ್ನು ರಚಿಸಲು ಈ CSS ತಂತ್ರಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವುದು ಅತ್ಯಗತ್ಯ.