ಇದು ಉತ್ತಮವಾಗಿದೆ, ಆದರೆ ನಮ್ಮ ಟೇಬಲ್ ಅನ್ನು ವಿಂಡೋದ ಎಡ ಅಂಚಿಗೆ ಒತ್ತಲಾಗುತ್ತದೆ, ಅದರಲ್ಲಿರುವ ಪಠ್ಯದಂತೆ. ಇನ್ನೂ ಮೂರು ನಿಯತಾಂಕಗಳನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಇದನ್ನು ಸರಿಪಡಿಸೋಣ:
ಟೇಬಲ್ ಡಬಲ್ ಗಡಿಗಳನ್ನು ಹೊಂದಿದೆ ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ನೀವು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದರೆ ಜೀವಕೋಶದ ಅಂತರ = "0", ನಂತರ ಗಡಿಗಳು ಸಾಮಾನ್ಯ ರೂಪವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತವೆ:
ಫಲಿತಾಂಶ:
ಸಾಮಾನ್ಯವಾಗಿ, ಎರಡು ನಿಯತಾಂಕಗಳು ಗಡಿಗಳಿಗೆ ಕಾರಣವಾಗಿವೆ:
- ಚೌಕಟ್ಟು- ಮೇಜಿನ ಸುತ್ತಲೂ ಚೌಕಟ್ಟಿನ ಪ್ರಕಾರವನ್ನು ಹೊಂದಿಸುತ್ತದೆ ಮತ್ತು ಈ ಕೆಳಗಿನ ಮೌಲ್ಯಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಬಹುದು:
- ಶೂನ್ಯ- ಫ್ರೇಮ್ ಇಲ್ಲ,
- ಮೇಲೆ- ಮೇಲಿನ ಫ್ರೇಮ್ ಮಾತ್ರ,
- ಕೆಳಗೆ- ಕೆಳಗಿನ ಫ್ರೇಮ್ ಮಾತ್ರ,
- hsides- ಮೇಲಿನ ಮತ್ತು ಕೆಳಗಿನ ಚೌಕಟ್ಟುಗಳು ಮಾತ್ರ,
- ವಿರುದ್ಧ- ಎಡ ಮತ್ತು ಬಲ ಚೌಕಟ್ಟುಗಳು ಮಾತ್ರ,
- lhs- ಎಡ ಫ್ರೇಮ್ ಮಾತ್ರ,
- rhs- ಬಲ ಚೌಕಟ್ಟು ಮಾತ್ರ,
- ಬಾಕ್ಸ್- ಚೌಕಟ್ಟಿನ ಎಲ್ಲಾ ನಾಲ್ಕು ಭಾಗಗಳು.
- ನಿಯಮಗಳು- ಆಂತರಿಕ ಟೇಬಲ್ ಗಡಿಗಳ ಪ್ರಕಾರವನ್ನು ಹೊಂದಿಸುತ್ತದೆ ಮತ್ತು ಈ ಕೆಳಗಿನ ಮೌಲ್ಯಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಬಹುದು:
- ಯಾವುದೂ ಇಲ್ಲ- ಕೋಶಗಳ ನಡುವೆ ಯಾವುದೇ ಗಡಿಗಳಿಲ್ಲ,
- ಗುಂಪುಗಳು- ಸಾಲುಗಳ ಗುಂಪುಗಳು ಮತ್ತು ಕಾಲಮ್‌ಗಳ ಗುಂಪುಗಳ ನಡುವೆ ಮಾತ್ರ ಗಡಿಗಳು (ಸ್ವಲ್ಪ ನಂತರ ಚರ್ಚಿಸಲಾಗುವುದು),
- ಸಾಲುಗಳು- ರೇಖೆಗಳ ನಡುವೆ ಮಾತ್ರ ಗಡಿಗಳು,
- cols- ಗಡಿಗಳು ಕಾಲಮ್‌ಗಳ ನಡುವೆ ಮಾತ್ರ,
- ಎಲ್ಲಾ- ಎಲ್ಲಾ ಗಡಿಗಳನ್ನು ಪ್ರದರ್ಶಿಸಿ.
ಈ ನಿಯತಾಂಕಗಳನ್ನು ಬಳಸಿಕೊಂಡು, ನೀವು ಬಯಸಿದ ರೀತಿಯಲ್ಲಿ ಗಡಿಗಳನ್ನು ಹೊಂದಿಸಬಹುದು. ಇಲ್ಲಿ ನಾವು ಒಂದೇ ಒಂದು ಉದಾಹರಣೆಯನ್ನು ನೀಡುತ್ತೇವೆ, ಎಲ್ಲವನ್ನೂ ನೀವೇ ಪ್ರಯೋಗಿಸಿ. ಫಲಿತಾಂಶ:
ವಿಭಿನ್ನ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಗಡಿಗಳನ್ನು ಸ್ವಲ್ಪ ವಿಭಿನ್ನವಾಗಿ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ ಎಂದು ಗಮನಿಸಬೇಕು.
HTML ಟ್ಯಾಗ್ಗಳು tr ಮತ್ತು td
ಕೋಷ್ಟಕಗಳು ಸಾಲು ಸಾಲಾಗಿ ರಚನೆಯಾಗುತ್ತವೆ. ಆದ್ದರಿಂದ, ಸಾಲಿನಲ್ಲಿ (ಟಿಆರ್) ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ನಿಯತಾಂಕಗಳು ತಮ್ಮ ಪರಿಣಾಮವನ್ನು ಸಾಲಿನ ಎಲ್ಲಾ ಕೋಶಗಳಿಗೆ (ಟಿಡಿ) ವಿಸ್ತರಿಸುತ್ತವೆ. ತಂತಿಗಳು ಮೂರು ನಿಯತಾಂಕಗಳನ್ನು ಹೊಂದಬಹುದು:
- ಜೋಡಿಸು- ಕೋಶಗಳಲ್ಲಿನ ಪಠ್ಯವನ್ನು ಅಡ್ಡಲಾಗಿ ಜೋಡಿಸುತ್ತದೆ, ಮೌಲ್ಯಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಬಹುದು: ಎಡ (ಬಲ), ಬಲ (ಎಡ), ಮಧ್ಯ (ಮಧ್ಯ),
- valign- ಕೋಶಗಳಲ್ಲಿನ ಪಠ್ಯವನ್ನು ಲಂಬವಾಗಿ ಜೋಡಿಸುತ್ತದೆ, ಈ ಕೆಳಗಿನ ಮೌಲ್ಯಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಬಹುದು: ಮೇಲಿನ (ಮೇಲಿನ), ಕೆಳಭಾಗ (ಕೆಳಗೆ), ಮಧ್ಯ (ಮಧ್ಯ),
- bgcolor- ರೇಖೆಯ ಬಣ್ಣವನ್ನು ಹೊಂದಿಸುತ್ತದೆ.
ಒಂದು ಉದಾಹರಣೆಯನ್ನು ನೋಡೋಣ: - ಅಗಲ- ಕಾಲಮ್ ಅಗಲವನ್ನು ಹೊಂದಿಸುತ್ತದೆ (ಪಿಕ್ಸೆಲ್‌ಗಳಲ್ಲಿ ಅಥವಾ ಶೇಕಡಾವಾರು, ಟೇಬಲ್ ಅಗಲವನ್ನು 100% ಎಂದು ತೆಗೆದುಕೊಳ್ಳಲಾಗುತ್ತದೆ),
- ಎತ್ತರ- ಕೋಶದ ಎತ್ತರವನ್ನು ಹೊಂದಿಸುತ್ತದೆ, ಮತ್ತು ಒಂದೇ ಸಾಲಿನಲ್ಲಿನ ಎಲ್ಲಾ ಕೋಶಗಳು ಈ ಎತ್ತರದಿಂದ ಆಗುತ್ತವೆ.
ಉದಾಹರಣೆಗೆ, ಟ್ಯಾಗ್‌ಗಳಲ್ಲಿ ನಮ್ಮ ಕೋಡ್‌ಗೆ ಸೇರಿಸೋಣ
ಈ ನಿಯತಾಂಕಗಳು | | 1
|
2
|
3
|
|---|
ಫಲಿತಾಂಶ:
ನೀವು ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು ಹೊಂದಿಸದಿದ್ದರೆ, ವಿಷಯದ ಪ್ರಕಾರ ಟೇಬಲ್ ರಚನೆಯಾಗುತ್ತದೆ ಎಂದು ಗಮನಿಸಬೇಕು (ಹಿಂದಿನ ಉದಾಹರಣೆಗಳಲ್ಲಿ ಇದು ಹೀಗಿತ್ತು).
ಈ ಪಾಠವು ಮುಗಿದಿದೆ, ಕೋಷ್ಟಕಗಳನ್ನು ರಚಿಸುವುದು ಮತ್ತು ವಿನ್ಯಾಸಗೊಳಿಸುವುದನ್ನು ಅಭ್ಯಾಸ ಮಾಡಿ, ಮುಂದಿನ ಪಾಠದಲ್ಲಿ ನಿಮಗೆ ಈ ಕೌಶಲ್ಯಗಳು ಬೇಕಾಗುತ್ತವೆ, ಅಲ್ಲಿ ನಾವು ಸಂಕೀರ್ಣ ರಚನೆಗಳ ಕೋಷ್ಟಕಗಳನ್ನು ರಚಿಸುತ್ತೇವೆ.
HTML ಟೇಬಲ್ ಬಾರ್ಡರ್‌ಗಳನ್ನು CSS ಪರಿಕರಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಸುಲಭವಾಗಿ ಬದಲಾಯಿಸಬಹುದು. ಅವುಗಳ ಪ್ರದರ್ಶನವನ್ನು ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಕಾನ್ಫಿಗರ್ ಮಾಡಲಾಗಿದೆ: ಕುಸಿತ ಮತ್ತು ಅಂತರ.
ಟೇಬಲ್ ವೀಕ್ಷಣೆಯನ್ನು ಸಂಪಾದಿಸಲು, ಗಡಿ ಆಸ್ತಿ ಗುಂಪನ್ನು ಬಳಸಿ. ಇದು ನಿಮಗೆ ಅಗಲ, ಬಣ್ಣ, ಗಡಿಗಳ ಉಪಸ್ಥಿತಿ / ಅನುಪಸ್ಥಿತಿ, ಅವುಗಳ ಶೈಲಿ ಮತ್ತು ಇತರ ಪ್ರದರ್ಶನ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ.
ಬೇಸಿಕ್ಸ್
ಸ್ಟೈಲಿಂಗ್ ಇಲ್ಲದ ಟೇಬಲ್ ಗಡಿಗಳಿಲ್ಲದ ರಚನಾತ್ಮಕ ಪಠ್ಯದಂತೆ ಕಾಣಿಸುತ್ತದೆ. html ನಲ್ಲಿ ಟೇಬಲ್ ಅನ್ನು ಟ್ಯಾಗ್‌ಗಳನ್ನು ಬಳಸಿ ನಿರ್ಮಿಸಲಾಗಿದೆ:
- ತಂತಿಗಳಿಗೆ tr;
- ಶೀರ್ಷಿಕೆಗಳಿಗೆ ನೇ;
- ಕಾಲಮ್‌ಗಳಿಗಾಗಿ td.
| ತಲೆ |
ತಲೆ |
ತಲೆ |
| ಕೋಶ |
ಕೋಶ |
ಕೋಶ |
| ಕೋಶ |
ಕೋಶ |
ಕೋಶ |
ಬ್ರೌಸರ್ ವಿಂಡೋದ ಅಂಚಿನಲ್ಲಿರುವ ಪಠ್ಯ ಗಾತ್ರ ಮತ್ತು ಫಾಂಟ್, ಹಿನ್ನೆಲೆ, ಇಂಡೆಂಟ್‌ಗಳನ್ನು ದೇಹದ ಧಾರಕದಲ್ಲಿ css ನಲ್ಲಿ ಹೊಂದಿಸಲಾಗಿದೆ.
ದೇಹ (ಫಾಂಟ್-ಕುಟುಂಬ: ಹೆಲ್ವೆಟಿಕಾ, ಸಾನ್ಸ್-ಸೆರಿಫ್; ಫಾಂಟ್-ಗಾತ್ರ: 5vw; ಬಣ್ಣ: ಕಪ್ಪು; ಹಿನ್ನೆಲೆ-ಬಣ್ಣ: rgba (228, 228, 245); ಪ್ಯಾಡಿಂಗ್: 20vh; )
ಮ್ಯಾಟ್ರಿಕ್ಸ್ನ ನೋಟವನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಲು ಶೈಲಿಗಳನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ಗಡಿ ಆಸ್ತಿಯು html ಟೇಬಲ್ನ ಗಡಿಯ ದಪ್ಪ, ಪ್ರಕಾರ ಮತ್ತು ಬಣ್ಣವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
(ಗಡಿ-ಅಗಲ: 2vw; ಗಡಿ-ಶೈಲಿ: ಚುಕ್ಕೆಗಳು; ಗಡಿ-ಬಣ್ಣ: ಆಕಾಶ ನೀಲಿ; )
ಗಡಿ ಎಂದು ಸಂಕ್ಷಿಪ್ತಗೊಳಿಸಲಾಗಿದೆ: ಅಗಲ ಶೈಲಿಯ ಬಣ್ಣ.
(ಅಡಿಗೆ: 1px ಘನ #4c6ea1;)
ನಿರ್ದಿಷ್ಟ ಭಾಗಕ್ಕಾಗಿ, ಇದನ್ನು ಟೆಂಪ್ಲೇಟ್ ಬಾರ್ಡರ್-ಟಾಪ್ (/ಬಲ/ಕೆಳಗೆ/ಎಡ)-ಸ್ಟೈಲ್ (/ಬಣ್ಣ/ಅಗಲ/ತ್ರಿಜ್ಯ) ಬಳಸಿ ಹೊಂದಿಸಲಾಗಿದೆ.
(ಅಡ್ಡ-ಮೇಲಿನ ಬಣ್ಣ: ಕಡುನೀಲಿ;)
ಪ್ಯಾಡಿಂಗ್ ಕೋಶದ ಒಳಗಿನ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಪಠ್ಯದಿಂದ ಫ್ರೇಮ್‌ಗೆ ಹೊಂದಿಸುತ್ತದೆ, ಪಠ್ಯ-ಅಲೈನ್ ಜೋಡಣೆಯನ್ನು ಹೊಂದಿಸುತ್ತದೆ.
ಟೇಬಲ್ನ ನೋಟವನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಲು ಶೈಲಿಗಳನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ಗಡಿಯ ಗುಣಲಕ್ಷಣವು ಗಡಿಯ ದಪ್ಪ, ಶೈಲಿ ಮತ್ತು ಬಣ್ಣವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಪ್ಯಾಡಿಂಗ್ ಪಠ್ಯದಿಂದ ಇಂಡೆಂಟೇಶನ್ ಅನ್ನು ಹೊಂದಿಸುತ್ತದೆ, ಪಠ್ಯ-ಅಲೈನ್ ಜೋಡಣೆಯನ್ನು ಹೊಂದಿಸುತ್ತದೆ.
Th, td ( ಗಡಿ: 1vw ಘನ #4c6ea1; ಪ್ಯಾಡಿಂಗ್: 1vw; ಪಠ್ಯ-ಹೊಂದಾಣಿಕೆ: ಎಡ; )
ಚೌಕಟ್ಟುಗಳಿಲ್ಲ
ಗಡಿಯನ್ನು ಬಳಸುವುದು ಅಥವಾ ಪ್ರತ್ಯೇಕವಾಗಿ ಗಡಿ-ಬಣ್ಣ, -ವಿಡ್ತ್ ಮತ್ತು -ಸ್ಟೈಲ್ ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುವ ಅಗತ್ಯವಿಲ್ಲ, ಏಕೆಂದರೆ ನೀವು ಪೂರ್ಣ ವಿನ್ಯಾಸದೊಂದಿಗೆ ಗಡಿಗಳಿಲ್ಲದೆ HTML ಟೇಬಲ್ ಅನ್ನು ಮಾಡಬಹುದು. ಉದಾಹರಣೆಗೆ, ಕೆಳಗಿನ ಕೋಡ್ ಹಿನ್ನೆಲೆ, ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ದುಂಡಾದ ಮೂಲೆಗಳನ್ನು ಹೊಂದಿಸುತ್ತದೆ (ಆಂತರಿಕ ಅಥವಾ ಹೊರಗಿನ ರೇಖೆಗಳಿಲ್ಲದ ನಂತರದ ಮ್ಯಾಟ್ರಿಕ್ಸ್).
ಕೋಷ್ಟಕ (ಪಠ್ಯ-ಹೊಂದಾಣಿಕೆ: ಎಡ; ಹಿನ್ನೆಲೆ-ಬಣ್ಣ: rgba(228, 228, 245); ಗಡಿ-ಮೇಲಿನ-ಎಡ-ತ್ರಿಜ್ಯ: 15em 1em; ಗಡಿ-ಕೆಳಗೆ-ಬಲ-ತ್ರಿಜ್ಯ: 15em 1em; ) td, ನೇ (ಪ್ಯಾಡ್ಡಿಂಗ್: 1.5vw)
ಪ್ರತಿ ಕೋಶಕ್ಕೆ ಹಿನ್ನೆಲೆ ಹೊಂದಿಸಲು ಸಾಧ್ಯವಾಗುವ ಮೂಲಕ, ಗಡಿಗಳಿಲ್ಲದ ಟೇಬಲ್ ಒಂದನ್ನು ಹೊಂದಿರುವಂತೆ ಕಾಣಿಸಬಹುದು.
ಟೇಬಲ್ (ಪಠ್ಯ-ಜೋಡಣೆ: ಎಡ; ಹಿನ್ನೆಲೆ-ಬಣ್ಣ: rgba (228, 228, 245); ಅಗಲ: 70vw; ಗಡಿ-ಅಂತರ: 2vh 2vh; ) td, th (ಪ್ಯಾಡಿಂಗ್: 1.5vh; ) td (ಹಿನ್ನೆಲೆ-ಬಣ್ಣ: rgba (247, 247, 255);
ನೀವು html ಟೇಬಲ್ನ ಗಡಿಗಳನ್ನು ತೆಗೆದುಹಾಕಬಹುದು, ಆಂತರಿಕವನ್ನು ಬಿಟ್ಟುಬಿಡಬಹುದು. ಇದನ್ನು ಮಾಡಲು, ಉದಾಹರಣೆಗೆ, ಅವರು ಕೋಶಗಳಿಗೆ (ಟಿಆರ್) ಗಡಿ ಆಸ್ತಿಯನ್ನು ಹೊಂದಿಸುತ್ತಾರೆ, ಪಕ್ಕದ ಬದಿಗಳಲ್ಲಿ ಸಾಮಾನ್ಯ ಚೌಕಟ್ಟುಗಳನ್ನು ಹೊಂದಿಸುತ್ತಾರೆ (ಕುಸಿತ) ಮತ್ತು ಮ್ಯಾಟ್ರಿಕ್ಸ್ (ಮರೆಮಾಡಲಾಗಿದೆ) ಸುತ್ತಲೂ ರೇಖೆಗಳನ್ನು ಎಳೆಯುವುದನ್ನು ನಿಷೇಧಿಸುತ್ತಾರೆ. ಕೊನೆಯ ಕ್ರಿಯೆಯು ಸೆಲ್ ಲೈನ್‌ಗಳನ್ನು ಮರೆಮಾಡುತ್ತದೆ, ಅದು ಕುಸಿತವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿದಾಗ, ಮೇಜಿನ ಹೊರ ಅಂಚುಗಳಂತೆಯೇ ಅದೇ ಸ್ಥಳದಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ.
ಕೋಷ್ಟಕ (ಪಠ್ಯ-ಜೋಡಣೆ: ಕೇಂದ್ರ; ಗಡಿ-ಕುಸಿತ: ಕುಸಿತ; ಹಿನ್ನೆಲೆ-ಬಣ್ಣ: rgba (228, 228, 245); ಗಡಿ-ತ್ರಿಜ್ಯ: 50%; ಅಗಲ: 29vh; ಎತ್ತರ: 10vh; ಗಡಿ-ಶೈಲಿ: ಮರೆಮಾಡಲಾಗಿದೆ; ) td (ಪ್ಯಾಡಿಂಗ್: 1.5vh; ಗಡಿ: 0.5vh ಘನ ಕಪ್ಪು; )
ಕುಗ್ಗಿಸಿ ಮತ್ತು ಪ್ರತ್ಯೇಕಿಸಿ
html ನಲ್ಲಿನ ಮುಖ್ಯ ಟೇಬಲ್ ಗುಣಲಕ್ಷಣಗಳಲ್ಲಿ ಒಂದಾದ ಗಡಿ-ಕುಸಿತವು ಸೆಲ್ ಗಡಿಗಳನ್ನು ಹೇಗೆ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ. ಆಸ್ತಿಯು ಮೂರು ಮೌಲ್ಯಗಳಲ್ಲಿ ಒಂದನ್ನು ಹೊಂದಬಹುದು: ಕುಸಿತ, ಪ್ರತ್ಯೇಕ, ಉತ್ತರಾಧಿಕಾರ.
ಟೇಬಲ್ (ಗಡಿ ಕುಸಿತ: ಕುಸಿತ;)
ಡೀಫಾಲ್ಟ್ ಅನ್ನು ಪ್ರತ್ಯೇಕಿಸಲು ಹೊಂದಿಸಲಾಗಿದೆ, ಆದ್ದರಿಂದ ಪ್ರತಿ ಕೋಶವು ತನ್ನದೇ ಆದ ಗಡಿಯನ್ನು ಹೊಂದಿರುತ್ತದೆ. ಕುಸಿತಕ್ಕೆ ಧನ್ಯವಾದಗಳು, ನೀವು ಕೋಶಗಳ ಸಾಲುಗಳನ್ನು ವಿಲೀನಗೊಳಿಸಬಹುದು ಇದರಿಂದ ಅವುಗಳ ವಿಷಯಗಳನ್ನು ಒಂದೇ ಚೌಕಟ್ಟಿನಿಂದ ಬೇರ್ಪಡಿಸಲಾಗುತ್ತದೆ. ಚಿತ್ರವು ಮೇಲೆ ವಿವರಿಸಿದ ಮೂರು ಗಡಿ ರಾಜ್ಯಗಳನ್ನು ತೋರಿಸುತ್ತದೆ: ಶೈಲಿಗಳಿಲ್ಲದೆ; ಗಡಿ ಕುಸಿತದೊಂದಿಗೆ ಡೀಫಾಲ್ಟ್‌ಗೆ ಹೊಂದಿಸಲಾಗಿದೆ; ಮೌಲ್ಯದ ಗಡಿ-ಕುಸಿತದೊಂದಿಗೆ, ಜೀವಕೋಶಗಳ ನಡುವೆ ಸಾಮಾನ್ಯ ರೇಖೆಯನ್ನು ಬಿಡಲಾಗುತ್ತದೆ.
ಡಬಲ್ ಚೌಕಟ್ಟುಗಳು
ಕುಸಿತದ ಆಸ್ತಿಯು html ಕೋಷ್ಟಕದಲ್ಲಿನ ಕೋಶಗಳ ಗಡಿಗಳನ್ನು ಪರಸ್ಪರ ಸ್ವತಂತ್ರವಾಗಿ ಮತ್ತು ಸಾಮಾನ್ಯವಾಗಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಗಡಿ-ಅಂತರ ಆಸ್ತಿಯನ್ನು ಹೆಚ್ಚಾಗಿ ಅದರೊಂದಿಗೆ ಬಳಸಲಾಗುತ್ತದೆ, ಇದು ಸೆಲ್ ಚೌಕಟ್ಟುಗಳ ನಡುವಿನ ಅಂತರವನ್ನು ನಿಯಂತ್ರಿಸುತ್ತದೆ. ನೀವು ಸಮತಲ ಮತ್ತು ಲಂಬ ಅಂತರವನ್ನು ಸೂಚಿಸಬಹುದು.
ಟೇಬಲ್ (ಗಡಿ ಅಂತರ: 0.5vw 1vw; )
ಮೊದಲ ಮೌಲ್ಯವು ಜೀವಕೋಶಗಳ ನಡುವಿನ ಅಂತರವನ್ನು ಅಡ್ಡಲಾಗಿ ಸೂಚಿಸುತ್ತದೆ, ಎರಡನೆಯದು - ಲಂಬವಾಗಿ. ಟೇಬಲ್‌ಗೆ ಫ್ರೇಮ್ ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದರೆ, ಅದರಿಂದ ಕೋಶಗಳಿಗೆ ಇರುವ ಅಂತರವು ಸ್ಪಾಸಿಂಗ್ ಆಸ್ತಿಯಿಂದ ಕೂಡ ರೂಪುಗೊಳ್ಳುತ್ತದೆ, ಆದರೆ ಇದು ಮ್ಯಾಟ್ರಿಕ್ಸ್ನ ಪ್ಯಾಡಿಂಗ್‌ನಿಂದ ಪ್ರಭಾವಿತವಾಗಿರುತ್ತದೆ. ಮ್ಯಾಟ್ರಿಕ್ಸ್ ಹಿನ್ನೆಲೆಯನ್ನು ಹೊಂದಿರುವ ಸಂದರ್ಭಗಳಲ್ಲಿ, ಕೋಶಗಳ ನಡುವಿನ ಮುಕ್ತ ಜಾಗವನ್ನು ಅದರೊಂದಿಗೆ ತುಂಬಿಸಲಾಗುತ್ತದೆ.
ಟೇಬಲ್ (ಅಂತರ-ಅಂತರ: 0.5vw 1vw; ಗಡಿ: 1vw ಘನ #4c6ea1; ಪ್ಯಾಡಿಂಗ್: 1vw; ಹಿನ್ನೆಲೆ-ಬಣ್ಣ: ಕಪ್ಪು; ) td, th (ಅಂಚು: 1vw ಘನ #4c6ea1; ಪ್ಯಾಡಿಂಗ್: 0.3vw; ಪಠ್ಯ-ಅಲೈನ್: ಎಡ; ಹಿನ್ನೆಲೆ ಬಣ್ಣ: ಬಿಳಿ)
ಖಾಲಿ ಕೋಶಗಳು
ಟೇಬಲ್ ವಿಲೀನಗೊಂಡ ಸೆಲ್ ಬಾರ್ಡರ್‌ಗಳನ್ನು ಹೊಂದಿಲ್ಲದಿದ್ದರೆ, ಖಾಲಿ-ಕೋಶಗಳ ಆಸ್ತಿಯು ಸೆಲ್ ಲೈನ್‌ಗಳು ಮತ್ತು ಹಿನ್ನೆಲೆಯನ್ನು ಪ್ರದರ್ಶಿಸಲು ಅನುಮತಿಸುತ್ತದೆ, ಅವುಗಳನ್ನು ಖಾಲಿ ಎಂದು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ (ಗೋಚರ ಎಂದು ಗುರುತಿಸಲಾಗಿದೆ ಅಥವಾ ಯಾವುದೇ ಅಕ್ಷರಗಳಿಲ್ಲ). ನೀವು ಪ್ರತಿ ಕೋಶದ ಗಡಿಗಳು ಮತ್ತು ಹಿನ್ನೆಲೆಯನ್ನು ತೋರಿಸಲು ಬಯಸಿದರೆ, ತೋರಿಸಲು ಆಸ್ತಿಯನ್ನು ಹೊಂದಿಸಿ.
ಟೇಬಲ್ (ಖಾಲಿ-ಕೋಶಗಳು: ಪ್ರದರ್ಶನ;)
ಹೈಡ್ ಮೌಲ್ಯವು ಖಾಲಿ ಬ್ಲಾಕ್‌ಗಳ ಗಡಿಗಳು ಮತ್ತು ಹಿನ್ನೆಲೆಗಳನ್ನು ಮರೆಮಾಡುತ್ತದೆ. ಒಂದು ಸಾಲಿನಲ್ಲಿನ ಎಲ್ಲಾ ಕೋಶಗಳು ಖಾಲಿಯಾಗಿದ್ದರೆ, ಸಾಲು ಶೂನ್ಯ ಎತ್ತರ ಮತ್ತು ಕೇವಲ ಒಂದು ಲಂಬ ರೇಖೆಯನ್ನು ಹೊಂದಿರುತ್ತದೆ.
ಕೋಷ್ಟಕ (ಅಂತರ-ಅಂತರ: 0.5vw 1vw; ಗಡಿ: 0.1vw ಘನ #4c6ea1; ಪ್ಯಾಡಿಂಗ್: 0.5vw; ಹಿನ್ನೆಲೆ-ಬಣ್ಣ: rgba (33, 31, 171, 0.12); ಖಾಲಿ-ಕೋಶಗಳು: ಮರೆಮಾಡು; ) td, th (ಗಡಿ : 0.3vw ಘನ #4c6ea1 ಪಠ್ಯ-ಹೊಂದಾಣಿಕೆ: ಎಡ;
ಗುಣಲಕ್ಷಣ
ಅಂಶಗಳ ಗುಂಪುಗಳಿಗೆ (ಕೋಶಗಳು, ಕಾಲಮ್ಗಳು, ಸಾಲುಗಳು, ಸಾಲುಗಳ ಗುಂಪುಗಳು ಅಥವಾ ಕಾಲಮ್ಗಳು) ಗಡಿಗಳನ್ನು ನಿಯೋಜಿಸಲು ನಿಯಮಗಳ ಗುಣಲಕ್ಷಣವಿದೆ. ಇದರ ಮೌಲ್ಯವನ್ನು ನೇರವಾಗಿ html ನಲ್ಲಿ ಟೇಬಲ್ ಟ್ಯಾಗ್‌ನಲ್ಲಿ ಬರೆಯಲಾಗಿದೆ.
ಅಂಶಗಳ ಚೌಕಟ್ಟುಗಳನ್ನು ಆಯ್ದವಾಗಿ ಸೆಳೆಯಲು ಇದು ನಿಮ್ಮನ್ನು ಅನುಮತಿಸುತ್ತದೆ. html ನಲ್ಲಿ ಗುಣಲಕ್ಷಣವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ಸಾಕು, ಇದು ಜೀವಕೋಶಗಳ ನಡುವೆ ಆಂತರಿಕ ರೇಖೆಗಳನ್ನು ರಚಿಸುತ್ತದೆ. html ಟೇಬಲ್ ಬಾರ್ಡರ್ ಅನ್ನು css ನಲ್ಲಿ ಹಸ್ತಚಾಲಿತವಾಗಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಬೇಕು.
| ತಲೆ |
ತಲೆ |
ತಲೆ |
| ಕೋಶ |
ಕೋಶ |
ಕೋಶ |
| ಕೋಶ |
ಕೋಶ |
ಕೋಶ |
ಟೇಬಲ್ (ಅಡ್ಡ-ಮೇಲ್ಭಾಗ: 1vw ಘನ #486743; ಫಾಂಟ್-ಗಾತ್ರ: 5vw; ) th, td (ಪ್ಯಾಡಿಂಗ್: 2vw; )
ಆದ್ದರಿಂದ, ಮೊದಲ ಚಿತ್ರವು ಟೇಬಲ್ ಮೂಲಕ ಹೆಚ್ಚುವರಿ ಫ್ರೇಮ್ ವಿನ್ಯಾಸವಿಲ್ಲದೆ ಗುಣಲಕ್ಷಣದ ಶುದ್ಧ ಕಾರ್ಯಾಚರಣೆಯನ್ನು ತೋರಿಸುತ್ತದೆ. ಎರಡನೇ ಚಿತ್ರದಲ್ಲಿ, ಮೇಲಿನ ರೇಖೆಯನ್ನು ಎಳೆಯಲಾಗುತ್ತದೆ, ಇದನ್ನು ಸೂಚನೆಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಸ್ಥಾಪಿಸಲಾಗಿದೆ.
ಟೇಬಲ್ (ಅಡ್ಡ-ಮೇಲ್ಭಾಗ: 1vw ಡಾಟೆಡ್ #486743; )
ಗುಣಲಕ್ಷಣವು ಬಹು ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಿರಬಹುದು. ಎಲ್ಲಾ 1px ನ ಅಂಚು ದಪ್ಪವಿರುವ ಕೋಶಗಳ ನಡುವೆ ಗಡಿಗಳನ್ನು ರಚಿಸುತ್ತದೆ. ಕೋಲ್ಸ್ ಕಾಲಮ್‌ಗಳ ನಡುವೆ ಸಾಲುಗಳನ್ನು ರಚಿಸುತ್ತದೆ, ಸಾಲುಗಳು - ಸಾಲುಗಳ ನಡುವೆ, ಯಾವುದೂ ಅಂಚುಗಳನ್ನು ಅಳಿಸುವುದಿಲ್ಲ. ಚಿತ್ರವು ಎಲ್ಲಾ ಮತ್ತು ಸಾಲುಗಳ ಮೌಲ್ಯಗಳೊಂದಿಗೆ ಕೋಷ್ಟಕದ ಉದಾಹರಣೆಗಳನ್ನು ತೋರಿಸುತ್ತದೆ.
ಬಾರ್ಡರ್ ಮತ್ತು ಬಾರ್ಡರ್‌ಕಲರ್ ಬಳಸಿ ನಿಯಮಗಳ ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸುವಾಗ ನೀವು ಕೋಶದ ಗಡಿಗಳ ಬಣ್ಣವನ್ನು ಮತ್ತು ಫ್ರೇಮ್‌ನ ಅಗಲವನ್ನು ಬದಲಾಯಿಸಬಹುದು.
ಶೈಲಿ ಸಂಘರ್ಷಗಳು
ಕೋಶಗಳು, ಸಾಲುಗಳು, ಕಾಲಮ್ಗಳು ಮತ್ತು ಅಂಶ ಗುಂಪುಗಳಿಗೆ ತಮ್ಮದೇ ಆದ ಗಡಿ ಮೌಲ್ಯಗಳನ್ನು ನೀಡಬಹುದು. ಆದಾಗ್ಯೂ, ಅವರು ಮೂರು ನಿಯತಾಂಕಗಳಲ್ಲಿ ಭಿನ್ನವಾಗಿರಬಹುದು: ಶೈಲಿ, ದಪ್ಪ ಮತ್ತು ಬಣ್ಣ.
ಕುಸಿತದ ಕ್ರಮದಲ್ಲಿ, ಸ್ಟೈಲಿಂಗ್ ಸಂಘರ್ಷಗಳು ಉದ್ಭವಿಸುತ್ತವೆ. ಒಂದು ಗಡಿಯು ಎರಡು ವಿಭಿನ್ನ ಕೋಶಗಳ ನಿಯಮಕ್ಕೆ ಒಳಪಟ್ಟಿರುತ್ತದೆ ಎಂಬ ಅಂಶದಿಂದಾಗಿ, ಆದ್ಯತೆಯನ್ನು ತೆಗೆದುಕೊಳ್ಳುವ ಶೈಲಿಯನ್ನು ಆಯ್ಕೆ ಮಾಡುವಲ್ಲಿ ಸಮಸ್ಯೆ ಉಂಟಾಗುತ್ತದೆ. E. ಮಲ್ಚುಕ್ ಬರೆದಂತೆ, ಅತ್ಯಂತ "ಆಕರ್ಷಕ" (ಗುಪ್ತ ಹೊರತುಪಡಿಸಿ) ಗೆಲ್ಲುತ್ತದೆ.
- ಒಂದು ಅಂಶವು ವಿವಾದಿತ ಗಡಿಯ ಗಡಿ-ಶೈಲಿಯ ಆಸ್ತಿಯನ್ನು ಮರೆಮಾಡಲು ಹೊಂದಿಸಿದ್ದರೆ, ಆ ಶೈಲಿಯು ಗೆಲ್ಲುತ್ತದೆ. ಹಿಡನ್‌ಗೆ ಹೆಚ್ಚಿನ ಆದ್ಯತೆ ಇದೆ.
- ಚಿಕ್ಕ ತೂಕ ಯಾವುದೂ ಇಲ್ಲ. ರೇಖೆಯನ್ನು ಪ್ರದರ್ಶಿಸಬಾರದು ಎಂದು ಅದು ಆದೇಶಿಸುತ್ತದೆ, ಆದರೆ ಸೂಚನೆಯನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು, ಆ ಸಾಲಿನ ಎಲ್ಲಾ ಅಂಶಗಳು ಈ (ಯಾವುದೂ ಇಲ್ಲ) ನಿಯಮವನ್ನು ಹೊಂದಿರಬೇಕು.
- ತೆಳುವಾದ ಮತ್ತು ದಪ್ಪ ಗಡಿಗಳ ನಡುವೆ, ದಪ್ಪವಾದವುಗಳು ಹೆಚ್ಚಿನ ಆದ್ಯತೆಯನ್ನು ಹೊಂದಿವೆ.
- ಒಂದೇ ರೀತಿಯ ಚೌಕಟ್ಟುಗಳೊಂದಿಗೆ, ಆದರೆ ವಿಭಿನ್ನ ಶೈಲಿಗಳು, ಡಬಲ್ ಘನ ಯಾವಾಗಲೂ ಗೆಲ್ಲುತ್ತದೆ, ನಂತರ ಘನ, ಡ್ಯಾಶ್, ಚುಕ್ಕೆಗಳು.
- ಕೇವಲ ವ್ಯತ್ಯಾಸಗಳು ಬಣ್ಣಗಳಾಗಿದ್ದರೆ, ಚಿಕ್ಕ ಘಟಕದ ನೋಟವು ಯಾವಾಗಲೂ ಹೆಚ್ಚಾಗಿರುತ್ತದೆ (ಸೆಲ್ ಅಲಂಕಾರವು ಸಾಲುಗಳಿಗಿಂತ ಹೆಚ್ಚಿನ ಆದ್ಯತೆಯನ್ನು ಹೊಂದಿದೆ ಮತ್ತು ಸಾಲುಗಳು ಕೋಷ್ಟಕಗಳಿಗಿಂತ ಹೆಚ್ಚಿನದಾಗಿರುತ್ತದೆ).
ಸಂಘರ್ಷದ ವಿವರಣೆ
ಈಗಾಗಲೇ ಚರ್ಚಿಸಿದ ಕೋಷ್ಟಕವನ್ನು ಬಳಸಿಕೊಂಡು ಶೈಲಿಗಳ ಸಂಘರ್ಷವನ್ನು ವಿವರಿಸುವುದು ಸುಲಭ. ಕೋಶಗಳಿಗೆ ಒಂದೆರಡು ತರಗತಿಗಳನ್ನು ಸೇರಿಸಲು ಮತ್ತು ಅವುಗಳಿಗೆ ವಿನ್ಯಾಸವನ್ನು ಸೂಚಿಸಲು ಸಾಕು. Html ರೂಪವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ:
| ತಲೆ |
ತಲೆ |
ತಲೆ |
| ಕೋಶ |
ಕೋಶ |
ಕೋಶ |
| ಕೋಶ |
ಕೋಶ |
ಕೋಶ |
ಅನುಗುಣವಾದ css.
ದೇಹ (ಫಾಂಟ್-ಕುಟುಂಬ: ಹೆಲ್ವೆಟಿಕಾ, ಸಾನ್ಸ್-ಸೆರಿಫ್; ಫಾಂಟ್-ಗಾತ್ರ: 5vw; ಬಣ್ಣ: ಕಪ್ಪು; ಅಂಚು: 0; ಅಗಲ: 80vw; ಹಿನ್ನೆಲೆ-ಬಣ್ಣ: ಬಿಳಿ; ಪ್ಯಾಡಿಂಗ್: 3vw; ) ಟೇಬಲ್ (ಹಿನ್ನೆಲೆ-ಬಣ್ಣ: rgba(33) , 31, 171, 0.12); ಗಡಿ-ಕುಸಿತ: ಗಡಿ-ಅಂತರ: ಘನ #4c6ea1; .ಎರಡನೇ_ಕೋಶ (ಅಡಿಗೆ: 0.01vw ಘನ #4c6ea1; ) .ಮೂರನೇ_ಕೋಶ (ಅಡಿಗೆ: 0.01vw ಡಬಲ್ ಕೆಂಪು; )
ಫ್ರೇಮ್ ಶೈಲಿಗಳು
ಗಡಿ ವಿನ್ಯಾಸವನ್ನು ಕೋಶದ ಪ್ರತಿಯೊಂದು ಬದಿಗೆ ಪ್ರತ್ಯೇಕವಾಗಿ ಹೊಂದಿಸಬಹುದು. ಇದನ್ನು ಮಾಡಲು, ಗಡಿ-ಶೈಲಿಯಲ್ಲಿ ಒಂದು ಮೌಲ್ಯವನ್ನು ಸೂಚಿಸಲು ಸಾಕು, ಆದರೆ ಕೋಶದ ಬದಿಗಳಿಗೆ ಅನುಗುಣವಾಗಿ ನಾಲ್ಕನ್ನು ಪಟ್ಟಿ ಮಾಡಿ.
Th, td (ಪ್ಯಾಡಿಂಗ್: 1vw; ಪಠ್ಯ-ಹೊಂದಾಣಿಕೆ: ಎಡ; ಗಡಿ-ಅಗಲ: 0.5vw; ಗಡಿ-ಬಣ್ಣ: ಗಾಢ; ಗಡಿ-ಶೈಲಿ: ಚುಕ್ಕೆಗಳು; ) .ಏಳು (ಗಡಿ-ಮೇಲಿನ ಬಣ್ಣ: ಆಕಾಶ ನೀಲಿ; ಗಡಿ-ಮೇಲಿನ ಶೈಲಿ : ಗಡಿ-ಬಲ-ಅಗಲ: ಗಡಿ-ಕೆಳ-ಶೈಲಿ: ಗಡಿ-ಎಡ-ಶೈಲಿ:
ಒಂದರಿಂದ ನಾಲ್ಕು ವಿಭಿನ್ನ ಮೌಲ್ಯಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುವ ಮೂಲಕ ನೀವು ಒಂದು ಸಾಲಿನಲ್ಲಿ ಡೇಟಾವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು. ಪ್ರತಿಯೊಂದೂ ಸಾಂಪ್ರದಾಯಿಕವಾಗಿ ಒಂದು ಪಕ್ಷಕ್ಕೆ ಸೂಚನೆಯಾಗುತ್ತದೆ.
- ನೀವು ಎರಡು ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಿಸಿದರೆ, ಮೊದಲನೆಯದು ಕೆಳಗಿನ ಮತ್ತು ಮೇಲಿನ ಗಡಿಗಳಿಗೆ ಜವಾಬ್ದಾರರಾಗಿರುತ್ತದೆ, ಎರಡನೆಯದು - ಎಡ ಮತ್ತು ಬಲಕ್ಕೆ.
- ಮೂರರಲ್ಲಿ, ಮೊದಲನೆಯದು ಮೇಲ್ಭಾಗಕ್ಕೆ, ಎರಡನೆಯದು ಎಡ ಮತ್ತು ಬಲಕ್ಕೆ ಮತ್ತು ಮೂರನೆಯದು ಬಾಟಮ್ ಲೈನ್‌ಗೆ ಕಾರಣವಾಗಿದೆ.
- ಮೇಲಿನ ಪ್ರದಕ್ಷಿಣಾಕಾರದಿಂದ ಎಡಕ್ಕೆ ಪ್ರಾರಂಭವಾಗುವ ನಾಲ್ಕು ಮೌಲ್ಯಗಳು ಪ್ರತಿಯೊಂದು ಸಾಲುಗಳನ್ನು ಅನನ್ಯವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸುತ್ತವೆ.
ಮೇಲೆ ತೋರಿಸಿರುವಂತೆ ಪ್ರತಿ ಬದಿಯ ಡೇಟಾವನ್ನು ಸರಳವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸುವ ಮೂಲಕ ನೀವು ಕೋಶದ ಗಡಿಗಳ ವಿನ್ಯಾಸವನ್ನು ಸಹ ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು.
ಒಟ್ಟು ಹತ್ತು ಫ್ರೇಮ್ ಶೈಲಿಗಳಿವೆ. ಅವರೆಲ್ಲರೂ ರೇಖೆಯನ್ನು ಬದಲಾಯಿಸುತ್ತಾರೆ ಅಥವಾ ಅದನ್ನು ತೆಗೆದುಹಾಕುತ್ತಾರೆ:
- ಯಾವುದೂ ಇಲ್ಲ - ಗಡಿ ಇಲ್ಲ;
- ಮರೆಮಾಡಲಾಗಿದೆ - ಹೆಚ್ಚು ಕಟ್ಟುನಿಟ್ಟಾದ ಯಾವುದೂ ಇಲ್ಲ, ಲಕ್ಷಣದ ನೋಟವನ್ನು ನಿರ್ಬಂಧಿಸುತ್ತದೆ (ಘರ್ಷಣೆಯ ಪರಿಸ್ಥಿತಿಯಲ್ಲಿ);
- ಚುಕ್ಕೆ - ಚುಕ್ಕೆಗಳಿಂದ ಮಾಡಲ್ಪಟ್ಟಿದೆ;
- ಡ್ಯಾಶ್ಡ್ - ಚುಕ್ಕೆಗಳು;
- ಘನ - ಘನ;
- ಡಬಲ್ - ಡಬಲ್ ಘನ;
- ತೋಡು - ಚೌಕಟ್ಟನ್ನು ಮೇಲ್ಮೈಗೆ ಒತ್ತುವಂತೆ ತೋರುತ್ತದೆ;
- ರಿಡ್ಜ್ - ಪೀನ ರೇಖೆ;
- ಇನ್ಸೆಟ್ - ವಾಸ್ತವವಾಗಿ, ಅಂಶದ ಒಂದು ಬದಿಗೆ ಅದು ರಿಡ್ಜ್ನಂತೆ ವರ್ತಿಸುತ್ತದೆ, ಸಂಪೂರ್ಣ ಅಂಶಕ್ಕೆ ಅನ್ವಯಿಸಿದರೆ, ನಂತರ ಮೇಲ್ಭಾಗ ಮತ್ತು ಎಡವು ಮಬ್ಬಾಗಿರುತ್ತದೆ ಮತ್ತು ಕೆಳಭಾಗ ಮತ್ತು ಬಲವನ್ನು ಹೈಲೈಟ್ ಮಾಡಲಾಗುತ್ತದೆ;
- ಪ್ರಾರಂಭ - ಒಂದು ಅಂಶದ ಒಂದು ಬದಿಗೆ ಅನ್ವಯಿಸಿದಾಗ ತೋಡಿನಂತೆ ವರ್ತಿಸುತ್ತದೆ, ಇದು ಕೆಳಭಾಗ ಮತ್ತು ಬಲವನ್ನು ಅಸ್ಪಷ್ಟಗೊಳಿಸುತ್ತದೆ, ಮೇಲ್ಭಾಗ ಮತ್ತು ಎಡವನ್ನು ಹಗುರಗೊಳಿಸುತ್ತದೆ.
ಪ್ರತಿಯೊಂದು ಕೋಶಗಳಿಗೆ (ಮೇಲಿನ ಮತ್ತು ಎಡಭಾಗಕ್ಕೆ) ಶೈಲಿಗಳಲ್ಲಿ ಒಂದನ್ನು ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ. ಅವರು ಪರಸ್ಪರ ಸ್ಪರ್ಧಿಸುವುದಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು, "ದುರ್ಬಲ" ಪದಗಳಿಗಿಂತ ಹೆಚ್ಚಿನ ಮೌಲ್ಯಗಳನ್ನು ನೀಡಲಾಗುತ್ತದೆ.
ಟೇಬಲ್ (ಹಿನ್ನೆಲೆ-ಬಣ್ಣ: rgba(33, 31, 171, 0.12); ಪ್ಯಾಡಿಂಗ್: 0.5vw; ಗಡಿ-ಕುಸಿತ: ಕುಸಿತ; ಗಡಿ: 0.3vw ಘನ ಕಪ್ಪು; ) th, td (ಪ್ಯಾಡಿಂಗ್: 1vw; ಪಠ್ಯ-ಹೊಂದಾಣಿಕೆ: ಎಡ; ) .ಒಂದು (ಗಡಿ-ಮೇಲ್ಭಾಗ: ಮರೆಮಾಡಲಾಗಿದೆ; ಗಡಿ-ಎಡ: ಮರೆಮಾಡಲಾಗಿದೆ; ) .ಎರಡು (ಗಡಿ-ಮೇಲ್ಭಾಗ: 0.4vw ಡಬಲ್ #4c6ea1; ಗಡಿ-ಎಡ: 0.4vw ಡಬಲ್ #4c6ea1; ) .ಮೂರು (ಗಡಿ-ಮೇಲ್ಭಾಗ: 0.5vw ಘನ #4c6ea1; ಗಡಿ-ಎಡ: 0.5vw ಘನ #4c6ea1; ಗಡಿ-ಮೇಲ್ಭಾಗದಲ್ಲಿ ಗಡಿ-ಎಡ: 0.8vw ಚುಕ್ಕೆಗಳು #4c6ea1; : 1vw ಔಟ್‌ಸೆಟ್ #4c6ea1; .ಎಂಟು (ಅಡ್ಡ-ಮೇಲ್ಭಾಗ: 1.1vw ಗ್ರೂವ್ #4c6ea1; ಗಡಿ-ಎಡ: 1.1vw ಗ್ರೂವ್ #4c6ea1; ) .ಒಂಬತ್ತು (ಗಡಿ-ಮೇಲ್ಭಾಗ: 1.2vw ಒಳಹೊಕ್ಕು #4c6ea1; ಗಡಿ-ಎಡ: 1. ಇನ್ಸೆಟ್ #4c6ea1;
ವಸ್ತುವಿನ ರಚನೆ
ಮ್ಯಾಟ್ರಿಕ್ಸ್‌ನಲ್ಲಿ ಪ್ರಸ್ತುತಪಡಿಸಲಾದ ಡೇಟಾದ ಸ್ವರೂಪಕ್ಕೆ ಸಾಮಾನ್ಯವಾಗಿ ಟೇಬಲ್ನ ಗಡಿಗಳು, ಸೆಲ್ ಫ್ರೇಮ್‌ಗಳು, ಸಾಲುಗಳು ಅಥವಾ ಕಾಲಮ್‌ಗಳ ಮಾರ್ಪಾಡು ಅಗತ್ಯವಿರುತ್ತದೆ. ಇದಕ್ಕಾಗಿ ನೀವು ಬಳಸಬಹುದು:
- ಶೂನ್ಯ ರೇಖೆಗಳು (ಅಗಲ-ಅಗಲಕ್ಕಾಗಿ 0px ಮೌಲ್ಯವನ್ನು ಸೂಚಿಸಿ);
- ಮರೆಮಾಡಲಾಗಿದೆ.
ಮರೆಮಾಡಿದ ಪ್ರಯೋಜನವು ಅದರ ಆದ್ಯತೆಯಾಗಿದೆ. ಎರಡು ಅಂಶಗಳ ನಿಯಮವು ಏಕಕಾಲದಲ್ಲಿ ಗಡಿಗೆ ಅನ್ವಯಿಸಿದರೆ ಮತ್ತು ಅವುಗಳಲ್ಲಿ ಒಂದನ್ನು ಗಡಿ-ಶೈಲಿಯಲ್ಲಿ ಮರೆಮಾಡಿದ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿದ್ದರೆ, ರೇಖೆಯನ್ನು ಪ್ರದರ್ಶಿಸಲಾಗುವುದಿಲ್ಲ. ಅಂದರೆ, ನೀವು ಸಂಪೂರ್ಣ ಟೇಬಲ್ ಅನ್ನು ಸುಲಭವಾಗಿ ರಚಿಸಬಹುದು ಮತ್ತು ನಂತರ ಅನಗತ್ಯ ಚೌಕಟ್ಟುಗಳನ್ನು ಆಯ್ದವಾಗಿ ತೆಗೆದುಹಾಕಬಹುದು.
ಕೋಶಗಳ ಮೇಲೆ ಮರೆಮಾಡಿದ ಬಳಕೆಯು ಇತರ ವಿಧಾನಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಗಡಿಯನ್ನು ಪುನಃಸ್ಥಾಪಿಸಲು ಅಸಾಧ್ಯವಾಗುತ್ತದೆ (ಹೆವಿವೇಯ್ಟ್ ಹೊರತುಪಡಿಸಿ! ಪ್ರಮುಖವಾಗಿದೆ). ಆದ್ದರಿಂದ, ನೀವು ಕೋಶಗಳ ಕೆಲವು ಬದಿಗಳನ್ನು ತೆಗೆದುಹಾಕಬೇಕಾದರೆ, ಯಾವುದನ್ನೂ ಬಳಸದಿರುವುದು ಉತ್ತಮ.
ಟೇಬಲ್ ಇದೆ ಎಂದು ಹೇಳೋಣ. ಮೊದಲ ಸಾಲಿನೊಳಗೆ ಲಂಬವಾದ ಗಡಿಗಳನ್ನು ತೆಗೆದುಹಾಕುವುದು ಗುರಿಯಾಗಿದೆ. ಇದನ್ನು ಪ್ರತ್ಯೇಕ ಟ್ಯಾಗ್ (ಶೀರ್ಷಿಕೆ) ನೊಂದಿಗೆ ಗುರುತಿಸಲಾಗಿದೆ, ಆದ್ದರಿಂದ ಹೆಚ್ಚುವರಿ ವರ್ಗವನ್ನು ನಮೂದಿಸುವ ಅಗತ್ಯವಿಲ್ಲ. ನೀವು ಸಂಪೂರ್ಣ ಟ್ಯಾಗ್‌ಗೆ ಮರೆಮಾಡಲು ಅನ್ವಯಿಸಿದರೆ, ಗಡಿ-ಎಡವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಿ, ನಂತರ ಆಂತರಿಕ ಗಡಿಗಳ ಜೊತೆಗೆ, ಟೇಬಲ್ನ ಸೈಡ್ ಫ್ರೇಮ್‌ನ ಒಂದು ಭಾಗವನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ, ಅದು ಷರತ್ತಿಗೆ ಅಗತ್ಯವಿಲ್ಲ. ನೀವು ಯಾವುದೂ ಇಲ್ಲ ಮತ್ತು ಮ್ಯಾಟ್ರಿಕ್ಸ್ ರೇಖೆಯನ್ನು ಬಳಸಿದರೆ, ಆಂತರಿಕ ರೇಖೆಗಳಿಗೆ ಎರಡು ಸಂಘರ್ಷವಿಲ್ಲದ ನಿಯಮಗಳಿರುತ್ತವೆ ಮತ್ತು ಹೊರ ಅಂಚಿಗೆ ಯಾವುದೂ ಕೋಷ್ಟಕದಲ್ಲಿ ನೀಡಲಾದ ನಿಯಮದೊಂದಿಗೆ ಸಂಘರ್ಷಿಸುವುದಿಲ್ಲ ಮತ್ತು ಬದಿಯು ಸ್ಥಳದಲ್ಲಿ ಉಳಿಯುತ್ತದೆ. .
ಪ್ರತ್ಯೇಕ ಸೆಲ್ ಲೈನ್‌ಗಳನ್ನು ತೆಗೆದುಹಾಕುವುದನ್ನು ಶೈಲಿ, ಅಗಲ ಮತ್ತು ಬಣ್ಣದ ಪ್ರತ್ಯೇಕ ಸೆಟ್ಟಿಂಗ್‌ಗಾಗಿ ತೋರಿಸಿರುವಂತೆ ಅನುಗುಣವಾದ ಅಂಶಗಳಿಗೆ ನಿಯೋಜಿಸಲಾದ ತರಗತಿಗಳನ್ನು ಬಳಸಿ ಮಾಡಲಾಗುತ್ತದೆ.
ಆದರೆ ಕೋಷ್ಟಕದಲ್ಲಿ ಸೂಚಿಸಲಾದ ಮ್ಯಾಟ್ರಿಕ್ಸ್ನ ಹೊರಗಿನ ಚೌಕಟ್ಟುಗಳನ್ನು ಉಲ್ಲೇಖಿಸುವ ಮೂಲಕ html ಕೋಷ್ಟಕದಲ್ಲಿ ಅಡ್ಡ ಗಡಿಯನ್ನು ತೆಗೆದುಹಾಕಲು ಸುಲಭವಾಗಿದೆ. css ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟ ರೇಖೆಯನ್ನು ಸೂಚಿಸಲು ಸಾಕು.
ಟೇಬಲ್ (ಗಡಿ-ಎಡ ಶೈಲಿ: ಮರೆಮಾಡಲಾಗಿದೆ; )
ಸಾಲುಗಳಲ್ಲಿ ಗಡಿಗಳನ್ನು ತೆಗೆದುಹಾಕುವುದು tr ನಲ್ಲಿ ಅಡಗಿರುವ ಮೌಲ್ಯದೊಂದಿಗೆ ಗಡಿ ಆಸ್ತಿಯನ್ನು ಬಳಸಿಕೊಂಡು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಸುಲಭವಾಗಿದೆ. ಮೇಜಿನ ಸಮತಲವಾಗಿರುವ ರೇಖೆಗಳು ಮಾತ್ರ ಕಣ್ಮರೆಯಾಗುತ್ತವೆ, ಆದರೆ ಪಕ್ಕದವುಗಳೂ ಸಹ. ಮ್ಯಾಟ್ರಿಕ್ಸ್ ಲಂಬ ಕಾಲಮ್‌ಗಳಾಗಿ ಕ್ಷೀಣಿಸುತ್ತದೆ.
Tr (ಗಡಿ ಶೈಲಿ: ಮರೆಮಾಡಲಾಗಿದೆ; )
ಕೊನೆಯ ಉಪಾಯವಾಗಿ, ಪ್ರಮುಖ! ಸೂಚನೆಯ ನಂತರ ನೀವು ಅದನ್ನು ಸೇರಿಸಿದರೆ, ಅದು ಹೆಚ್ಚುವರಿ ಆದ್ಯತೆಯನ್ನು ಪಡೆಯುತ್ತದೆ.
HTML ಟೇಬಲ್ ಗಡಿಗಳು ಹೊಂದಿಕೊಳ್ಳುವ ಮತ್ತು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಸುಲಭ. ಗಡಿ ಆಸ್ತಿ ಗುಂಪು ನಿಮಗೆ ಅಂಶಗಳನ್ನು ಮರೆಮಾಡಲು, ಬಣ್ಣ, ಅಗಲ ಅಥವಾ ಶೈಲಿಯನ್ನು ಬದಲಾಯಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. ಕೋಷ್ಟಕಗಳ ಅನನುಕೂಲವೆಂದರೆ ಒಂದು ಪ್ರತ್ಯೇಕ ಅಂಶಕ್ಕೆ ಅನ್ವಯಿಸಲಾದ ನಿಯಮಗಳ ಸಂಯೋಜನೆಯ ಫಲಿತಾಂಶವು ಯಾವಾಗಲೂ ಸ್ಪಷ್ಟವಾಗಿ ಊಹಿಸಲಾಗುವುದಿಲ್ಲ. ಇದರ ದೃಷ್ಟಿಯಿಂದ, ಗಡಿಗಳಿಗೆ ಸಂಭವನೀಯ ಶೈಲಿಗಳ ಸಂಖ್ಯೆಯನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಅಥವಾ ಅವುಗಳನ್ನು ಆಯ್ದವಾಗಿ ಅನ್ವಯಿಸಲು ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ.
ಈ ಉಪನ್ಯಾಸವು HTML ಮಾರ್ಕ್‌ಅಪ್‌ನಲ್ಲಿ ಕೋಷ್ಟಕಗಳನ್ನು ಬಳಸುವ ತತ್ವಗಳನ್ನು ವಿವರವಾಗಿ ಚರ್ಚಿಸುತ್ತದೆ. ಇದು ಪಠ್ಯದ ಕೋಷ್ಟಕ ಸಂಘಟನೆ, ಕೋಷ್ಟಕ ನಿರ್ದೇಶಾಂಕ ಗ್ರಿಡ್ ಮತ್ತು ಕೋಷ್ಟಕಗಳಲ್ಲಿ ಆಯೋಜಿಸಲಾದ ಗ್ರಾಫಿಕ್ಸ್ ಅನ್ನು ಒಳಗೊಂಡಿದೆ.
HTML ನಲ್ಲಿ ಕೋಷ್ಟಕಗಳನ್ನು ವಿವರಿಸುವ ಪರಿಕರಗಳು
WWW ಅಭಿವೃದ್ಧಿಪಡಿಸಿದಂತೆ, HTML ನಲ್ಲಿ ಒಳಗೊಂಡಿರುವ ಸಂಪನ್ಮೂಲಗಳು ವಿವಿಧ ರೀತಿಯ ದಾಖಲೆಗಳ ಉತ್ತಮ-ಗುಣಮಟ್ಟದ ಪ್ರದರ್ಶನವನ್ನು ಒದಗಿಸಲು ಸಾಕಾಗುವುದಿಲ್ಲ ಎಂಬುದು ಸ್ಪಷ್ಟವಾಯಿತು. HTML ನ ಅನನುಕೂಲವೆಂದರೆ ಕೋಷ್ಟಕಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ಉಪಕರಣಗಳ ಕೊರತೆ. ಈ ಉದ್ದೇಶಕ್ಕಾಗಿ, ಪೂರ್ವ ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಿದ ಪಠ್ಯ (ಟ್ಯಾಗ್
), ಇದರಲ್ಲಿ ಟೇಬಲ್ ಅನ್ನು ASCII ಅಕ್ಷರಗಳಲ್ಲಿ ವಿವರಿಸಲಾಗಿದೆ. ಆದರೆ ಕೋಷ್ಟಕಗಳನ್ನು ಪ್ರಸ್ತುತಪಡಿಸುವ ಈ ರೂಪವು ಸಾಕಷ್ಟು ಉತ್ತಮ ಗುಣಮಟ್ಟವನ್ನು ಹೊಂದಿಲ್ಲ ಮತ್ತು ಡಾಕ್ಯುಮೆಂಟ್ನ ಸಾಮಾನ್ಯ ಶೈಲಿಯಿಂದ ಎದ್ದು ಕಾಣುತ್ತದೆ. HTML ನಲ್ಲಿ ಕೋಷ್ಟಕಗಳ ಪರಿಚಯದ ನಂತರ, ವೆಬ್‌ಮಾಸ್ಟರ್‌ಗಳು ಪಠ್ಯ ಮತ್ತು ಸಂಖ್ಯಾತ್ಮಕ ಡೇಟಾವನ್ನು ಇರಿಸುವ ಸಾಧನವನ್ನು ಹೊಂದಿರಲಿಲ್ಲ, ಆದರೆ ಪರದೆಯ ಮೇಲೆ ಸರಿಯಾದ ಸ್ಥಳದಲ್ಲಿ ಗ್ರಾಫಿಕ್ ಚಿತ್ರಗಳು ಮತ್ತು ಪಠ್ಯವನ್ನು ಇರಿಸಲು ಪ್ರಬಲ ವಿನ್ಯಾಸ ಸಾಧನವಾಗಿದೆ.
HTML ನಲ್ಲಿ ಕೋಷ್ಟಕಗಳನ್ನು ರಚಿಸುವುದು
ಕೋಷ್ಟಕಗಳನ್ನು ವಿವರಿಸಲು ಟ್ಯಾಗ್ ಅನ್ನು ಬಳಸಲಾಗುತ್ತದೆ<ТАВLЕ>. ಟ್ಯಾಗ್ ಮಾಡಿ<ТАВLЕ>, ಇತರ ಅನೇಕರಂತೆ, ಟೇಬಲ್ನ ಮೊದಲು ಮತ್ತು ನಂತರ ಸಾಲನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಅನುವಾದಿಸುತ್ತದೆ.
ಟೇಬಲ್ ಸಾಲು ರಚಿಸಲಾಗುತ್ತಿದೆ - ಟ್ಯಾಗ್<ТR>
ಟ್ಯಾಗ್ ಮಾಡಿ<ТR>(ಟೇಬಲ್ ರೋ) ಟೇಬಲ್ ಸಾಲನ್ನು ರಚಿಸುತ್ತದೆ. ಒಂದು ಸಾಲಿನಲ್ಲಿ ಇರಿಸಬೇಕಾದ ಎಲ್ಲಾ ಪಠ್ಯ, ಇತರ ಟ್ಯಾಗ್ಗಳು ಮತ್ತು ಗುಣಲಕ್ಷಣಗಳನ್ನು lt;TR> ಟ್ಯಾಗ್‌ಗಳ ನಡುವೆ ಇರಿಸಬೇಕು.
ಟೇಬಲ್ ಕೋಶಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು - ಟ್ಯಾಗ್<ТD>
ಡೇಟಾ ಹೊಂದಿರುವ ಕೋಶಗಳನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಟೇಬಲ್ ಸಾಲಿನೊಳಗೆ ಇರಿಸಲಾಗುತ್ತದೆ. ಪಠ್ಯ ಅಥವಾ ಚಿತ್ರವನ್ನು ಹೊಂದಿರುವ ಪ್ರತಿಯೊಂದು ಕೋಶವು ಟ್ಯಾಗ್‌ಗಳಿಂದ ಸುತ್ತುವರಿದಿರಬೇಕು<ТD>. ಟ್ಯಾಗ್‌ಗಳ ಸಂಖ್ಯೆ<ТD>ಸತತವಾಗಿ ಜೀವಕೋಶಗಳ ಸಂಖ್ಯೆಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ
ಟೇಬಲ್
| ಒಂದು ಟೇಬಲ್ ಎರಡು TR ಟ್ಯಾಗ್‌ಗಳನ್ನು ಹೊಂದಿದ್ದರೆ, ಅದು ಎರಡು ಸಾಲುಗಳನ್ನು ಹೊಂದಿರುತ್ತದೆ. |
| ಒಂದು ಸಾಲಿನಲ್ಲಿ ಮೂರು TD ಟ್ಯಾಗ್‌ಗಳಿದ್ದರೆ, |
ನಂತರ ಅದರಲ್ಲಿ |
ಮೂರು ಕಾಲಮ್ಗಳು. |
ಟೇಬಲ್ ಕಾಲಮ್ ಶೀರ್ಷಿಕೆಗಳು - ಟ್ಯಾಗ್<ТН>
ಹೆಡರ್ ಟ್ಯಾಗ್ ಬಳಸಿ ಟೇಬಲ್ ಕಾಲಮ್ಗಳು ಮತ್ತು ಸಾಲುಗಳಿಗಾಗಿ ಶೀರ್ಷಿಕೆಗಳನ್ನು ಹೊಂದಿಸಲಾಗಿದೆ<ТН>(ಟೇಬಲ್ ಹೆಡರ್, ಟೇಬಲ್ ಶೀರ್ಷಿಕೆ). ಈ ಟ್ಯಾಗ್ಗಳು ಹೋಲುತ್ತವೆ<ТD>. ವ್ಯತ್ಯಾಸವೆಂದರೆ ಟ್ಯಾಗ್‌ಗಳ ನಡುವೆ ಪಠ್ಯವನ್ನು ಸುತ್ತುವರಿಯಲಾಗಿದೆ<ТН>, ಸ್ವಯಂಚಾಲಿತವಾಗಿ ದಪ್ಪದಲ್ಲಿ ಬರೆಯಲಾಗುತ್ತದೆ ಮತ್ತು ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಕೋಶದ ಮಧ್ಯದಲ್ಲಿ ಇರಿಸಲಾಗುತ್ತದೆ. ನೀವು ಕೇಂದ್ರೀಕರಣವನ್ನು ರದ್ದುಗೊಳಿಸಬಹುದು ಮತ್ತು ಪಠ್ಯವನ್ನು ಎಡ ಅಥವಾ ಬಲಕ್ಕೆ ಜೋಡಿಸಬಹುದು. ನೀವು ಬಳಸಿದರೆ<ТD>ಟ್ಯಾಗ್ನೊಂದಿಗೆ<В>ಮತ್ತು ಗುಣಲಕ್ಷಣ<АLIGN=center>, ಪಠ್ಯವು ಶೀರ್ಷಿಕೆಯಂತೆ ಕಾಣಿಸುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಎಲ್ಲಾ ಬ್ರೌಸರ್ಗಳು ಟೇಬಲ್‌ಗಳಲ್ಲಿ ಬೋಲ್ಡ್ ಫಾಂಟ್ ಅನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ ಎಂಬುದನ್ನು ನೆನಪಿನಲ್ಲಿಡಿ, ಆದ್ದರಿಂದ ಟೇಬಲ್ ಶೀರ್ಷಿಕೆಗಳನ್ನು ಹೊಂದಿಸುವುದು ಉತ್ತಮ<ТН>.
| ಶಿರೋಲೇಖವು ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಕೇಂದ್ರೀಕೃತವಾಗಿದೆ |
ಹೆಡರ್ ಕಾಲಮ್‌ಗಳನ್ನು ಸೇರಬಹುದು |
| ಹೆಡರ್ ಅನ್ನು ಕಾಲಮ್‌ಗಳ ಮೊದಲು ಇರಿಸಬಹುದು |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
| ಶಿರೋಲೇಖವು ಸಾಲುಗಳನ್ನು ಜೋಡಿಸಬಹುದು |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
| ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
| ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಟೇಬಲ್ ಹೆಡರ್ಗಳನ್ನು ಬಳಸುವುದು - ಟ್ಯಾಗ್<САРТIОN>
ಟ್ಯಾಗ್ ಮಾಡಿ
ಟೇಬಲ್ ಹೆಡರ್ಗಳನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ಶೀರ್ಷಿಕೆಗಳನ್ನು ಕೇಂದ್ರೀಕರಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಮೇಲೆ ಇರಿಸಲಾಗುತ್ತದೆ (<САРТION АLIGN=top>), ಅಥವಾ ಮೇಜಿನ ಕೆಳಗೆ (<САРТION ALIGN=bottom>) ಶೀರ್ಷಿಕೆಯು ಯಾವುದೇ ಪಠ್ಯ ಮತ್ತು ಚಿತ್ರಗಳನ್ನು ಒಳಗೊಂಡಿರಬಹುದು. ಪಠ್ಯವನ್ನು ಟೇಬಲ್ನ ಅಗಲಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಸಾಲುಗಳಾಗಿ ವಿಂಗಡಿಸಲಾಗಿದೆ. ಕೆಲವೊಮ್ಮೆ ಟ್ಯಾಗ್<САРТION>ಚಿತ್ರವನ್ನು ಸಹಿ ಮಾಡಲು ಬಳಸಲಾಗುತ್ತದೆ. ಇದನ್ನು ಮಾಡಲು, ಗಡಿಗಳಿಲ್ಲದ ಟೇಬಲ್ ಅನ್ನು ವಿವರಿಸಲು ಸಾಕು.
ಮೇಜಿನ ಮೇಲಿರುವ ಶಿರೋಲೇಖ
| ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಮೇಜಿನ ಕೆಳಗೆ ಶಿರೋನಾಮೆ
| ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
NOWRAP ಗುಣಲಕ್ಷಣ
ವಿಶಿಷ್ಟವಾಗಿ, ಟೇಬಲ್ ಸೆಲ್‌ನ ಒಂದು ಸಾಲಿನಲ್ಲಿ ಹೊಂದಿಕೆಯಾಗದ ಯಾವುದೇ ಪಠ್ಯವು ಮುಂದಿನ ಸಾಲಿಗೆ ಚಲಿಸುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಟ್ಯಾಗ್‌ಗಳೊಂದಿಗೆ NOWRAP ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸುವಾಗ<ТН>ಅಥವಾ<ТD>ಕೋಶದ ಉದ್ದವನ್ನು ವಿಸ್ತರಿಸಲಾಗಿದೆ ಆದ್ದರಿಂದ ಅದರಲ್ಲಿರುವ ಪಠ್ಯವು ಒಂದು ಸಾಲಿನಲ್ಲಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ.
COLSPAN ಗುಣಲಕ್ಷಣ
ಟ್ಯಾಗ್ಗಳು<ТD>ಮತ್ತು<ТН>COLSPAN ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಿಕೊಂಡು ಮಾರ್ಪಡಿಸಲಾಗಿದೆ (ಕಾಲಮ್ ಸ್ಪ್ಯಾನ್, ಕಾಲಮ್ ಸಂಪರ್ಕ). ನೀವು ಕೋಶವನ್ನು ಮೇಲ್ಭಾಗ ಅಥವಾ ಕೆಳಭಾಗಕ್ಕಿಂತ ಅಗಲವಾಗಿ ಮಾಡಲು ಬಯಸಿದರೆ, ಯಾವುದೇ ಸಂಖ್ಯೆಯ ಸಾಮಾನ್ಯ ಕೋಶಗಳ ಮೇಲೆ ಅದನ್ನು ವಿಸ್ತರಿಸಲು ನೀವು COLSPAN ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಬಹುದು.
| ನೀವು ಯಾವುದೇ ಕೋಶವನ್ನು ಮೇಲ್ಭಾಗ ಅಥವಾ ಕೆಳಭಾಗಕ್ಕಿಂತ ಅಗಲವಾಗಿ ಮಾಡಲು ಬಯಸಿದರೆ, |
ನೀವು COLSPAN=2 ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಬಹುದು, |
| ಯಾವುದೇ ಸಂಖ್ಯೆಯ ಸಾಮಾನ್ಯ ಕೋಶಗಳ ಮೇಲೆ ಅದನ್ನು ವಿಸ್ತರಿಸಲು. |
ROWSPAN ಗುಣಲಕ್ಷಣ
ROWSPAN ಗುಣಲಕ್ಷಣವನ್ನು ಟ್ಯಾಗ್‌ಗಳಲ್ಲಿ ಬಳಸಲಾಗಿದೆ<ТD>ಮತ್ತು<ТН>, COLSPAN= ಗುಣಲಕ್ಷಣವನ್ನು ಹೋಲುತ್ತದೆ, ಇದು ಕೋಶವನ್ನು ವಿಸ್ತರಿಸಿರುವ ಸಾಲುಗಳ ಸಂಖ್ಯೆಯನ್ನು ಮಾತ್ರ ಸೂಚಿಸುತ್ತದೆ. ನೀವು ROWSPAN=s ಗುಣಲಕ್ಷಣದಲ್ಲಿ ಒಂದಕ್ಕಿಂತ ಹೆಚ್ಚಿನ ಸಂಖ್ಯೆಯನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದರೆ, ನಂತರ ಅನುಗುಣವಾದ ಸಾಲುಗಳ ಸಂಖ್ಯೆಯು ವಿಸ್ತರಿಸಿದ ಕೋಶದ ಅಡಿಯಲ್ಲಿರಬೇಕು. ಇದನ್ನು ಮೇಜಿನ ಕೆಳಭಾಗದಲ್ಲಿ ಇರಿಸಲಾಗುವುದಿಲ್ಲ.
WIDTH ಗುಣಲಕ್ಷಣ
WIDTH ಗುಣಲಕ್ಷಣವನ್ನು ಎರಡು ಸಂದರ್ಭಗಳಲ್ಲಿ ಬಳಸಲಾಗುತ್ತದೆ. ನೀವು ಅದನ್ನು ಟ್ಯಾಗ್‌ನಲ್ಲಿ ಹಾಕಬಹುದು<ТАВLЕ>ಸಂಪೂರ್ಣ ಟೇಬಲ್ನ ಅಗಲವನ್ನು ನೀಡಲು, ಅಥವಾ ಟ್ಯಾಗ್‌ಗಳಲ್ಲಿ ಬಳಸಬಹುದು<ТD>ಅಥವಾ<ТН>ಕೋಶ ಅಥವಾ ಕೋಶಗಳ ಗುಂಪಿನ ಅಗಲವನ್ನು ಹೊಂದಿಸಲು. ಅಗಲವನ್ನು ಪಿಕ್ಸೆಲ್‌ಗಳಲ್ಲಿ ಅಥವಾ ಶೇಕಡಾವಾರು ಪ್ರಮಾಣದಲ್ಲಿ ಸೂಚಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ನೀವು ಟ್ಯಾಗ್‌ನಲ್ಲಿ ಹೊಂದಿಸಿದರೆ<ТАВLЕ>WIDTH=250, ನಿಮ್ಮ ಮಾನಿಟರ್‌ನಲ್ಲಿ ಪುಟದ ಗಾತ್ರವನ್ನು ಲೆಕ್ಕಿಸದೆಯೇ 250 ಪಿಕ್ಸೆಲ್‌ಗಳ ಅಗಲವಿರುವ ಟೇಬಲ್ ಅನ್ನು ನೀವು ಪಡೆಯುತ್ತೀರಿ. ಟ್ಯಾಗ್‌ನಲ್ಲಿ WIDТН=50% ಹೊಂದಿಸುವಾಗ<ТАВLЕ>ಪರದೆಯ ಮೇಲಿನ ಯಾವುದೇ ಚಿತ್ರದ ಗಾತ್ರದಲ್ಲಿ ಟೇಬಲ್ ಪುಟದ ಅರ್ಧದಷ್ಟು ಅಗಲವನ್ನು ಆಕ್ರಮಿಸುತ್ತದೆ. ಆದ್ದರಿಂದ, ಟೇಬಲ್ ಅಗಲವನ್ನು ಶೇಕಡಾವಾರು ಎಂದು ನಿರ್ದಿಷ್ಟಪಡಿಸುವಾಗ, ಬಳಕೆದಾರರು ಕಿರಿದಾದ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ ಹೊಂದಿದ್ದರೆ, ನಿಮ್ಮ ಪುಟವು ಸ್ವಲ್ಪ ವಿಲಕ್ಷಣವಾಗಿ ಕಾಣಿಸಬಹುದು ಎಂಬುದನ್ನು ನೆನಪಿನಲ್ಲಿಡಿ. ನೀವು ಪಿಕ್ಸೆಲ್‌ಗಳನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ ಮತ್ತು ಟೇಬಲ್ ನೋಡುವ ಪ್ರದೇಶಕ್ಕಿಂತ ಅಗಲವಾಗಿದ್ದರೆ, ಪುಟದಲ್ಲಿ ಎಡ ಮತ್ತು ಬಲಕ್ಕೆ ಚಲಿಸಲು ಕೆಳಭಾಗದಲ್ಲಿ ಸ್ಕ್ರಾಲ್ ಬಾರ್ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ. ಕೈಯಲ್ಲಿರುವ ಕಾರ್ಯಗಳನ್ನು ಅವಲಂಬಿಸಿ, ಮೇಜಿನ ಅಗಲವನ್ನು ಹೊಂದಿಸುವ ಎರಡೂ ವಿಧಾನಗಳು ಉಪಯುಕ್ತವಾಗಬಹುದು.
| ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ - ಅಗಲ 100% |
ಅಥವಾ
ಅಥವಾ
| ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ - 200 ಪಿಕ್ಸೆಲ್‌ಗಳ ಅಗಲ |
ಅಥವಾ
| ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ - 100 ಪಿಕ್ಸೆಲ್‌ಗಳ ಅಗಲ |
ಖಾಲಿ ಕೋಶಗಳನ್ನು ಅನ್ವಯಿಸುವುದು
ಕೋಶವು ಯಾವುದೇ ಡೇಟಾವನ್ನು ಹೊಂದಿಲ್ಲದಿದ್ದರೆ, ಅದು ಯಾವುದೇ ಗಡಿಗಳನ್ನು ಹೊಂದಿರುವುದಿಲ್ಲ. ಕೋಶವು ಗಡಿಗಳನ್ನು ಹೊಂದಿರಬೇಕು ಆದರೆ ಯಾವುದೇ ವಿಷಯವಿಲ್ಲ ಎಂದು ನೀವು ಬಯಸಿದರೆ, ವೀಕ್ಷಿಸಿದಾಗ ಗೋಚರಿಸದ ಯಾವುದನ್ನಾದರೂ ನೀವು ಅದರಲ್ಲಿ ಇರಿಸಬೇಕಾಗುತ್ತದೆ. ನೀವು ಖಾಲಿ ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಬಳಸಬಹುದು<ВR>. ನೀವು ಖಾಲಿ ಕಾಲಮ್‌ಗಳನ್ನು ಅವುಗಳ ಅಗಲವನ್ನು ಪಿಕ್ಸೆಲ್‌ಗಳು ಅಥವಾ ಸಾಪೇಕ್ಷ ಘಟಕಗಳಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸುವ ಮೂಲಕ ಮತ್ತು ಫಲಿತಾಂಶದ ಕೋಶಗಳಿಗೆ ಯಾವುದೇ ಡೇಟಾವನ್ನು ನಮೂದಿಸದಿರುವ ಮೂಲಕ ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು. ಪುಟದಲ್ಲಿ ಪಠ್ಯ ಮತ್ತು ಗ್ರಾಫಿಕ್ಸ್ ಅನ್ನು ಇರಿಸುವಾಗ ಈ ಉಪಕರಣವು ಉಪಯುಕ್ತವಾಗಿರುತ್ತದೆ.
CELLADDING ಗುಣಲಕ್ಷಣ
ಈ ಗುಣಲಕ್ಷಣವು ಕೋಶದ ವಿಷಯಗಳು ಮತ್ತು ಅದರ ಗಡಿಗಳ ನಡುವಿನ ಖಾಲಿ ಜಾಗದ ಅಗಲವನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ, ಅಂದರೆ, ಇದು ಕೋಶದ ಒಳಗೆ ಅಂಚುಗಳನ್ನು ಹೊಂದಿಸುತ್ತದೆ.
| ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
| ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
| ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
| ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ALIGN ಮತ್ತು VALIGN ಗುಣಲಕ್ಷಣಗಳು
ಟ್ಯಾಗ್ಗಳು<ТR>, <ТD>ಮತ್ತು<ТН>ALIGN ಮತ್ತು VALIGN ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಮಾರ್ಪಡಿಸಬಹುದು. ALIGN ಗುಣಲಕ್ಷಣವು ಪಠ್ಯ ಮತ್ತು ಗ್ರಾಫಿಕ್ಸ್ ಅನ್ನು ಅಡ್ಡಲಾಗಿ ಜೋಡಿಸಲಾಗಿದೆಯೇ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ, ಅಂದರೆ ಎಡಕ್ಕೆ ಅಥವಾ ಬಲಕ್ಕೆ ಅಥವಾ ಮಧ್ಯದಲ್ಲಿ. ಸಮತಲ ಜೋಡಣೆಯನ್ನು ಹಲವಾರು ವಿಧಗಳಲ್ಲಿ ಹೊಂದಿಸಬಹುದು:
ALIGN=ಬ್ಲೀಡ್‌ಲೆಫ್ಟ್ಎಡ ಅಂಚಿಗೆ ಹತ್ತಿರವಿರುವ ಕೋಶದ ವಿಷಯಗಳನ್ನು ಒತ್ತುತ್ತದೆ.
ALIGN=ಎಡಕ್ಕೆ CELLPADDING ಗುಣಲಕ್ಷಣದಿಂದ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಇಂಡೆಂಟೇಶನ್ ಅನ್ನು ಗಣನೆಗೆ ತೆಗೆದುಕೊಂಡು ಸೆಲ್‌ನ ವಿಷಯಗಳನ್ನು ಎಡಕ್ಕೆ ಒಟ್ಟುಗೂಡಿಸುತ್ತದೆ.
ALIGN=ಕೇಂದ್ರಕೋಶದ ವಿಷಯಗಳನ್ನು ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ.
ALIGN=ಬಲಕ್ಕೆ CELLPADDING ಗುಣಲಕ್ಷಣದ ಮೂಲಕ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಇಂಡೆಂಟೇಶನ್ ಅನ್ನು ಗಣನೆಗೆ ತೆಗೆದುಕೊಂಡು ಸೆಲ್‌ನ ವಿಷಯಗಳನ್ನು ಬಲಕ್ಕೆ ಒಟ್ಟುಗೂಡಿಸುತ್ತದೆ.
| ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
| ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
| ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
| ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
| ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
VALIGN ಗುಣಲಕ್ಷಣವು ಸೆಲ್‌ನೊಳಗೆ ಪಠ್ಯ ಮತ್ತು ಗ್ರಾಫಿಕ್ಸ್ ಅನ್ನು ಲಂಬವಾಗಿ ಜೋಡಿಸುತ್ತದೆ. ಲಂಬ ಜೋಡಣೆಯನ್ನು ಹಲವಾರು ವಿಧಗಳಲ್ಲಿ ಹೊಂದಿಸಬಹುದು:
VALIGN=ಮೇಲಿನಸೆಲ್‌ನ ವಿಷಯಗಳನ್ನು ಅದರ ಮೇಲಿನ ಗಡಿಗೆ ಹೊಂದಿಸುತ್ತದೆ.
VALIGN=ಮಧ್ಯಕೋಶದ ವಿಷಯಗಳನ್ನು ಲಂಬವಾಗಿ ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ.
VALIGN=ಕೆಳಗೆಸೆಲ್‌ನ ವಿಷಯಗಳನ್ನು ಅದರ ಕೆಳಗಿನ ಗಡಿಗೆ ಹೊಂದಿಸುತ್ತದೆ.
| VALIGN ಗುಣಲಕ್ಷಣವು ಸೆಲ್‌ನೊಳಗೆ ಪಠ್ಯ ಮತ್ತು ಗ್ರಾಫಿಕ್ಸ್ ಅನ್ನು ಲಂಬವಾಗಿ ಜೋಡಿಸುತ್ತದೆ. |
ಮೇಲ್ಭಾಗ, |
ಮಧ್ಯಮ, |
ಕೆಳಗೆ. |
| VALIGN=top ಸೆಲ್‌ನ ವಿಷಯಗಳನ್ನು ಅದರ ಮೇಲಿನ ಗಡಿಗೆ ಜೋಡಿಸುತ್ತದೆ. |
ಮೇಲ್ಭಾಗ, |
ಮೇಲ್ಭಾಗ, |
ಮೇಲ್ಭಾಗ. |
| VALIGN=ಮಧ್ಯವು ಕೋಶದ ವಿಷಯಗಳನ್ನು ಲಂಬವಾಗಿ ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ. |
ಮಧ್ಯಮ, |
ಮಧ್ಯಮ, |
ಮಧ್ಯಮ. |
| VALIGN=ಕೆಳಗೆ ಸೆಲ್‌ನ ವಿಷಯಗಳನ್ನು ಅದರ ಕೆಳಗಿನ ಗಡಿಗೆ ಜೋಡಿಸುತ್ತದೆ. |
ಕೆಳಭಾಗ, |
ಕೆಳಭಾಗ, |
ಕೆಳಗೆ. |
BORDER ಗುಣಲಕ್ಷಣ
ಟ್ಯಾಗ್‌ನಲ್ಲಿ<ТАВLЕ>ಗಡಿಗಳು, ಅಂದರೆ ಟೇಬಲ್ ಕೋಶಗಳು ಮತ್ತು ಟೇಬಲ್ ಅನ್ನು ಸುತ್ತುವರೆದಿರುವ ಸಾಲುಗಳು ಹೇಗೆ ಕಾಣುತ್ತವೆ ಎಂಬುದನ್ನು ಆಗಾಗ್ಗೆ ನಿರ್ಧರಿಸುತ್ತದೆ. ನೀವು ಫ್ರೇಮ್ ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸದಿದ್ದರೆ, ನೀವು ರೇಖೆಗಳಿಲ್ಲದ ಟೇಬಲ್ ಅನ್ನು ಪಡೆಯುತ್ತೀರಿ, ಆದರೆ ಅವರಿಗೆ ಜಾಗವನ್ನು ಹಂಚಲಾಗುತ್ತದೆ. ಹೊಂದಿಸುವ ಮೂಲಕ ಅದೇ ಫಲಿತಾಂಶವನ್ನು ಸಾಧಿಸಬಹುದು<ТАВLЕ ВОRDER=0>. ಕೆಲವೊಮ್ಮೆ ನೀವು ಗಡಿಯನ್ನು ದಪ್ಪವಾಗಿಸಲು ಬಯಸುತ್ತೀರಿ ಇದರಿಂದ ಅದು ಉತ್ತಮವಾಗಿ ನಿಲ್ಲುತ್ತದೆ. ಚಿತ್ರ ಅಥವಾ ಪಠ್ಯಕ್ಕೆ ಗಮನ ಸೆಳೆಯಲು ನೀವು ಅಸಾಧಾರಣ ದಪ್ಪ ಗಡಿಗಳನ್ನು ಹೊಂದಿಸಬಹುದು. ನೆಸ್ಟೆಡ್ ಕೋಷ್ಟಕಗಳನ್ನು ರಚಿಸುವಾಗ, ಅವುಗಳನ್ನು ಪ್ರತ್ಯೇಕಿಸಲು ಸುಲಭವಾಗುವಂತೆ ವಿವಿಧ ಕೋಷ್ಟಕಗಳಿಗೆ ನೀವು ವಿಭಿನ್ನ ದಪ್ಪಗಳ ಗಡಿಗಳನ್ನು ಮಾಡಬೇಕು.
ಸೆಲ್‌ಸ್ಪೇಸಿಂಗ್ ಗುಣಲಕ್ಷಣ
CELLSPACING ಗುಣಲಕ್ಷಣವು ಪಿಕ್ಸೆಲ್‌ಗಳಲ್ಲಿ ಕೋಶಗಳ ನಡುವಿನ ಅಂತರಗಳ ಅಗಲವನ್ನು ಸೂಚಿಸುತ್ತದೆ. ಈ ಗುಣಲಕ್ಷಣವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸದಿದ್ದರೆ, ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವು ಎರಡು ಪಿಕ್ಸೆಲ್‌ಗಳಾಗಿರುತ್ತದೆ. CELLSPACING= ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಿಕೊಂಡು, ನಿಮಗೆ ಅಗತ್ಯವಿರುವಲ್ಲಿ ಪಠ್ಯ ಮತ್ತು ಗ್ರಾಫಿಕ್ಸ್ ಅನ್ನು ನೀವು ಇರಿಸಬಹುದು. ನೀವು ಖಾಲಿ ಜಾಗವನ್ನು ಬಿಡಲು ಬಯಸಿದರೆ, ನೀವು ಕೋಶದಲ್ಲಿ ಜಾಗವನ್ನು ಬರೆಯಬಹುದು.
| ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
| ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
| ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
| ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
| ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
| ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
|
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
BGCOLOR ಗುಣಲಕ್ಷಣ
ಈ ಗುಣಲಕ್ಷಣವು ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಹೊಂದಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಯಾವ ಟ್ಯಾಗ್ (ಟೇಬಲ್, ಟಿಆರ್, ಟಿಡಿ) ಅನ್ನು ಬಳಸಲಾಗಿದೆ ಎಂಬುದರ ಆಧಾರದ ಮೇಲೆ, ಸಂಪೂರ್ಣ ಟೇಬಲ್‌ಗೆ, ಸಾಲಿಗೆ ಅಥವಾ ಪ್ರತ್ಯೇಕ ಸೆಲ್‌ಗೆ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಹೊಂದಿಸಬಹುದು. ಈ ಗುಣಲಕ್ಷಣದ ಮೌಲ್ಯವು RGB ಕೋಡ್ ಅಥವಾ ಪ್ರಮಾಣಿತ ಬಣ್ಣದ ಹೆಸರು.
| ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
| ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಪಠ್ಯ ಅಥವಾ ಡೇಟಾ |
ಹಿನ್ನೆಲೆ ಗುಣಲಕ್ಷಣ
ಈ ಗುಣಲಕ್ಷಣವು ಕೋಷ್ಟಕಗಳ ಹಿನ್ನೆಲೆ ಚಿತ್ರವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. TABLE ಮತ್ತು TD ಟ್ಯಾಗ್‌ಗಳಿಗೆ ಅನ್ವಯಿಸುತ್ತದೆ. ಇದರ ಮೌಲ್ಯವು ಹಿನ್ನೆಲೆ ಇಮೇಜ್ ಫೈಲ್‌ನ URL ಆಗಿದೆ. ಈ ಗುಣಲಕ್ಷಣದ ಬಳಕೆಯನ್ನು ಕೆಳಗೆ ಚರ್ಚಿಸಲಾಗಿದೆ.
ಪುಟ ವಿನ್ಯಾಸದಲ್ಲಿ ಕೋಷ್ಟಕಗಳನ್ನು ಬಳಸುವುದು
ಟೇಬಲ್‌ಗಳ ಉತ್ತಮ ವಿಷಯವೆಂದರೆ ನೀವು ಬಯಸಿದರೆ ನೀವು ಅವುಗಳ ಗಡಿಗಳನ್ನು ಅಗೋಚರವಾಗಿ ಮಾಡಬಹುದು. ಇದು ಟ್ಯಾಗ್ ಅನ್ನು ಬಳಸಲು ಅನುಮತಿಸುತ್ತದೆ<ТАВLЕ>ಪುಟದಲ್ಲಿ ಪಠ್ಯ ಮತ್ತು ಗ್ರಾಫಿಕ್ಸ್ ಅನ್ನು ಸುಂದರವಾಗಿ ಇರಿಸಿ. ಬೈ ಟ್ಯಾಗ್<ТАВLЕ>HTML ನಲ್ಲಿ ಮಾತ್ರ ಪ್ರಬಲ ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಸಾಧನವಾಗಿ ಉಳಿದಿದೆ. ವೆಬ್ ಪುಟ ವಿನ್ಯಾಸಕರು ಈಗ ಮುದ್ರಿತ ಪುಟ ವಿನ್ಯಾಸಕರಂತೆ ಬಿಳಿ ಜಾಗದ ಬಳಕೆಯ ಬಗ್ಗೆ ಬಹುತೇಕ ಅದೇ ಸ್ವಾತಂತ್ರ್ಯವನ್ನು ಹೊಂದಿದ್ದಾರೆ. ವೆಬ್ ಪುಟಗಳಲ್ಲಿ ಪಠ್ಯದ ಕ್ರಮಾನುಗತ ನಿಯೋಜನೆಯಿಂದ ದೂರ ಸರಿಯಲು ಕೋಷ್ಟಕಗಳು ಉತ್ತಮ ಮಾರ್ಗವಾಗಿದೆ.
ಬ್ರೌಸರ್ ಕೋಷ್ಟಕಗಳನ್ನು ಬೆಂಬಲಿಸಿದರೆ, ಅದು ಸಾಮಾನ್ಯವಾಗಿ ಅವುಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಪಡೆದ ಅತ್ಯಂತ ಆಸಕ್ತಿದಾಯಕ ಪರಿಣಾಮಗಳನ್ನು ಸರಿಯಾಗಿ ಪ್ರದರ್ಶಿಸುತ್ತದೆ
ಉರಲ್ ಸ್ಟೇಟ್ ಪೆಡಾಗೋಗಿಕಲ್ ಯೂನಿವರ್ಸಿಟಿ
ಸ್ವಾಗತ!
| ತರಬೇತಿ ಕೋರ್ಸ್ "ವೆಬ್ ಮಾಸ್ಟರಿಂಗ್ ಮೂಲಗಳು" |
|
ವರ್ಣರಂಜಿತ ಕೋಷ್ಟಕಗಳನ್ನು ರಚಿಸುವುದು
ಕೆಲವು ಬ್ರೌಸರ್ಗಳು ಬಣ್ಣಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಟೇಬಲ್ ಅನ್ನು ಬಣ್ಣ ಮಾಡಲು ಹಲವಾರು ಮಾರ್ಗಗಳಿವೆ, ಹೆಚ್ಚಾಗಿ ನೀವು ಬಳಸುತ್ತಿರುವ ಬ್ರೌಸರ್ ಅನ್ನು ಅವಲಂಬಿಸಿರುತ್ತದೆ.
ನೆಟ್‌ಸ್ಕೇಪ್ ನ್ಯಾವಿಗೇಟರ್‌ನಲ್ಲಿ ಬಣ್ಣದ ಗಡಿಗಳು. ಸುಂದರವಾದ ಗಡಿಯೊಂದಿಗೆ ನೀವು ಟೇಬಲ್ ಅನ್ನು ಸುತ್ತುವರೆದಿರುವುದು ಮಾತ್ರವಲ್ಲ, ಪಠ್ಯ ಮತ್ತು ಹಿನ್ನೆಲೆ ಬಣ್ಣಗಳಿಗಿಂತ ವಿಭಿನ್ನವಾದ ಬಣ್ಣಕ್ಕೆ ನೀವು ಹೊಂದಿಸಬಹುದು. ಸರಳ ಬೂದು GIF ಅನ್ನು ರಚಿಸಿ (ಅಥವಾ ನೀವು ಹಿನ್ನೆಲೆಯಾಗಿ ಹೊಂದಲು ಬಯಸುವ ಯಾವುದೇ GIF) ಮತ್ತು ಅದನ್ನು ಟ್ಯಾಗ್‌ನಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಿ<ВODY>ಪುಟದ ಹಿನ್ನೆಲೆಯಾಗಿ. ನಂತರ ಪುಟದ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಹೊಂದಿಸಿ. ಪರಿಣಾಮವಾಗಿ, ನಿಮ್ಮ ಟ್ಯಾಗ್<ВОDY>ಈ ರೀತಿ ಕಾಣಿಸುತ್ತದೆ:
ನೀವು ಎರಡು ಹಿನ್ನೆಲೆಯನ್ನು ರಚಿಸಿದ್ದೀರಿ - GIF ಮತ್ತು ನಿರ್ದಿಷ್ಟ ಬಣ್ಣ. ಪರಿಣಾಮವಾಗಿ, ಎಲ್ಲಾ ಟೇಬಲ್ ಗಡಿಗಳು ಮತ್ತು ಅಡ್ಡ ರೇಖೆಗಳಲ್ಲಿ ಹಿನ್ನೆಲೆ ಬಣ್ಣವು ಗೋಚರಿಸುತ್ತದೆ (<НR>) ನಿಮ್ಮ ಹಿನ್ನೆಲೆ GIF ಬೂದು ಬಣ್ಣದ್ದಾಗಿರಲಿ ಅಥವಾ ಇಲ್ಲದಿರಲಿ, ಬಣ್ಣದ ಗೆರೆಗಳು ಮತ್ತು ಟೇಬಲ್ ಬಾರ್ಡರ್‌ಗಳು ಗಮನಾರ್ಹವಾಗಿ ಎದ್ದು ಕಾಣುತ್ತವೆ. ಹಿನ್ನೆಲೆ GIF ತುಂಬಾ ಸಂಕೀರ್ಣವಾಗಿಲ್ಲದಿದ್ದರೆ, ಪುಟ ಲೋಡ್ ಸಮಯವು ಸ್ವಲ್ಪಮಟ್ಟಿಗೆ ಹೆಚ್ಚಾಗುತ್ತದೆ.
HTML ಕೋಷ್ಟಕಗಳು ಹೊಂದಿವೆ ಎಂದು ನಾವು ಈಗಾಗಲೇ ಕಂಡುಕೊಂಡಿದ್ದೇವೆ ಚೌಕಟ್ಟು, ಆದಾಗ್ಯೂ ಬ್ರೌಸರ್ಗಳು ಅವುಗಳನ್ನು ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ತೋರಿಸುವುದಿಲ್ಲ. ಆದರೆ ಅಷ್ಟೆ ಅಲ್ಲ, ಪ್ರತಿ ಟೇಬಲ್ ಸೆಲ್ ಕೂಡ ಒಂದು ಚೌಕಟ್ಟನ್ನು ಹೊಂದಿದೆ ಜೀವಕೋಶದ ಗಡಿ. ಆದರೆ ವಿಶೇಷ ಟ್ಯಾಗ್ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಅಷ್ಟೆ ಅಲ್ಲ
ಕೋಶಗಳ ನಡುವಿನ ಅಂತರವನ್ನು ಮತ್ತು ಕೋಶಗಳಿಂದ ಟೇಬಲ್ ಫ್ರೇಮ್‌ಗೆ, ಹಾಗೆಯೇ ಕೋಶಗಳ ಗಡಿಗಳಿಂದ ಅವುಗಳ ವಿಷಯಗಳಿಗೆ ಆಂತರಿಕ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ನೀವು ಬದಲಾಯಿಸಬಹುದು.
HTML ಟೇಬಲ್ ಫ್ರೇಮ್, ಸೆಲ್ ಗಡಿಗಳು, ಅವುಗಳ ನಡುವಿನ ಅಂತರಗಳು ಮತ್ತು ಪ್ಯಾಡಿಂಗ್.
ಆದ್ದರಿಂದ ಚೌಕಟ್ಟನ್ನು ರಚಿಸುವುದು HTML ಕೋಷ್ಟಕಗಳು ಮತ್ತು ಅದರ ಜೀವಕೋಶಗಳ ಗಡಿಗಳುಕೇವಲ ಒಂದು ಟ್ಯಾಗ್ ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಲಾಗುತ್ತದೆ
- ಗಡಿ. ಗುಣಲಕ್ಷಣ ಮೌಲ್ಯವು ಋಣಾತ್ಮಕವಲ್ಲದ ಪೂರ್ಣಾಂಕವಾಗಿದೆ (ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಶೂನ್ಯ) ಇದು ಪಿಕ್ಸೆಲ್‌ಗಳಲ್ಲಿ ಗಾತ್ರವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಆದರೆ, ಗಮನ ಕೊಡಿ, ಟೇಬಲ್ ಚೌಕಟ್ಟಿನಲ್ಲಿ ಮಾತ್ರ ಗಾತ್ರವು ಬದಲಾಗುತ್ತದೆ, ಅದು ಯಾವಾಗಲೂ ಬದಲಾಗುವುದಿಲ್ಲ.
ಬದಲಾಯಿಸಲು ಜೀವಕೋಶಗಳ ನಡುವಿನ ಅಂತರ(ಅವರ ಗಡಿಗಳು) ಮತ್ತು ಜೀವಕೋಶಗಳಿಂದ ಚೌಕಟ್ಟಿಗೆಟ್ಯಾಗ್‌ನಲ್ಲಿ ಕೋಷ್ಟಕಗಳು
ಸೆಲ್‌ಸ್ಪೇಸಿಂಗ್ ಗುಣಲಕ್ಷಣವನ್ನು ಅನ್ವಯಿಸಲಾಗಿದೆ. ಇದರ ಮೌಲ್ಯಗಳು ಪಿಕ್ಸೆಲ್‌ಗಳಲ್ಲಿ ದೂರವನ್ನು ಅಳೆಯುವ ಸಂಖ್ಯೆಗಳಾಗಿರಬಹುದು.
ಆಂತರಿಕವನ್ನು ಸ್ಥಾಪಿಸಲು ಕೋಶದ ಗಡಿಗಳಿಂದ ಅವುಗಳ ವಿಷಯಗಳಿಗೆ ಪ್ಯಾಡಿಂಗ್ಟ್ಯಾಗ್‌ನಲ್ಲಿ ಅಗತ್ಯವಿದೆ
ಸೆಲ್ಪ್ಯಾಡಿಂಗ್ ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಿ. ಮತ್ತು ಅದರ ಮೌಲ್ಯಗಳು ಪಿಕ್ಸೆಲ್ ಆಯಾಮಗಳನ್ನು ಸೂಚಿಸುವ ಸಂಖ್ಯೆಗಳಾಗಿವೆ.
ಸೆಲ್‌ಸ್ಪೇಸಿಂಗ್ ಮತ್ತು ಸೆಲ್‌ಪಾಡಿಂಗ್‌ಗಾಗಿ ಬ್ರೌಸರ್ಗಳು ಡಿಫಾಲ್ಟ್ ಆಗಿ ಸಣ್ಣ (ಎರಡು ಪಿಕ್ಸೆಲ್‌ಗಳು) ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಿಸುತ್ತವೆ ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನಿಸಿ, ಆದ್ದರಿಂದ ಅಂತರವನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ತೆಗೆದುಹಾಕಲು, ಗುಣಲಕ್ಷಣಗಳನ್ನು ಶೂನ್ಯಕ್ಕೆ ಹೊಂದಿಸಿ (0).
HTML ಟೇಬಲ್ ಬಾರ್ಡರ್‌ಗಳು, ಫ್ರೇಮ್‌ಗಳು ಮತ್ತು ಪ್ಯಾಡಿಂಗ್‌ನ ಉದಾಹರಣೆ
ಟೇಬಲ್ ಗಡಿಗಳು, ಚೌಕಟ್ಟುಗಳು ಮತ್ತು ಪ್ಯಾಡಿಂಗ್
| ಕೋಶ 1.1 | ಕೋಶ 1.2 | ಕೋಶ 1.3 |
| ಕೋಶ 2.1 | ಕೋಶ 2.2 | ಕೋಶ 2.3 |
| ಕೋಶ 3.1 | ಕೋಶ 3.2 | ಕೋಶ 3.3 |
ಸೆಲ್ ಗಡಿಗಳು ಮತ್ತು ಗಡಿಗಳನ್ನು ಮಾತ್ರ ಹೊಂದಿಸಿರುವ ಟೇಬಲ್:
| ಕೋಶ 1.1 | ಕೋಶ 1.2 | ಕೋಶ 1.3 |
| ಕೋಶ 2.1 | ಕೋಶ 2.2 | ಕೋಶ 2.3 |
| ಕೋಶ 3.1 | ಕೋಶ 3.2 | ಕೋಶ 3.3 |
ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಫಲಿತಾಂಶ
ಮಾರ್ಪಡಿಸಿದ ಇಂಡೆಂಟ್‌ಗಳು ಮತ್ತು ಅಂತರಗಳೊಂದಿಗೆ ಟೇಬಲ್:
ಸ್ವಾಭಾವಿಕವಾಗಿ, ಆಂತರಿಕ ಇಂಡೆಂಟ್‌ಗಳು ಮತ್ತು ಕೋಶಗಳ ನಡುವಿನ ಅಂತರವನ್ನು ಬದಲಾಯಿಸಲು ಮೇಜಿನ ಮೇಲೆ ಫ್ರೇಮ್ ಮತ್ತು ಸೆಲ್ ಗಡಿಗಳನ್ನು ಸೆಳೆಯುವುದು ಅನಿವಾರ್ಯವಲ್ಲ.
HTML ಸಿಂಟ್ಯಾಕ್ಸ್ ಪ್ರಕಾರ, ಬ್ರೌಸರ್ಗಳು ಸೆಲ್‌ಪೇಸಿಂಗ್ ಮತ್ತು ಸೆಲ್‌ಪಾಡಿಂಗ್ ಮೌಲ್ಯಗಳನ್ನು ಟೇಬಲ್ ಮತ್ತು ಅದರ ಕೋಶಗಳ ಆಯಾಮಗಳಿಗೆ ಸೇರಿಸುತ್ತವೆ. ಉದಾಹರಣೆಗೆ, ನೀವು ಸೆಲ್ ಅಗಲವನ್ನು 100 ಪಿಕ್ಸೆಲ್‌ಗಳಿಗೆ ಮತ್ತು ಸೆಲ್‌ಪಾಡಿಂಗ್="10" ಗೆ ಹೊಂದಿಸಿದರೆ - ಬ್ರೌಸರ್ಗಳು ಅಗಲಕ್ಕೆ 20 ಪಿಕ್ಸೆಲ್‌ಗಳನ್ನು ಸೇರಿಸುತ್ತವೆ (ಎಡ ಮತ್ತು ಬಲದಲ್ಲಿ ತಲಾ 10) ಮತ್ತು ಅದು 120 ಪಿಕ್ಸೆಲ್‌ಗಳಾಗುತ್ತದೆ. ಸಾಮಾನ್ಯವಾಗಿ, ನೀವು ಹೋಗುತ್ತಿರುವಾಗ ನೀವು ಅದನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತೀರಿ.
ವಿಷಯದಿಂದ ವ್ಯತಿರಿಕ್ತತೆ ಅಥವಾ ಪುಟದ ಅಂಚುಗಳ ಉದ್ದಕ್ಕೂ ಇಂಡೆಂಟ್‌ಗಳನ್ನು ಹೇಗೆ ತೆಗೆದುಹಾಕುವುದು
ಆರಂಭದಲ್ಲಿ, ಎಲ್ಲಾ ಬ್ರೌಸರ್ಗಳು HTML ಪುಟದ ಅಂಚುಗಳ ಉದ್ದಕ್ಕೂ ಸಣ್ಣ ಅಂಚುಗಳನ್ನು ಸ್ಥಾಪಿಸುತ್ತವೆ, ಅವುಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಅನಗತ್ಯವಾಗಿರುತ್ತವೆ, ಆದ್ದರಿಂದ ಈಗ ನೀವು ಅವುಗಳನ್ನು ಹೇಗೆ ತೆಗೆದುಹಾಕಬೇಕೆಂದು ಕಲಿಯುವಿರಿ. ಸಾಮಾನ್ಯವಾಗಿ, ಈ ಮಾಹಿತಿಯನ್ನು ಪಠ್ಯಪುಸ್ತಕದ ಆರಂಭದಲ್ಲಿ ಇರಿಸಬೇಕು, ಆದರೆ ಅದು ನಿಮಗೆ ಅಲ್ಲಿ ಉಪಯುಕ್ತವಾಗುವುದಿಲ್ಲ.
ಟ್ಯಾಗ್‌ನಲ್ಲಿ ಸರಿಯಾದ ಸಮಯದಲ್ಲಿ
ಪುಟದ ಪ್ರತಿ ಬದಿಗೆ ಈ ಅಂಚುಗಳ ಗಾತ್ರವನ್ನು ಹೊಂದಿಸುವ ನಾಲ್ಕು ಗುಣಲಕ್ಷಣಗಳಿವೆ: ಟಾಪ್‌ಮಾರ್ಜಿನ್ (ಮೇಲ್ಭಾಗ), ಬಲ ಅಂಚು (ಬಲ), ಕೆಳಭಾಗದ ಅಂಚು (ಕೆಳಗೆ) ಮತ್ತು ಎಡ ಅಂಚು (ಎಡ). ಈಗ ಈ ಗುಣಲಕ್ಷಣಗಳು ಹಳೆಯದಾಗಿವೆ, ಆದ್ದರಿಂದ ನಾವು ಶೈಲಿಗಳನ್ನು (CSS) ಬಳಸುತ್ತೇವೆ. ಆದ್ದರಿಂದ, ನೀವು ಪುಟದ ಅಂಚುಗಳ ಉದ್ದಕ್ಕೂ ಅಂಚು ಅಂತರವನ್ನು ಹಲವಾರು ರೀತಿಯಲ್ಲಿ ಬದಲಾಯಿಸಬಹುದು, ನಾನು ನಿಮಗೆ ಎರಡನ್ನು ತೋರಿಸುತ್ತೇನೆ ಮತ್ತು ನೀವು CSS ಅನ್ನು ಕಲಿಯಲು ನಿರ್ಧರಿಸಿದರೆ ನೀವು ಮೂರನೆಯದನ್ನು ಕಲಿಯುವಿರಿ.
ವಿಧಾನ ಒಂದು. ಟ್ಯಾಗ್‌ನಲ್ಲಿ
ಕೆಳಗಿನ ಮೌಲ್ಯಗಳೊಂದಿಗೆ ಶೈಲಿಯ ಗುಣಲಕ್ಷಣವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಿ:
ಶೈಲಿ="ಅಂಚು:0" >...
- HTML ಪುಟದ ಎಲ್ಲಾ ಬದಿಗಳಿಂದ ಇಂಡೆಂಟ್‌ಗಳನ್ನು ಏಕಕಾಲದಲ್ಲಿ ತೆಗೆದುಹಾಕುತ್ತದೆ.
ಶೈಲಿ = "ಅಂಚು: ಮೇಲಿನ ಬಲ ಕೆಳಗಿನ ಎಡ">...
- ಪ್ರತಿ ಬದಿಗೆ ಪ್ರದಕ್ಷಿಣಾಕಾರವಾಗಿ ಇಂಡೆಂಟ್‌ಗಳ ಗಾತ್ರವನ್ನು ಸರಿಹೊಂದಿಸುತ್ತದೆ. ನಿಯಮದಂತೆ, ಪಿಕ್ಸೆಲ್‌ಗಳಲ್ಲಿನ ಗಾತ್ರಗಳನ್ನು ಬಳಸಲಾಗುತ್ತದೆ, ಉದಾಹರಣೆಗೆ: ಶೈಲಿ= "ಅಂಚು:5px 3px 4px 5px" >...
ಎರಡನೆಯ ಮತ್ತು ಹೆಚ್ಚು ಅನುಕೂಲಕರ ಮಾರ್ಗ. ಟ್ಯಾಗ್‌ನಲ್ಲಿ
ಮನೆಕೆಲಸ.
ಈ ಪಾಠದಲ್ಲಿ, ನಾನು ಎಲ್ಲವನ್ನೂ ವಿವರವಾಗಿ ವಿವರಿಸುವುದಿಲ್ಲ - ಸಾಮಾನ್ಯ ಅಂಶಗಳು ಮಾತ್ರ. ಚಿತ್ರವನ್ನು ಪೂರ್ಣಗೊಳಿಸಲು, ಉದಾಹರಣೆಯ ಫಲಿತಾಂಶವನ್ನು ನೋಡಿ.
- ಮೂರು ಕೋಷ್ಟಕಗಳನ್ನು ರಚಿಸಿ, ಪ್ರತಿಯೊಂದೂ ಒಂದು ಸಾಲು ಮತ್ತು ಮೂರು ಕಾಲಮ್‌ಗಳನ್ನು (ಕಾಲಮ್ಗಳು) ಒಳಗೊಂಡಿರುತ್ತದೆ.
- ಮೊದಲ ಕೋಷ್ಟಕದಲ್ಲಿ, ಪುಟದ ಹೆಡರ್ ಅಥವಾ “ಹೆಡರ್” ಅನ್ನು ಇರಿಸಿ (HTML ಡಾಕ್ಯುಮೆಂಟ್ನ “ಹೆಡರ್” ನೊಂದಿಗೆ ಗೊಂದಲಕ್ಕೀಡಾಗಬಾರದು), ಎರಡನೆಯದರಲ್ಲಿ - ಎಡ ಮತ್ತು ಬಲ ಮೆನುಗಳು, ಹಾಗೆಯೇ ಮುಖ್ಯ ವಿಷಯ (ವಿಷಯ) , ಮೂರನೆಯದರಲ್ಲಿ - ಪುಟದ ಅಡಿಟಿಪ್ಪಣಿ ಅಥವಾ "ಅಡಿಟಿಪ್ಪಣಿ".
- ಪ್ರತಿ ಟೇಬಲ್ನ ಮೊದಲ ಮತ್ತು ಕೊನೆಯ ಕಾಲಮ್‌ನ ಅಗಲವನ್ನು ನಿಗದಿಪಡಿಸಲಿ.
- ಪ್ರಮುಖ. ಟ್ಯಾಗ್ ಬಳಸಿ
![]()
ಪುಟದ ಹೆಡರ್‌ನಲ್ಲಿ ನಾಲ್ಕು ಅಡ್ಡ ಮೆನು ಬಟನ್‌ಗಳನ್ನು ರಚಿಸಲು ಮಾತ್ರ. ಇತರ ಸಂದರ್ಭಗಳಲ್ಲಿ, ಚಿತ್ರಗಳು ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಹೋಗಲಿ, ಮತ್ತು ಕೋಷ್ಟಕಗಳ ಎರಡನೇ ಕೋಶಗಳಲ್ಲಿ ಬಣ್ಣಗಳನ್ನು ಮಾತ್ರ ಬಳಸಲಾಗುತ್ತದೆ, ಮತ್ತು ಮೊದಲ ಮತ್ತು ಕೊನೆಯ ಕೋಷ್ಟಕದಲ್ಲಿ ಇದು #99FF99 ಆಗಿದೆ.
- ಪುಟದ ವಿಷಯ ಪಠ್ಯವನ್ನು ಟೇಬಲ್ ಸೆಲ್‌ನ ಎರಡೂ ಬದಿಗಳಲ್ಲಿ ಜೋಡಿಸಿ ಮತ್ತು ಶೀರ್ಷಿಕೆಯನ್ನು ಕೇಂದ್ರೀಕರಿಸಿ.
- ಟೇಬಲ್ ಕೋಶಗಳ ನಡುವಿನ ಅಂತರ, ಹಾಗೆಯೇ ಸೆಲ್ ಇಂಡೆಂಟ್‌ಗಳಿಗೆ ಸಂಬಂಧಿಸಿದಂತೆ, ಅವುಗಳನ್ನು ಎಲ್ಲಿ ಸಂಪೂರ್ಣವಾಗಿ ತೆಗೆದುಹಾಕಬೇಕು ಮತ್ತು ಎಲ್ಲಿ ಹೆಚ್ಚಿಸಬೇಕು ಎಂದು ನೀವೇ ಯೋಚಿಸಿ.
ಆದ್ದರಿಂದ, ಟೇಬಲ್ ಗಡಿಗಳೊಂದಿಗೆ ನಿರ್ವಹಿಸಬಹುದಾದ ಸರಳ ಕ್ರಿಯೆಗಳನ್ನು ನಾವು ಅಧ್ಯಯನ ಮಾಡಿದ್ದೇವೆ. ಮತ್ತು ಈಗ ಟೇಬಲ್ ಹೆಚ್ಚು ಕಲಾತ್ಮಕವಾಗಿ ಹಿತಕರವಾಗಿ ಕಾಣುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಜೀವಕೋಶಗಳ ಭರ್ತಿ ನೇರವಾಗಿ ಗಡಿಗಳ ಮೇಲೆ ನಿಂತಿದೆ. HTML ಕೋಷ್ಟಕದಲ್ಲಿನ ಕೋಶಗಳನ್ನು ಇಂಡೆಂಟ್ ಮಾಡುವ ಮೂಲಕ ಇದನ್ನು ಸುಲಭವಾಗಿ ಸರಿಪಡಿಸಬಹುದು. ತದನಂತರ ಚೌಕಟ್ಟಿನ ಒಳಗೆ, ಕೋಶದಲ್ಲಿ ಪಠ್ಯವು ಹೆಚ್ಚು ಓದಬಲ್ಲದು.
ಕೋಶವನ್ನು ಇಂಡೆಂಟ್ ಮಾಡಲು, ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಿ ಸೆಲ್ಪ್ಯಾಡಿಂಗ್ಟ್ಯಾಗ್ಗಾಗಿ
. ಆದಾಗ್ಯೂ, ಮತ್ತೊಂದು, ಹೆಚ್ಚು ಆದ್ಯತೆಯ ಆಯ್ಕೆ ಇದೆ: CSS.
ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಆಸ್ತಿಯನ್ನು ಬಳಸಿಕೊಂಡು ಇಂಡೆಂಟೇಶನ್ ಅನ್ನು ಹೊಂದಿಸಲಾಗಿದೆ ಪ್ಯಾಡಿಂಗ್. ಅದರ ಸಹಾಯದಿಂದ, ಅಗತ್ಯವಿರುವಲ್ಲಿ ಇಂಡೆಂಟ್ ಮಾಡುವುದು ಕಷ್ಟವಾಗುವುದಿಲ್ಲ, ಅಂದರೆ, ಮೇಲಿನ, ಬಲ, ಕೆಳಗಿನ ಅಥವಾ ಎಡಭಾಗದಲ್ಲಿ, ಕ್ರಮವಾಗಿ, ಈ ಗುಣಲಕ್ಷಣಗಳಲ್ಲಿ ಒಂದನ್ನು ಬಳಸಿ: ಪ್ಯಾಡಿಂಗ್-ಟಾಪ್, ಪ್ಯಾಡಿಂಗ್-ಬಲ, ಪ್ಯಾಡಿಂಗ್-ಕೆಳಭಾಗಮತ್ತು ಪ್ಯಾಡಿಂಗ್-ಎಡ.
ಇಂಡೆಂಟೇಶನ್ ಎಷ್ಟು ಪಿಕ್ಸೆಲ್‌ಗಳಾಗಿರಬೇಕು ಎಂಬುದನ್ನು ನೀವು ನಿಖರವಾಗಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು. ಕೆಳಗಿನ ಇಂಡೆಂಟ್ ಇರುವ ಉದಾಹರಣೆಯನ್ನು ನೀಡೋಣ 20
ಪಿಕ್ಸೆಲ್‌ಗಳು ಮತ್ತು ಉಳಿದವುಗಳೆಲ್ಲವೂ ಇರುತ್ತದೆ 10
. ಅಂತಹ CSS- ಕೋಡ್ ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:
Td (ಪ್ಯಾಡಿಂಗ್: 10px; ಪ್ಯಾಡಿಂಗ್-ಬಾಟಮ್: 20px;)
ಮತ್ತು ಈ ಹಂತದಲ್ಲಿ ಸಂಪೂರ್ಣ ಶೈಲಿ ಕೋಡ್:
ಕೋಷ್ಟಕ (ಅಡ್ಡ: ಘನ 1px ನೀಲಿ; ಗಡಿ-ಕುಸಿತ: ಕುಸಿತ; ) td ( ಗಡಿ: ಘನ 1px ನೀಲಿ; ಪ್ಯಾಡಿಂಗ್: 10px; ಪ್ಯಾಡಿಂಗ್-ಕೆಳಗೆ: 20px; )
ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಫಲಿತಾಂಶ:
ಜೀವಕೋಶಗಳ ನಡುವಿನ ಅಂತರಗಳು
ನಿಯಮದಂತೆ, ಚೌಕಟ್ಟುಗಳು, ಕೋಶಗಳಲ್ಲಿ ಇಂಡೆಂಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಮತ್ತು ಕೋಶಗಳ ಬಣ್ಣ ಹಿನ್ನೆಲೆಯನ್ನು ಹೊಂದಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಟ್ಯಾಗ್ಗಳು, ಗುಣಲಕ್ಷಣಗಳು ಮತ್ತು ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಕೋಷ್ಟಕಗಳನ್ನು ರಚಿಸುವುದರೊಂದಿಗೆ ಸಂಬಂಧಿಸಿದ ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಹರಿಸಬಹುದು.
ಕೋಷ್ಟಕಗಳಲ್ಲಿನ ಇಂಡೆಂಟ್‌ಗಳು ಜೀವಕೋಶಗಳ ಒಳಗೆ ಮಾತ್ರ ಕಂಡುಬರುವುದಿಲ್ಲ. ಅವು ಜೀವಕೋಶಗಳ ನಡುವೆಯೂ ಇರಬಹುದು.
ಕೋಶಗಳ ನಡುವೆ ಇಂಡೆಂಟ್ ಮಾಡಲು ಎರಡು ಆಯ್ಕೆಗಳಿವೆ:
- ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸುವುದು ಜೀವಕೋಶಗಳ ಅಂತರಟ್ಯಾಗ್ಗಾಗಿ
.
- ಬಳಸುತ್ತಿದೆ CSS- ಗುಣಲಕ್ಷಣಗಳು ಗಡಿ-ಅಂತರ.
ಎಂಬುದನ್ನು ಒತ್ತಿ ಹೇಳಬೇಕು ಗಡಿ-ಅಂತರಆಸ್ತಿಯನ್ನು ಒಟ್ಟಾರೆಯಾಗಿ ಟೇಬಲ್‌ಗೆ ನಿರ್ದಿಷ್ಟಪಡಿಸಲಾಗಿದೆ ಪ್ಯಾಡಿಂಗ್ಜೀವಕೋಶಗಳಿಗೆ ನೇರವಾಗಿ ಬರೆಯಲಾಗಿದೆ.
ಒಂದು ಉದಾಹರಣೆಯನ್ನು ನೋಡೋಣ:
ಕೋಷ್ಟಕ (ಅಡ್ಡ: ಘನ 1px ನೀಲಿ; ಗಡಿ-ಕುಸಿತ: ಪ್ರತ್ಯೇಕ; ಗಡಿ-ಅಂತರ: 5px; ) td ( ಗಡಿ: ಘನ 1px ನೀಲಿ; ಪ್ಯಾಡಿಂಗ್: 10px; ಪ್ಯಾಡಿಂಗ್-ಕೆಳಗೆ: 20px; )
ಮತ್ತು ಪರಿಣಾಮವಾಗಿ ಫಲಿತಾಂಶ:
ಅಂತಹ ಇಂಡೆಂಟೇಶನ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ನೀವು ಮಾಡಲು ಪ್ರಯತ್ನಿಸಬಾರದು ಎಂದು ನಾವು ತಕ್ಷಣವೇ ಷರತ್ತು ವಿಧಿಸೋಣ ಗಡಿ ಕುಸಿತ: ಕುಸಿತ. ಎಲ್ಲಾ ನಂತರ, ಈ ಆಯ್ಕೆಯನ್ನು ಬಳಸುವಾಗ, ಜೀವಕೋಶಗಳು ಪರಸ್ಪರ "ಅಂಟಿಕೊಳ್ಳುತ್ತವೆ".
ಮತ್ತು ಅವುಗಳನ್ನು ಪರಸ್ಪರ ಪ್ರತ್ಯೇಕವಾಗಿ ಇರಿಸಲು, ನೀವು ಬಳಸಬೇಕು ಗಡಿ ಕುಸಿತ: ಪ್ರತ್ಯೇಕ. ಈ ಮೌಲ್ಯವು ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವಾಗಿದೆ ಎಂದು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಬಹಳ ಮುಖ್ಯ. ಮತ್ತು ಈ ಸಮಸ್ಯೆಯನ್ನು ಹೇಗೆ ಪರಿಹರಿಸಲಾಗಿದೆ ಎಂಬುದನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ತೋರಿಸಲು ಮಾತ್ರ ಇದನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ನಾವು ಈ ಸಾಲನ್ನು ಅಳಿಸಿದರೆ, ಪರಸ್ಪರ ಪ್ರತ್ಯೇಕವಾಗಿ ಇರುವ ಕೋಶಗಳ ರೂಪದಲ್ಲಿ ಫಲಿತಾಂಶವನ್ನು ಉಳಿಸಲಾಗುತ್ತದೆ.
