CSS සමඟ වගුව තුළ අභ්යන්තර පේළි (දේශසීමා) එකතු කරන්නේ කෙසේද

මිනිත්තු පහක් තුළ CSS වගුවේ සීමාවක් සෑදීමට ඉගෙන ගන්න

CSS සහ HTML වගු මිශ්ර නොවන බව ඔබ අසා ඇති. මෙය හුදෙක් සත්ය නොවේ. ඔව්, පිරිසැලසුම සඳහා HTML වගු භාවිතා කිරීම තවදුරටත් වෙබ් නිර්මාණකරණයක හොඳ භාවිතයක් නොවේ, CSS ආකෘතියේ ආකෘති වෙනුවට ප්රතිස්ථාපනය කර ඇත, නමුත් වගු තොරතුරු වෙබ් පිටුවකට ටැබ්ලටය දත්ත එක් කිරීමට භාවිතා කිරීමට නිවැරදි වගු තවමත් පවතී.

අවාසනාවකට මෙන්, බොහෝ වෙබ් වෘත්තිකයින් විෂ සහිත බව සිතන අයුරින් ඈත් වී ඇති නිසා, මෙම වෘත්තිකයින්ගෙන් බොහෝ දෙනෙක් මෙම පොදු HTML අංගය සමඟ වැඩ කිරීම සහ ඔවුන් වෙබ් අඩවියේදී ඒවා හැසිරවීමට ඇති කල අරගලය නොලැබේ. නිදසුනක් ලෙස, ඔබට පිටුවක වගුවක් තිබේ නම් සහ වගු සෛල වලට අභ්යන්තර රේඛා එකතු කිරීමට අවශ්ය වේ.

CSS වගු මායිම්

වගු සඳහා සීමාවන් එකතු කිරීම සඳහා CSS භාවිතා කරන විට එය වගුවේ පිටත වටා පමණි. ඔබට එම වගුවේ තනි සෛල සඳහා අභ්යන්තර රේඛා එකතු කිරීමට අවශ්ය නම්, අභ්යන්තර CSS මූලද්රව්ය සඳහා සීමාවන් එකතු කිරීමට අවශ්ය වේ. එක් එක් සෛල තුළ පේළි එක් කිරීමට HR ටැග් භාවිතා කළ හැකිය.

මෙම ලිපියේ ආවරණය කර ඇති ශෛලියට අදාළව, ඔබ ඔබේ වෙබ් පිටුවෙහි වගුවක් තිබේ දැයි පැහැදිලිවම තිබිය යුතුය. ඔබ ඔබේ ලේඛනයේ හිස තුළ අභ්යන්තර ශෛලියේ පත්රයක් ලෙස ශෛලීෂ පත්රයක් නිර්මාණය කළ යුතුය (ඔබ ඔබේ "වෙබ් අඩවිය" තනි පිටුවක් නම් මෙය සිදු කල හැකිය) හෝ බාහිර ලේඛන පත්රයක් ලෙස ලේඛනය සමඟ බැඳී ඇත (මෙය ඔබට ඔබේ වෙබ් අඩවියේ පිටු ගණනක් තිබේ නම් - ඔබට එක් පිටුවක බාහිර සටහන් පත්රයක් සකසා ගැනීමට ඉඩ සලසයි. එම ශෛලියේ පත්රයේ අභ්යන්තර රේඛා එකතු කිරීම සඳහා ඔබට විලාසයන් දැමිය හැකිය.

ඔබ ආරම්භ කිරීමට පෙර

පළමුව ඔබට ඔබේ වගුවෙහි පේළි දිස්විය යුතු ස්ථානය තීරණය කළ යුතු වේ. ඔබට විකල්ප කිහිපයක් තිබේ:

• විදුලිබල පද්ධතියක් පිහිටුවීම සඳහා සියළු සෛල
• තීරු අතරේ පේළි ස්ථානගත කිරීම;
• පේළි අතර පමණි. හෝ
• විශේෂ තීරු හෝ පේළි අතර.

ඔබට තනි සෛල හෝ තනි සෛල ඇතුළත පේළි ස්ථානගත කළ හැකිය.

වගුවක ඇති සියළුම ෛසල වටා එකතු කරන ආකාරය

ඔබගේ මේසයේ සියළුම සෛල වටා රේඛා එක් කිරීම සඳහා, එම ග්රාහක-ආචරණ නිර්මාණය කිරීම, ඔබගේ ශෛලිය පත්රයට පහත දැක්වෙනු ඇත:

td, th {
දේශසීමා: ඝන 1px කළු;
}}

මේසයේ තීරු අතර ඇති පේළි එකතු කිරීම සඳහා කෙසේද

තීරු අතර පේළි එක් කිරීමට (මෙය වගුවේ තීරු මත ඉහළ සිට පහළ දක්වා දිවෙන සිරස් රේඛා නිර්මාණය කරයි), ඔබගේ ශෛලිය පත්රයට පහත සඳහන් කරන්න:

td, th {
දේශසීමා වමේ: ඝන 1px කළු;
}}

එවිට, පළමු තීරුවේ පෙනෙන්නට අකමැති නම්, ඔබට th සහ td සෛල සඳහා පංතියක් එක් කිරීමට අවශ්ය වනු ඇත. මෙම උදාහරණයේ දී, අපි සෛල වල කිසිදු සීමාවක් ඇති බව අපි විශ්වාස කරමු. අපි මෙම විශේෂිත CSS නීතිය සමඟ සීමාව ඉවත් කරන්නෙමු. ඉතින් මෙන්න අපි HTML භාවිතා කරන පන්තියයි:

class = "කිසිම දේශ සීමාවක්">

ඉන්පසු අපගේ ශෛලිය පත්රයට පහත දැක්වෙන ශෛලිය එකතු කළ හැකිය:

.no-border {
දේශසීමා-වමට: කිසිවක්;
}}

මේසයේ පේළි අතර පේළිය එකතු කරන ආකාරය

තීරු අතර පේළි එකතු කිරීමේදී මෙන්, ඔබට ඔබගේ ශෛලිය පත්රයට එකතු කළ එක් සරල ආකාරයකින් මෙය කළ හැකිය. පහත CSS පහත දැක්වෙන අපගේ වගුවේ සෑම පේළියක් අතර සිරස් රේඛා එකතු කරනු ඇත:

tr {
මායිම්-පහළ: ඝන 1px කළු;
}}

මේසයේ පතුලේ සිට දේශ සීමාව ඉවත් කිරීම සඳහා, ඔබ නැවත එම tr ටැගය සඳහා පංතියක් එක් කරන අතර,

class = "කිසිම දේශ සීමාවක්">

ඔබගේ ශෛලිය පත්රයට පහත දැක්වෙන ශෛලිය එකතු කරන්න:

.no-border {
මායිම්-පහළ: කිසිවක් නැත;
}}

වගුවක විශේෂිත තීරු හෝ පේළි අතර පේළි එකතු කරන්න

ඔබට නිශ්චිත පේළි හෝ තීරු අතර පේළි අවශ්ය වන්නේ නම්, එම සෛල හෝ පේළි මත පංතියක් භාවිතා කළ යුතුය. තීරු අතර පේළිය එකතු කිරීම පේළි අතරට වඩා දුෂ්කර අතර එම තීරුවේ සෑම සෛලයකටම පන්තිය එක් කිරීමට සිදු වේ. ඔබගේ වගුව කිසියම් ආකාරයක CMS ආකාරයෙන් ජනනය කර තිබේ නම් , මෙය කළ නොහැකි වනු ඇත, නමුත් ඔබ අතින් කේත කේතය නම්, මෙම ප්රයෝගය ලබා ගැනීම සඳහා ඔබට සුදුසු පංති එකතු කළ හැකිය.

class = "අතුරු මායිම">

පේළි අතර පේළි එකතු කිරීම පහසුය, ඔබට ඔබට පේළියට අවශ්ය පේළියට පංතිය එකතු කළ හැකිය.

class = "මායිම්-පහළ">

එවිට ඔබේ ස්ටයිල් පත්රයේ CSS එකතු කරන්න:

.order-side {
දේශසීමා වමේ: ඝන 1px කළු;
}}
.බඩිම-පහළ {
මායිම්-පහළ: ඝන 1px කළු;
}}

වගුවක තනි සෛල පමණ පේළි එකතු කරන්න

තනි සෛල වටා රේඛා එකතු කිරීම සඳහා, ඔබ වටා මායිමේ අවශ්ය සෛලයට පන්තියක් එක් කරන්න:

class = "මායිමේ">

එවිට ඔබේ රචනයෙහි පහත CSS එකතු කරන්න:

.බියුරිය {
දේශසීමා: ඝන 1px කළු;
}}

වගුවක තනි සෛල ඇතුළත පේළි එකතු කරන්නේ කෙසේද

ඔබට සෛලයක අන්තර්ගත පේළි එකතු කිරීමට අවශ්ය නම්, මෙය කිරීමට පහසුම ආකාරය වන්නේ තිරස් රීති ලේබලය (

---

).

ප්රයෝජනවත් ඉඟි

ඔබේ දේශසීමා තුළ හිඩැස් දැකීමට නම්, ඔබේ වගුවෙහි මායිම් කඩා වැටීමේ විලාසය සැකසීමට වගබලා ගත යුතුය. ඔබගේ ශෛලිය පත්රයට පහත සඳහන් දෑ එකතු කරන්න:

වගුව {
දේශ සීමා බිඳවැටීම: කඩා වැටීම;
}}

ඉහත CSS සියල්ලම මග හැරී ඔබගේ වගු ටැගය තුළ දේශාංශ ගතිගුණ භාවිතා කරන්න. කෙසේ වෙතත්, ඔහුගේ ආවේගය, නොසලකා හැර ඇති නමුත්, CSS වලට වඩා සැලකිය යුතු ලෙස අඩු නම්යශීලී බවක් ඇති අතර, ඔබට සීමාවෙහි පළල නිර්වචනය කල හැක්කේ, මේසයේ සියලුම සෛල පමණි.