ಸಿಎಸ್ಎಸ್ ಜೊತೆ ಜೀಬ್ರಾ ಪಟ್ಟೆ ಟೇಬಲ್ಸ್ ರಚಿಸಲು ಹೇಗೆ

ಬಳಸುವುದು: ಟೇಬಲ್ಗಳೊಂದಿಗೆ ಎನ್ತ್-ಆಫ್-ಟೈಪ್ (ಎನ್)

ಟೇಬಲ್ಗಳನ್ನು ಸುಲಭವಾಗಿ ಓದಲು ಮಾಡಲು, ಪರ್ಯಾಯ ಹಿನ್ನೆಲೆ ಬಣ್ಣಗಳೊಂದಿಗೆ ಶೈಲಿ ಸಾಲುಗಳಿಗೆ ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಸಹಾಯಕವಾಗುತ್ತದೆ. ಪ್ರತಿಯೊಂದು ಇತರ ಸಾಲುಗಳ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಹೊಂದಿಸುವುದು ಶೈಲಿ ಕೋಷ್ಟಕಗಳ ಸಾಮಾನ್ಯ ವಿಧಾನಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ. ಇದನ್ನು "ಜೀಬ್ರಾ ಸ್ಟ್ರೈಪ್ಸ್" ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ.

ಒಂದು ಸಿಎಸ್ಎಸ್ ವರ್ಗದೊಂದಿಗೆ ಇತರ ಸಾಲುಗಳನ್ನು ಹೊಂದಿಸಿ ಮತ್ತು ಆ ವರ್ಗದ ಶೈಲಿಯನ್ನು ವಿವರಿಸುವ ಮೂಲಕ ನೀವು ಇದನ್ನು ಸಾಧಿಸಬಹುದು. ಇದು ಕೆಲಸ ಮಾಡುತ್ತದೆ ಆದರೆ ಅದರ ಬಗ್ಗೆ ಹೋಗಲು ಉತ್ತಮ ಅಥವಾ ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿ ಮಾರ್ಗವಲ್ಲ.

ಈ ವಿಧಾನವನ್ನು ಬಳಸುವಾಗ, ನೀವು ಆ ಟೇಬಲ್ ಅನ್ನು ಸಂಪಾದಿಸಲು ಪ್ರತಿ ಬಾರಿಯೂ ಪ್ರತಿ ಸಾಲಿನ ಬದಲಾವಣೆಗಳಿಗೆ ಅನುಗುಣವಾಗಿರುತ್ತವೆ ಎಂಬುದನ್ನು ಖಾತ್ರಿಪಡಿಸಿಕೊಳ್ಳಲು ಪ್ರತಿಯೊಂದು ಸಾಲಿನಲ್ಲಿಯೂ ನೀವು ಸಂಪಾದಿಸಬೇಕಾಗಬಹುದು. ಉದಾಹರಣೆಗೆ, ನಿಮ್ಮ ಟೇಬಲ್ಗೆ ಹೊಸ ಸಾಲನ್ನು ನೀವು ಸೇರಿಸಿದರೆ, ಕೆಳಗಿನ ಪ್ರತಿಯೊಂದು ಸಾಲು ವರ್ಗವನ್ನು ಬದಲಿಸಬೇಕಾಗಿದೆ.

ಜೀಬ್ರಾ ಪಟ್ಟಿಗಳೊಂದಿಗೆ ಸಿಎಸ್ಎಸ್ ಶೈಲಿ ಕೋಷ್ಟಕಗಳಿಗೆ ಸುಲಭವಾಗಿಸುತ್ತದೆ. ಎನ್ಟಿ-ಆಫ್-ಟೈಪ್ (ಎನ್) ಸಿಎಸ್ಎಸ್ ಸೆಲೆಕ್ಟರ್ : ನೀವು ಯಾವುದೇ ಹೆಚ್ಚುವರಿ ಎಚ್ಟಿಎಮ್ಎಲ್ ಲಕ್ಷಣಗಳು ಅಥವಾ ಸಿಎಸ್ಎಸ್ ತರಗತಿಗಳನ್ನು ಸೇರಿಸುವ ಅಗತ್ಯವಿಲ್ಲ.

ದಿ: ಎನ್ತ್-ಆಫ್-ಟೈಪ್ (ಎನ್) ಸೆಲೆಕ್ಟರ್ ಸಿಎಸ್ಎಸ್ ನಲ್ಲಿ ರಚನಾತ್ಮಕ ಸೂಡೊ-ಕ್ಲಾಸ್ ಆಗಿದೆ, ಇದು ಪೋಷಕ ಮತ್ತು ಸಹೋದ್ಯೋಗಿಗಳೊಂದಿಗೆ ಅವರ ಸಂಬಂಧಗಳ ಆಧಾರದ ಮೇಲೆ ನಿಮಗೆ ಶೈಲಿ ಅಂಶಗಳನ್ನು ಅನುಮತಿಸುತ್ತದೆ. ಅವುಗಳ ಮೂಲ ಕ್ರಮವನ್ನು ಆಧರಿಸಿ ನೀವು ಒಂದು ಅಥವಾ ಹೆಚ್ಚಿನ ಅಂಶಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಇದನ್ನು ಬಳಸಬಹುದು. ಬೇರೆ ರೀತಿಯಲ್ಲಿ ಹೇಳುವುದಾದರೆ, ನಿರ್ದಿಷ್ಟ ಅಂಶದ ಅದರ ತಾಯಿಯ nth ಮಗುವಿನ ಪ್ರತಿ ಅಂಶವನ್ನು ಅದು ಹೊಂದಿಸಬಹುದು.

ಅಕ್ಷರದ n ಒಂದು ಕೀವರ್ಡ್ (ಉದಾಹರಣೆಗೆ ಬೆಸ ಅಥವಾ ಸಹ), ಸಂಖ್ಯೆ, ಅಥವಾ ಒಂದು ಸೂತ್ರವಾಗಬಹುದು.

ಉದಾಹರಣೆಗೆ, ಹಳದಿ ಹಿನ್ನಲೆ ಬಣ್ಣದೊಂದಿಗೆ ಪ್ರತಿ ಇತರ ಪ್ಯಾರಾಗ್ರಾಫ್ ಟ್ಯಾಗ್ ಶೈಲಿಗೆ, ನಿಮ್ಮ ಸಿಎಸ್ಎಸ್ ಡಾಕ್ಯುಮೆಂಟ್ ಒಳಗೊಂಡಿರುತ್ತದೆ:

ಪು: ಎನ್ತ್-ಆಫ್-ಟೈಪ್ (ಬೆಸ) {
ಹಿನ್ನೆಲೆ: ಹಳದಿ;
}

ನಿಮ್ಮ HTML ಟೇಬಲ್ನಿಂದ ಪ್ರಾರಂಭಿಸಿ

ಮೊದಲಿಗೆ, ನೀವು ಸಾಮಾನ್ಯವಾಗಿ ಇದನ್ನು HTML ನಲ್ಲಿ ಬರೆಯುವುದರಿಂದ ನಿಮ್ಮ ಟೇಬಲ್ ಅನ್ನು ರಚಿಸಿ. ಸಾಲುಗಳು ಅಥವಾ ಕಾಲಮ್ಗಳಿಗೆ ಯಾವುದೇ ವಿಶೇಷ ವರ್ಗಗಳನ್ನು ಸೇರಿಸಬೇಡಿ.

ನಿಮ್ಮ ಸ್ಟೈಲ್ಶೀಟ್ನಲ್ಲಿ, ಕೆಳಗಿನ ಸಿಎಸ್ಎಸ್ ಸೇರಿಸಿ:

tr: nth-of-type (ಬೆಸ) {
ಹಿನ್ನೆಲೆ-ಬಣ್ಣ: #ccc;
}

ಇದು ಮೊದಲ ಸಾಲಿನೊಂದಿಗೆ ಪ್ರಾರಂಭವಾಗುವ ಬೂದು ಹಿನ್ನೆಲೆ ಬಣ್ಣದೊಂದಿಗೆ ಪ್ರತಿಯೊಂದು ಸಾಲುಗಳನ್ನು ಶೈಲಿ ಮಾಡುತ್ತದೆ.

ಅದೇ ಮಾರ್ಗದಲ್ಲಿ ಶೈಲಿ ಆಲ್ಟರ್ನೇಟಿಂಗ್ ಕಾಲಮ್ಗಳು

ನಿಮ್ಮ ಕೋಷ್ಟಕಗಳಲ್ಲಿನ ಲಂಬಸಾಲುಗಳಿಗೆ ನೀವು ಅದೇ ರೀತಿಯ ಶೈಲಿಯನ್ನು ಮಾಡಬಹುದು. ಹಾಗೆ ಮಾಡಲು, ಟಿಡಿ ಗೆ ನಿಮ್ಮ ಸಿಎಸ್ಎಸ್ ವರ್ಗದ ಟಿಆರ್ ಅನ್ನು ಸರಳವಾಗಿ ಬದಲಾಯಿಸಿ. ಉದಾಹರಣೆಗೆ:

td: nth-of-type (ಬೆಸ) {
ಹಿನ್ನೆಲೆ-ಬಣ್ಣ: #ccc;
}

Nth-of-type (n) ಸೆಲೆಕ್ಟರ್ನಲ್ಲಿ ಸೂತ್ರಗಳನ್ನು ಬಳಸುವುದು

ಸೆಲೆಕ್ಟರ್ನಲ್ಲಿ ಬಳಸುವ ಸೂತ್ರದ ಸಿಂಟ್ಯಾಕ್ಸ್ a + b ಆಗಿದೆ.

• ಒಂದು ಚಕ್ರ ಅಥವಾ ಸೂಚ್ಯಂಕದ ಗಾತ್ರವನ್ನು ಪ್ರತಿನಿಧಿಸುವ ಒಂದು ಸಂಖ್ಯೆ.

• n ಅಕ್ಷರಶಃ "n" ಅಕ್ಷರವಾಗಿದ್ದು, ಕೌಂಟರ್ ಅನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ, ಅದು 0 ನೇ ಸ್ಥಾನದಲ್ಲಿರುತ್ತದೆ.

• + ಒಂದು ಆಯೋಜಕರು, ಇದು ಸಹ "-" ಆಗಿರಬಹುದು

• b ಎನ್ನುವುದು ಪೂರ್ಣಸಂಖ್ಯೆ ಮತ್ತು ಆಫ್ಸೆಟ್ ಮೌಲ್ಯವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ-ಉದಾಹರಣೆಗೆ, ಎಷ್ಟು ಸಾಲುಗಳು ಕೆಳಭಾಗದಲ್ಲಿ ಸೆಲೆಕ್ಟರ್ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ. ಒಂದು ಆಪರೇಟರ್ ಅನ್ನು ಸೂತ್ರದಲ್ಲಿ ಸೇರಿಸಿದ್ದರೆ ಇದು ಅಗತ್ಯವಿದೆ.

ಉದಾಹರಣೆಗೆ, ನೀವು ಪ್ರತಿ 3 ನೇ ಸಾಲಿಗಾಗಿ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಹೊಂದಿಸಲು ಬಯಸಿದರೆ, ನಿಮ್ಮ ಸೂತ್ರವು 3n + 0 ಆಗಿರುತ್ತದೆ. ನಿಮ್ಮ ಸಿಎಸ್ಎಸ್ ಈ ರೀತಿ ಇರಬಹುದು:

tr: nth-of-type (3n + 0) {
ಹಿನ್ನೆಲೆ: slategray;
}

ಎನ್ತ್-ಆಫ್-ಟೈಪ್ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಉಪಯೋಗಿಸಲು ಸಹಾಯಕವಾಗಿದೆಯೆ ಪರಿಕರಗಳು

ಸೂಡೊ-ಕ್ಲಾಸ್ ಎನ್ಥ್-ಆಫ್-ಟೈಪ್ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಬಳಸುವ ಸೂತ್ರದ ಅಂಶದಿಂದ ನೀವು ಸ್ವಲ್ಪ ಮಟ್ಟಿಗೆ ನೋಯಿಸಿದ್ದರೆ, ಪ್ರಯತ್ನಿಸಿ: ನೀವು ಬಯಸುವ ನೋಟವನ್ನು ಸಾಧಿಸಲು ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಸಹಾಯ ಮಾಡುವಂತಹ ಉಪಯುಕ್ತ ಸಾಧನವಾಗಿ ಎನ್ ಥೆಸ್ಟರ್ ಸೈಟ್. Nth-type ಅನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಡ್ರಾಪ್ಡೌನ್ ಮೆನುವನ್ನು ಬಳಸಿ (ಇಲ್ಲಿ nth-child ನಂತಹ ಇತರ ಸೂಡೊ-ತರಗತಿಗಳೊಂದಿಗೆ ನೀವು ಪ್ರಯೋಗಿಸಬಹುದು).