ಕೇವಲ ಐದು ನಿಮಿಷಗಳಲ್ಲಿ ಸಿಎಸ್ಎಸ್ ಟೇಬಲ್ ಗಡಿಗಳನ್ನು ಹೇಗೆ ರಚಿಸುವುದು ಎಂದು ತಿಳಿಯಿರಿ
ಸಿಎಸ್ಎಸ್ ಮತ್ತು ಎಚ್ಟಿಎಮ್ಎಲ್ ಕೋಷ್ಟಕಗಳು ಬೆರೆಯುವುದಿಲ್ಲ ಎಂದು ನೀವು ಕೇಳಿದ್ದೀರಿ. ಇದು ನಿಜವಲ್ಲ. ಹೌದು, ಲೇಔಟ್ಗಾಗಿ ಎಚ್ಟಿಎಮ್ಎಲ್ ಕೋಷ್ಟಕಗಳನ್ನು ಬಳಸುವುದು ವೆಬ್ ವಿನ್ಯಾಸದ ಉತ್ತಮ ಅಭ್ಯಾಸವಲ್ಲ, ಸಿಎಸ್ಎಸ್ ಲೇಔಟ್ ಶೈಲಿಗಳಿಂದ ಬದಲಿಸಲ್ಪಟ್ಟಿದೆ, ಆದರೆ ವೆಬ್ಪುಟಕ್ಕೆ ಕೋಷ್ಟಕ ಡೇಟಾವನ್ನು ಸೇರಿಸಲು ಬಳಸುವ ಕೋಷ್ಟಕಗಳು ಇನ್ನೂ ಸರಿಯಾದ ಮಾರ್ಕ್ಅಪ್ ಆಗಿವೆ.
ದುರದೃಷ್ಟವಶಾತ್, ಅನೇಕ ವೆಬ್ ವೃತ್ತಿಪರರು ತಾವು ವಿಷ ಎಂದು ಯೋಚಿಸುತ್ತಾ ಕೋಷ್ಟಕಗಳಿಂದ ದೂರ ಸರಿದರು ಏಕೆಂದರೆ, ಆ ವೃತ್ತಿಪರರು ಹೆಚ್ಚಿನವರು ಈ ಸಾಮಾನ್ಯ ಎಚ್ಟಿಎಮ್ಎಲ್ ಎಲಿಮೆಂಟ್ ಮತ್ತು ವೆಬ್ಪುಟದಲ್ಲಿ ಅವುಗಳನ್ನು ನಿರ್ವಹಿಸಬೇಕಾದರೆ ಹೋರಾಟದಲ್ಲಿ ಸ್ವಲ್ಪ ಅನುಭವವನ್ನು ಹೊಂದಿರುತ್ತಾರೆ. ಉದಾಹರಣೆಗೆ, ನೀವು ಪುಟದಲ್ಲಿ ಮೇಜಿನಿದ್ದರೆ ಮತ್ತು ಕೋಷ್ಟಕ ಕೋಶಗಳಿಗೆ ಆಂತರಿಕ ಮಾರ್ಗಗಳನ್ನು ಸೇರಿಸಲು ನೀವು ಬಯಸಿದರೆ.
ಸಿಎಸ್ಎಸ್ ಟೇಬಲ್ ಬಾರ್ಡರ್ಸ್
ನೀವು ಕೋಷ್ಟಕಗಳಿಗೆ ಅಂಚುಗಳನ್ನು ಸೇರಿಸಲು ಸಿಎಸ್ಎಸ್ ಬಳಸಿದಾಗ, ಇದು ಟೇಬಲ್ ಹೊರಗಡೆ ಇರುವ ಅಂಚನ್ನು ಮಾತ್ರ ಸೇರಿಸುತ್ತದೆ. ಆ ಟೇಬಲ್ನ ಪ್ರತ್ಯೇಕ ಕೋಶಗಳಿಗೆ ಆಂತರಿಕ ರೇಖೆಗಳನ್ನು ನೀವು ಸೇರಿಸಲು ಬಯಸಿದರೆ, ಆಂತರಿಕ ಸಿಎಸ್ಎಸ್ ಅಂಶಗಳಿಗೆ ನೀವು ಗಡಿಗಳನ್ನು ಸೇರಿಸಬೇಕಾಗಿದೆ. ವೈಯಕ್ತಿಕ ಜೀವಕೋಶಗಳಲ್ಲಿ ಸಾಲುಗಳನ್ನು ಸೇರಿಸಲು ನೀವು HR ಟ್ಯಾಗ್ ಅನ್ನು ಬಳಸಬಹುದು.
ಈ ಲೇಖನದಲ್ಲಿ ಒಳಗೊಂಡಿರುವ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಲು, ನಿಮ್ಮ ವೆಬ್ ಪುಟದಲ್ಲಿ ನೀವು ಸ್ಪಷ್ಟವಾಗಿ ಟೇಬಲ್ ಅನ್ನು ಹೊಂದಿರಬೇಕು. ನಂತರ ನೀವು ನಿಮ್ಮ ಡಾಕ್ಯುಮೆಂಟ್ನ ತಲೆಯ ಆಂತರಿಕ ಸ್ಟೈಲ್ ಶೀಟ್ನಂತೆ ಸ್ಟೈಲ್ ಹಾಳೆಯನ್ನು ರಚಿಸಬೇಕು (ನಿಮ್ಮ "ಸೈಟ್" ಒಂದೇ ಪುಟವಾಗಿದ್ದಲ್ಲಿ ಮಾತ್ರ ನೀವು ಇದನ್ನು ಮಾಡಬಹುದು) ಅಥವಾ ಡಾಕ್ಯುಮೆಂಟ್ಗೆ ಬಾಹ್ಯ ಸ್ಟೈಲ್ ಶೀಟ್ನಂತೆ ಜೋಡಿಸಲಾಗಿದೆ (ಇದು ನೀವು ಏನು ನಿಮ್ಮ ಸೈಟ್ ಬಹು ಪುಟಗಳಲ್ಲಿದ್ದರೆ - ಒಂದು ಬಾಹ್ಯ ಹಾಳೆಯಿಂದ ಎಲ್ಲಾ ಪುಟಗಳನ್ನು ಶೈಲಿ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ). ಆ ಶೈಲಿಯ ಹಾಳೆಗೆ ಆಂತರಿಕ ಸಾಲುಗಳನ್ನು ಸೇರಿಸಲು ಶೈಲಿಗಳನ್ನು ನೀವು ಹಾಕುತ್ತೀರಿ.
ನೀವು ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು
ನಿಮ್ಮ ಕೋಷ್ಟಕದಲ್ಲಿ ಎಲ್ಲಿ ಸಾಲುಗಳು ಗೋಚರಿಸಬೇಕೆಂದು ನೀವು ಮೊದಲು ನಿರ್ಧರಿಸಬೇಕು. ನಿಮ್ಮಲ್ಲಿ ಹಲವಾರು ಆಯ್ಕೆಗಳಿವೆ, ಅವುಗಳೆಂದರೆ:
- ಗ್ರಿಡ್ ರೂಪಿಸಲು ಎಲ್ಲಾ ಜೀವಕೋಶಗಳ ಸುತ್ತಲೂ;
- ಕೇವಲ ಲಂಬಸಾಲುಗಳ ನಡುವಿನ ಸಾಲುಗಳನ್ನು ಇರಿಸಿ;
- ಸಾಲುಗಳ ನಡುವೆ; ಅಥವಾ
- ನಿರ್ದಿಷ್ಟ ಕಾಲಮ್ಗಳು ಅಥವಾ ಸಾಲುಗಳ ನಡುವೆ.
ನೀವು ವೈಯಕ್ತಿಕ ಕೋಶಗಳ ಸುತ್ತಲೂ ಅಥವಾ ಮಾಲಿಕ ಕೋಶಗಳ ಒಳಗೂ ಕೂಡ ಸಾಲುಗಳನ್ನು ಇರಿಸಿ.
ಒಂದು ಕೋಷ್ಟಕದಲ್ಲಿ ಎಲ್ಲಾ ಜೀವಕೋಶಗಳ ಸುತ್ತಲಿನ ಸಾಲುಗಳನ್ನು ಹೇಗೆ ಸೇರಿಸುವುದು
ನಿಮ್ಮ ಕೋಷ್ಟಕದಲ್ಲಿ ಎಲ್ಲಾ ಕೋಶಗಳ ಸುತ್ತಲೂ ಸಾಲುಗಳನ್ನು ಸೇರಿಸಲು, ಗ್ರಿಡ್-ರೀತಿಯ ಪರಿಣಾಮವನ್ನು ರಚಿಸುವುದು, ನಿಮ್ಮ ಶೈಲಿ ಹಾಳೆಗೆ ಕೆಳಗಿನದನ್ನು ಸೇರಿಸಿ:
td, th {
ಗಡಿ: ಘನ 1px ಕಪ್ಪು;
}
ಒಂದು ಕೋಷ್ಟಕದಲ್ಲಿ ಕೇವಲ ಅಂಕಣಗಳ ನಡುವೆ ಇರುವ ಸಾಲುಗಳನ್ನು ಹೇಗೆ ಸೇರಿಸುವುದು
ಕಾಲಮ್ಗಳ ನಡುವೆ ಸಾಲುಗಳನ್ನು ಸೇರಿಸಲು (ಮೇಜಿನ ಲಂಬಸಾಲಿನ ಮೇಲೆ ಮೇಲಿನಿಂದ ಕೆಳಕ್ಕೆ ಚಲಿಸುವ ಲಂಬ ಸಾಲುಗಳನ್ನು ಇದು ರಚಿಸುತ್ತದೆ), ನಿಮ್ಮ ಸ್ಟೈಲ್ ಶೀಟ್ಗೆ ಕೆಳಗಿನದನ್ನು ಸೇರಿಸಿ:
td, th {
ಗಡಿ-ಎಡ: ಘನ 1px ಕಪ್ಪು;
}
ನಂತರ, ನೀವು ಮೊದಲ ಕಾಲಮ್ನಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳಲು ಬಯಸದಿದ್ದರೆ, ಆ ವರ್ಗ ಮತ್ತು ಟಿಡಿ ಕೋಶಗಳಿಗೆ ನೀವು ವರ್ಗವನ್ನು ಸೇರಿಸಬೇಕಾಗುತ್ತದೆ. ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಆ ಕೋಶಗಳ ಮೇಲೆ ಗಡಿರೇಖೆಯ ವರ್ಗವನ್ನು ಹೊಂದಿದ್ದೇವೆ ಮತ್ತು ಈ ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟವಾದ CSS ನಿಯಮದೊಂದಿಗೆ ನಾವು ಗಡಿಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತೇವೆ ಎಂದು ಭಾವಿಸುತ್ತೇವೆ. ಆದ್ದರಿಂದ ನಾವು ಬಳಸುತ್ತಿರುವ HTML ವರ್ಗ ಇಲ್ಲಿದೆ:
class = "no-border">
ತದನಂತರ ನಾವು ನಮ್ಮ ಸ್ಟೈಲ್ ಶೀಟ್ಗೆ ಕೆಳಗಿನ ಶೈಲಿಯನ್ನು ಸೇರಿಸಬಹುದು:
.no-border {
ಗಡಿ-ಎಡ: ಯಾವುದೂ ಇಲ್ಲ;
}
ಒಂದು ಕೋಷ್ಟಕದಲ್ಲಿ ಕೇವಲ ಸಾಲುಗಳ ನಡುವೆ ಇರುವ ಸಾಲುಗಳನ್ನು ಹೇಗೆ ಸೇರಿಸುವುದು
ಕಾಲಮ್ಗಳ ನಡುವೆ ಸಾಲುಗಳನ್ನು ಸೇರಿಸುವುದರೊಂದಿಗೆ, ನಿಮ್ಮ ಸ್ಟೈಲ್ ಹಾಳೆಯಲ್ಲಿ ಸೇರಿಸಿದ ಸರಳವಾದ ಸರಳ ಶೈಲಿಯೊಂದಿಗೆ ನೀವು ಇದನ್ನು ಮಾಡಬಹುದು. ಕೆಳಗಿನ ಸಿಎಸ್ಎಸ್ ನಮ್ಮ ಟೇಬಲ್ನ ಪ್ರತಿ ಸಾಲಿನ ನಡುವೆ ಲಂಬ ಸಾಲುಗಳನ್ನು ಸೇರಿಸುತ್ತದೆ:
tr {
ಗಡಿ-ಬಾಟಮ್: ಘನ 1px ಕಪ್ಪು;
}
ಮತ್ತು ಮೇಜಿನ ಕೆಳಗಿನಿಂದ ಗಡಿಯನ್ನು ತೆಗೆದುಹಾಕಲು, ಆ ಟ್ರೇ ಟ್ಯಾಗ್ಗೆ ಮತ್ತೊಮ್ಮೆ ನೀವು ವರ್ಗವನ್ನು ಸೇರಿಸುತ್ತೀರಿ:
class = "no-border">
ನಿಮ್ಮ ಸ್ಟೈಲ್ ಶೀಟ್ಗೆ ಈ ಕೆಳಗಿನ ಶೈಲಿಯನ್ನು ಸೇರಿಸಿ:
.no-border {
ಗಡಿ-ಕೆಳಗೆ: ಯಾವುದೂ ಇಲ್ಲ;
}
ಒಂದು ಕೋಷ್ಟಕದಲ್ಲಿ ನಿರ್ದಿಷ್ಟ ಕಾಲಮ್ಗಳು ಅಥವಾ ಸಾಲುಗಳ ನಡುವೆ ಇರುವ ಸಾಲುಗಳನ್ನು ಹೇಗೆ ಸೇರಿಸುವುದು
ನಿರ್ದಿಷ್ಟ ಸಾಲುಗಳು ಅಥವಾ ಕಾಲಮ್ಗಳ ನಡುವೆ ಮಾತ್ರ ನೀವು ಸಾಲುಗಳನ್ನು ಬಯಸಿದರೆ, ಆ ಕೋಶಗಳ ಅಥವಾ ಸಾಲುಗಳ ಮೇಲೆ ನೀವು ವರ್ಗವನ್ನು ಬಳಸಬೇಕಾಗುತ್ತದೆ. ಲಂಬಸಾಲಿನ ನಡುವಿನ ಸಾಲಿನ ಸೇರಿಸುವಿಕೆಯು ಸಾಲುಗಳ ನಡುವೆ ಸ್ವಲ್ಪ ಹೆಚ್ಚು ಕಷ್ಟ, ಏಕೆಂದರೆ ನೀವು ಆ ಕಾಲಮ್ನಲ್ಲಿನ ಪ್ರತಿ ಕೋಶಕ್ಕೆ ವರ್ಗವನ್ನು ಸೇರಿಸಬೇಕಾಗಿದೆ. ನಿಮ್ಮ ಟೇಬಲ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಕೆಲವು ರೀತಿಯ CMS ನಿಂದ ಉತ್ಪತ್ತಿಯಾದರೆ, ಇದು ಸಾಧ್ಯವಾಗಿಲ್ಲ, ಆದರೆ ನೀವು ಪುಟವನ್ನು ಕೋಡಿಂಗ್ ಮಾಡುತ್ತಿದ್ದರೆ, ಈ ಪರಿಣಾಮವನ್ನು ಸಾಧಿಸಲು ನಿಮಗೆ ಅಗತ್ಯವಾದ ವರ್ಗಗಳನ್ನು ಸೇರಿಸಬಹುದು.
class = "side-border">
ಸಾಲುಗಳ ನಡುವಿನ ಸಾಲುಗಳನ್ನು ಸೇರಿಸುವುದು ತುಂಬಾ ಸುಲಭ, ಏಕೆಂದರೆ ನೀವು ಸಾಲಿನಲ್ಲಿ ಬಯಸುವ ಸಾಲುಗೆ ವರ್ಗವನ್ನು ಸೇರಿಸಬಹುದು.
class = "border-bottom">
ನಂತರ ಸಿಎಸ್ಎಸ್ ನಿಮ್ಮ ಶೈಲಿ ಹಾಳೆಗೆ ಸೇರಿಸಿ:
.ಬಾರ್ಡರ್ ಸೈಡ್ {
ಗಡಿ-ಎಡ: ಘನ 1px ಕಪ್ಪು;
}
.ಬಾರ್ಡರ್-ಬಾಟಮ್ {
ಗಡಿ-ಬಾಟಮ್: ಘನ 1px ಕಪ್ಪು;
}
ಒಂದು ಕೋಷ್ಟಕದಲ್ಲಿ ಇಂಡಿವಿಜುವಲ್ ಸೆಲ್ಗಳ ಸುತ್ತಲಿರುವ ಲೈನ್ಗಳನ್ನು ಹೇಗೆ ಸೇರಿಸುವುದು
ಪ್ರತ್ಯೇಕ ಕೋಶಗಳ ಸುತ್ತಲಿನ ಸಾಲುಗಳನ್ನು ಸೇರಿಸಲು, ನೀವು ಸುತ್ತಲಿನ ಅಂಚನ್ನು ಬಯಸುವ ಕೋಶಗಳಿಗೆ ವರ್ಗವನ್ನು ಸೇರಿಸಿ:
class = "border">
ತದನಂತರ ನಿಮ್ಮ ಸ್ಟೈಲ್ ಶೀಟ್ಗೆ ಕೆಳಗಿನ ಸಿಎಸ್ಎಸ್ ಸೇರಿಸಿ:
.ಬಾರ್ಡರ್ {
ಗಡಿ: ಘನ 1px ಕಪ್ಪು;
}
ಒಂದು ಕೋಷ್ಟಕದಲ್ಲಿ ಪ್ರತ್ಯೇಕ ಕೋಶಗಳಲ್ಲಿರುವ ಸಾಲುಗಳನ್ನು ಹೇಗೆ ಸೇರಿಸುವುದು
ನೀವು ಕೋಶದ ವಿಷಯಗಳ ಒಳಗೆ ಸಾಲುಗಳನ್ನು ಸೇರಿಸಲು ಬಯಸಿದರೆ, ಇದನ್ನು ಮಾಡಲು ಸುಲಭವಾದ ಮಾರ್ಗವೆಂದರೆ ಸಮತಲ ನಿಯಮ ಟ್ಯಾಗ್ (
).
ಉಪಯುಕ್ತ ಸಲಹೆಗಳು
ನಿಮ್ಮ ಗಡಿಗಳಲ್ಲಿ ಅಂತರವನ್ನು ನೀವು ಗಮನಿಸಿದರೆ, ನಿಮ್ಮ ಮೇಜಿನ ಮೇಲೆ ಗಡಿ-ಕುಸಿತದ ಶೈಲಿ ನಿಗದಿಪಡಿಸಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ನಿಮ್ಮ ಶೈಲಿ ಹಾಳೆಗೆ ಕೆಳಗಿನದನ್ನು ಸೇರಿಸಿ:
ಟೇಬಲ್ {
ಗಡಿ-ಕುಸಿತ: ಕುಸಿತ;
}
ಮೇಲಿನ ಎಲ್ಲಾ ಸಿಎಸ್ಎಸ್ಗಳನ್ನು ನೀವು ತಪ್ಪಿಸಬಹುದು ಮತ್ತು ನಿಮ್ಮ ಟೇಬಲ್ ಟ್ಯಾಗ್ನಲ್ಲಿ ಗಡಿ ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಬಹುದು. ಹೇಗಾದರೂ, ತನ್ನ ಗುಣಲಕ್ಷಣವನ್ನು ಅಸಮ್ಮತಿಸಿದಾಗ, CSS ಗಿಂತ ಗಮನಾರ್ಹವಾಗಿ ಕಡಿಮೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ ಎಂದು, ನೀವು ಕೇವಲ ಗಡಿ ಅಗಲ ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು ಮತ್ತು ಟೇಬಲ್ ಅಥವಾ ಯಾವುದೇ ಎಲ್ಲಾ ಕೋಶಗಳ ಸುತ್ತ ಮಾತ್ರ ಹೊಂದಬಹುದು ಎಂದು ಅರ್ಥ.