ඉගෙනුම් වගු ගුණාංග වලින් HTML වගු වලින් උපරිමය ලබා ගැනීම
HTML වගු ගුණාංග ඔබට HTML වගු මත බොහෝ දේ පාලනය කරයි. මේවාට වඩාත් ආකර්ශනීය හා ඔබේ පිටුවෙහි පෙනුම වෙනස් කිරීම සඳහා වගු ලබා ගත හැක.
HTML ටැබ් මූලද්රව්ය ගුණාංග
HTML5 හි මූලද්රව්ය ගෝලීය ගුණාංග සහ තවත් එක් ගති ලක්ෂණයක් භාවිතා කරයි:. තවද එය 1 හෝ හිස් අගයක් පමණක් වෙනස් කර ඇත (එනම්, මායිම් = ""). ඔබ දේශ සීමාවේ පළල වෙනස් කිරීමට අවශ්ය නම්, ඔබ විසින් මායිම්-පළල CSS ගුණාංගය භාවිතා කළ යුතුය.
වලංගු HTML5 වගු ගුණාංග දැනගැනීම සඳහා පහත බලන්න.
HTML 4.01 හි දී අභාවයට ගිය HTML 4.01 විශේෂිත අංගයේ ගුණාංග කිහිපයක් ඇත:
- වගුවෙහි TD සහ TH මූලද්රව්ය මත CSS වැල්ඩින් දේපළ භාවිතා කරන්න.
- - CSS දේපල සීමාව-මේසය මත භාවිතා කරන්න.
- -බව CSS ශෛලමය පාට-වර්ණය: කළු; මේසයේ මායිමේ හැඩය.
- -බව CSS ශෛලමය පාට-වර්ණය: කළු; සහ මායිම් ශෛලමය වගුවේ වගුවේ ඇති සුදුසු අංග මත.
- -නැතිනම්, ඔබ කේප්තියේ වගුවේ ව්යුහය විස්තර කළ යුතුය හෝ සම්පූර්ණ වගුව FIGURE තුළ තබා එය FIGCAPTION ලෙස විස්තර කරන්න. විකල්පයක් ලෙස, ඔබට වගුවෙහි ව්යුහය සරල කළ හැකි වන පරිදි කිසිදු පැහැදිලි කිරීමක් අවශ්ය නොවේ.
- CSS පළල දේපල භාවිතා කරන්න.
HTML 4.01 හි අභිප්රේරණය නොවූ එක් ගති ලක්ෂණයක් සහ HTML5 හි අභාවයට ගොස් ඇත.
HTML 4.01 ටැබ් අභිරුචි ගැන තවත් දැනගන්න.
- align-වෙනුවට CSS ආන්තික දේපල භාවිතා කරන්න.
ඕනෑම HTML නියමයක් තුළ කොටසක් නොවන බව ගුණාංග කිහිපයක් ඇත.
ඔබ සහාය දක්වන බ්රව්සරයන් ඒවා හැසිරවිය හැකි බව ඔබ දන්නේ නම්, මෙම ගුණාංග භාවිතා කරන්න, වලංගු HTML සඳහා ඔබ සැලකිල්ලක් නොදක්වයි.
- - CSS දේපල පසුබිම වර්ණය භාවිතා කරන්න.
- දේශසීමාකාරකය වෙනුවට CSS දේපල සීමාව-වර්ණය භාවිතා කරන්න.
- දේශසීමා වර්ණාලේපය වෙනුවට CSS දේපළ සීමාව-වර්ණය භාවිතා කරන්න.
- bordercolordark-වෙනුවට CSS දේපළ සීමාව-වර්ණය භාවිතා කරන්න.
- cols - මෙම ගුණාංගයට විකල්පයක් නැත.
- උස - CSS දේපල උස වෙනුවට භාවිතා කරන්න.
- - CSS දේපල ආන්තිකය භාවිතා කරන්න.
- - CSS දේපල ආන්තිකය භාවිතා කරන්න.
- - CSS දේපල සුදු පැහැති අවකාශය භාවිතා කරන්න.
- - CSS දේපළ සරලව උපයෝගී කර ගන්න.
බ්රවුසරයේ විශේෂිත ටැබ් පරාවර්තක පිළිබඳ තවත් දැනගන්න.
HTML5 ටැබ් මූලද්රව්ය ගුණාංග
ඉහත සඳහන් කළ පරිදි, HTML5 TABLE මූලද්රව්යයෙහි වලංගු වන්නේ ගෝලීය ගුණාංග වලින් එකක ඇති එකම ගති ලක්ෂණයක් පමණි.
දේශසීමා ආකෘතිය සමස්ත වගුවේ හා දේශසීමාවේ සෑම සෛලයකම දේශ සීමාවක් නිර්ණය කිරීමට යොදා ගනී. HTML5 පිරිවිතරයට ඇතුළත් කළ යුතුද යන්න ගැන යම් ප්රශ්නයක් පැනනැඟී තිබුණද, එය සරලව ශෛලීය ඇඟවුම් වලින් තොරව වගු ව්යුහය පිළිබඳ තොරතුරු සපයන ලදි.
දේශ සීමාව එක් කිරීම සඳහා, ඔබ සීමාව සහ හිස් (හෝ අද්විතීයත්වය අත්හැර දැමීම) නොමැති නම් 1 අගයට තැබිය හැක. බොහෝ බ්රව්සර්වල කිසිදු සීමාවක් සඳහා කිසිම සහයෝගයක් නොලැබේ. තවද, පික්සෙල්හි පළල මායිමේ පළල ප්රකාශයට පත් කිරීම සඳහා වෙනත් ඕනෑම පූර්ණ අගයක් (2, 3, 30, 500, ආදිය), නමුත් මෙය HTML5 හි යල්පැන ඇති ය. ඒ වෙනුවට, ඔබ මායිම් පළල සහ අනෙකුත් ශෛලීන් නිර්වචනය කිරීමට CSS දේශසීමා ශෛලමය ගුණාංග භාවිතා කළ යුතුය.
මායිමක් සහිත වගුවක් නිර්මාණය කිරීම සඳහා:
border = "1" >
මෙම මායිමේ මායිම වගුවකි
HTML5 හි HTML5 හි අභිජනනය කළ HTML 4.01 ගුණාංග ඇත. HTML 4.01 ලේඛන ලිවීමට සැලසුම් කර ඇත්නම්, ඔබට ඒවා ඉගෙන ගත හැක. එසේ නොමැති නම් ඔබට ඒවා නොසලකා හැරිය හැකිය. මෙම ගුණාංග වලින් බොහොමයක් ඉහත විස්තර කර ඇති විකල්පයන් ඇත.
HTML5 හි වලංගු වන මූලද්රව්යයේ ගුණාංග අපි විස්තර කරමු (සහ HTML 4.01). HTML 4.01 වල වලංගු වන TABLE ගුණාංගයන් මෙය විස්තර කරයි, නමුත් HTML5 හි අභාවයට ගොස් ඇත. ඔබ තවමත් HTML 4.01 ලියවිලි ලියන්නේ නම්, ඔබට මෙම ගුණාංග භාවිතා කළ හැකිය. නමුත් බොහෝ ඒවායේ HTML5 වෙත ගමන් කරන විට ඔබගේ පිටු වඩා අනාගත සුරක්ෂිත කරනු ඇත.
වලංගු HTML 4.01 ගුණාංග
අප ඉහත විස්තර කර ඇත.
HTML5 හි HTML 4.01 හි ඇති එකම වෙනස පික්සෙල්හි පළලෙහි පළල අර්ථ දැක්වීම සඳහා ඔබට ඕනෑම පූර්ණ පූර්ණ සංඛ්යා (0, 1, 2, 15, 20, 200, ආදිය) නියම කළ හැකිය.
5px සීමාවක් සහිතව මේසයක් තැනීම සඳහා, ලියන්න:
border = "5" >
මෙම වගුව 5px සීමාවක් ඇත.
දේශසීමා සහිත මේස දෙකක උදාහරණයක් බලන්න.
මෙම ආවේගය සෛල මායිම් අතර සෛල අන්තර්ගතය අතර ඇති ඉඩ ප්රමාණය අර්ථ දැක්වේ. පෙරනිමිය පික්සල දෙකක් ඇත. ඔබට අන්තර්ගතය සහ දේශසීමා අතර කිසිදු ඉඩක් අවශ්ය වන්නේ නම් 0 කට්ටියට සකසන්න.
සෛලය පිරවීම සඳහා 20 දක්වා තබන්න:
cellpadding = "20" >
මෙම වගුව 20 කින් සමන්විතය.
සෛල මායිම් පික්සල 20 කින් වෙන් කරනු ලැබේ.
Cellpadding සහිත වගුවක් උදාහරණයක් බලන්න
මෙම වගුවේ වගු සෛල හා සෛල අන්තර්ගතය අතර ඇති ඉඩ ප්රමාණය අර්ථ දැක්වේ. Cellpadding ලෙස, පෙරනිමිය පික්සල දෙකක් දක්වා ඇති අතර, එබැවින් ඔබ සෛල පරතරය අවශ්ය නම් 0 ට එය සැකසිය යුතුය.
වගුවකට සෛල පරතරය එක් කිරීමට, ලියන්න:
<වගුව cellspacing = "20" >
මෙම වගුව 20 කින් සමන්විතය.
සෛල පික්සල 20 කින් වෙන් කරනු ලැබේ.
සෛල සහිත වගුවක් බලන්න
මෙම වගුව මඟින් වගුවේ පිටත වටා ඇති දේශ සීමාව පැහැදිලිව දැකිය හැකිය. සෑම පැත්තකින්ම, එක් පැත්තක ඉහළ හා පහළ, වම් සහ දකුණු, හෝ කිසිවෙකුත් ඔබේ වගුව රාමු කරගත නොහැකිය.
වම් පැත්තේ මායිම පමණක් සහිත වගුවක් සඳහා HTML මෙන්න:
frame = "lhs" >
මෙම වගුව
සතුව ඇත
පමණක්
වම් පැත්තක් රාමු.
පහත සඳහන් රාමුව සමඟ තවත් උදාහරණයක්:
frame = "පහත" >
මෙම වගුව පහළ කොටසේ රාමුවක් ඇත.
රාමු සහිත සමහර වගු පරීක්ෂා කරන්න
මෙම ආකෘතිය රාමු ගති ලක්ෂණයට සමානයි, එය පමණක් වගුවේ සෛල වටා මායිම් වලට බලපායි. TBODY සහ TFOOT වැනි කණ්ඩායම් අතර තීරු අතර සියළුම සෛල මත රීති සැකසිය හැකිය.
පේළි අතර ඇති පේළි සමඟ මේසයක් තැනීමට, ලිවීමට:
රීති = "පේළි" >
මෙම 4x4 වගුව
පේළි තීරු නොවේ
සමඟ විස්තර කර ඇත
නීති අනුක්රමය.
තවත් තීරු පේළියක් සහිතව:
rules = "cols" >
මෙය
වගුව
කොතැනද යන්න
තීරු
වේ
උද්දීපනය කරන ලදි
මෙන්න නීති රීතිවලට වගුවේ උදාහරණයකි
තිරය කියවීමට සහ වගුව කියවීමේ ගැටළු ඇති විය හැකි අයුරින් මෙම රූපය ලබා දේ. සාරාංශ ආකෘතිය භාවිතා කිරීම සඳහා, ඔබ මේසය පිළිබඳ කෙටි විස්තරයක් ලියා ඇති අතර එම ගුණාංගයේ වටිනාකම ලෙස සලකනු ලැබේ. බොහෝ විට සම්මත වෙබ් බ්රවුසර වල වෙබ් පිටුවෙහි සාරාංශයක් ප්රදර්ශනය නොවේ.
සාරාංශයක් සහිත සරල වගුවක් ලිවීමට මෙන්න:
summary = "මෙම වගුවේ අරමුණ වන්නේ සාරාංශ තොරතුරු අඩංගු වන නියැදි වගුවකි. >
තීරුව 1 පේළිය 1
තීරුව 2 පේළිය 1
තීරුව 1 පේළිය 2
තීරුව 2 පේළිය 2
සාරාංශයක් සහිත වගුවක් බලන්න
මෙම පික්සලය පික්සෙල් එකේ පළලෙහි පළල හෝ බහාලුම් මූලද්රව්යයේ ප්රතිශතයක් ලෙස දැක්වේ. පළල නොතිබුනේ නම්, වගුවේ අන්තර්ගතය ප්රදර්ශනය කිරීමට අවශ්ය තරම් ඉඩක් පමණි. එය උපරිම පළලක් වන්නේ මාපින්නයේ මූලද්රව්යයේ පළල මෙන් ම ය.
පික්සල්වල නිශ්චිත පළලක් සහිතව මේසයක් තැනීම සඳහා, ලියන්න:
width = "300" >
මෙම වගුව එහි තිබෙන බහාලුම් ප්රමාණයෙන් 80% ක් වේ.
තවද, මාපිය මූලද්රව්යයේ ප්රතිශතයක් වන පළලක් සහිත මේසයක් සාදන්න:
width = "80%" >
මෙම වගුව එහි තිබෙන බහාලුම් ප්රමාණයෙන් 80% ක් වේ.
පළලකින් යුත් මේසය පිළිබඳ උදාහරණයක් බලන්න
අසාර්ථක HTML 4.01 ටැබ් උපකරණ
HTML 4.01 හි අතහැර දමා ඇති TABLE මූලද්රව්යයේ එක් ලක්ෂණයක් ඇත. HTML5 හි අභාවයට ගොස් ඇත. මෙම ආචයනය අසල ඇති පෙළට සාපේක්ෂව වගුව ස්ථානගත කළ යුත්තේ කුමන තැනකද යන්නයි. HTML 4.01 හි මෙම ගුණාංගය අතහැර දමා ඇති අතර එය භාවිතා කිරීම වැළැක්විය යුතුය. ඒ වෙනුවට, ඔබ CSS ගුණාංගය හෝ ආන්තික වමේ: auto; සහ ආන්තික-දකුණ: ස්වයං; ශෛලීන්. Float දේපල මඟින් සෘජුවම ගැලපෙන ප්රතිරූපයට සමීප වන ප්රතිඵලයක් ලබා දෙයි, නමුත් පිටු පිටුවෙහි ඉතිරි කොටස පෙන්වන ආකාරය කෙරෙහි බලපෑම් ඇති කළ හැකිය. ආන්තික-දකුණ: ස්වයං; සහ ආන්තික වම: ස්වයං; W3C නිර්දේශ කරන්නේ විකල්පයක් ලෙසයි.
Align attribute භාවිතා කරමින් අතහැර දමා ඇති නිදසුනකි:
align = "හරි" >
මෙම වගුව නිවැරදි ලෙස සම්බන්ධිතයි
වමනය වමට වම් පස ප්රවාහනය කරයි
Align ගුණාංග භාවිතා කරමින් විරූපී උදාහරණයක් බලන්න.
වලංගු (නොසලකා නොගත්) HTML සමග එකම ප්රතිඵලය ලබා ගැනීම සඳහා, ලියන්න:
style = "float: right;" >
මෙම වගුව නිවැරදි ලෙස සම්බන්ධිතයි
වමනය වමට වම් පස ප්රවාහනය කරයි
පහත සඳහන් HTML විචලනයන්හි කොටසක් නොවන TABLE ගුණාංග පහත දැක්වේ.
HTML 4.01 හි වලංගු වන HTML මූලද්රව්යයේ ගුණාංග වල පූර්ව තොරතුරු විස්තර කරන නමුත් HTML5 හි අභාවයට ගොස් ඇත.
පහත දැක්වෙන වත්මන් පිරිවිතර වල වලංගු නොවන TABLE ගුණාංග පහත දැක්වේ. ඔබගේ පිටු වලංගුභාවය සහ ඔබේ පරිශීලකයින් මෙම මූලද්රව්යවලට සහාය දෙන බ්රවුසරයක් භාවිතා කරන්නේද යන්න ගැන ඔබ සැලකිලිමත් වන්නේ නම්, ඔබට එම මූලද්රව්ය භාවිතා කළ හැකිය. නමුත් ඒවායින් බොහොමයක් නූතන බ්රව්සර්වල සහය නොදක්වයි. එසේත් නැත්නම් ඒවායේ ප්රමිති අනුකූල වන විකල්ප තිබේ.
ඔබගේ HTML වගු තුළ මෙම ගුණාංග භාවිතා කිරීමට අපි නිර්දේශ නොකරමු .
මෙම ලක්ෂණය CSS වඩා පුළුල් ලෙස අනුග්රහය දැක්වීමට පෙර ඇතුලත් කරන ලද පැරණි ලක්ෂණයකි. මේසයේ පසුබිම් වර්ණය වෙනස් කිරීමට ඔබට ඉඩ සලසයි. ඔබට වර්ණ නාමයක් හෝ කෝණික අක්ෂර කේතයක් සැකසිය හැකිය. මෙම ලක්ෂණය තවමත් බ්රවුසරයේ බොහෝ ක්රියා කරයි, නමුත් අනාගත-නිර්මිත HTML සඳහා, ඔබ එය භාවිතා නොකළ යුතුය, වෙනුවට CSS භාවිතා කරන්න.
මෙම ගුණාංගයට වඩා හොඳ විකල්පයක් වන්නේ ශෛලිය දේපලයි.
මේසයේ පසුබිම් වර්ණය වෙනස් කිරීම සඳහා:
style = "background-color: #ccc;" >
මෙම වගුව අළු පසුබිමක් ඇත
Bgcolor ගුණාංගයට සමාන, bordercolor ගුණාංගය ඔබට වර්ණය වෙනස් කිරීමට ඉඩ සලසයි. මෙම ගුණාංගය Internet Explorer විසින් පමණක් සහාය දක්වයි. ඒ වෙනුවට, ඔබ දේශසීමා වර්ණ විලාසය භාවිතා කළ යුතුය.
ඔබේ වගුවෙහි සීමාවේ වර්ණය වෙනස් කිරීම සඳහා, ලියන්න:
style = "border-color: red;" >
මෙම වගුව රතු දේශ සීමාව ඇත.
ඔබගේ දේශාන්තරය වටා 3D මායිමක් නිර්මාණය කිරීමට ඉඩ දීම සඳහා මායිම් වර්ණාලේපනය සහ මායිම්කොඩෝඩර්ක් ගුණාංග Internet Explorer හි ඇතුලත් කර ඇත. කෙසේ වෙතත්, IE8 සහ up ලෙස, මෙය IE7 ප්රමිති ආකාරය සහ Quirks මාතය තුළ පමණක් සහාය දක්වයි. මයික්රොසොෆ්ට් පවසන්නේ මෙම ගුණාංගයන් තවදුරටත් සහාය නොදක්වන බවයි.
කෙටි කාලයක් සඳහා ටැබ්ලටයේ අංගය තීරුවල වගුව කොපමණ ප්රමාණයක් තිබෙනවාදැයි දැන ගැනීමට බ්රවුසරයට උදව් කිරීමට යෝජනා විය. මෙම අදහස විශාල වගු ප්රතිනිෂ්පාදනය කිරීම වේගවත් කරනු ඇත. කෙසේ වෙතත් එය ක්රියාත්මක වූයේ ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් විසින් පමණි. IE8 සහ Up දක්වා එය IE7 ප්රමිති මොඩියුලය හා Quirks මාතය තුල පමණක් සහාය දක්වයි.
පළල ආරෝපණයක් (HTML5 හි දී යල්පැන) ඇති බැවින් බොහෝ අය සිතූ පරිදි මේස සඳහා උස ගුණාංගයක් තිබුනි. නමුත් ඒවායේ අන්තර්ගතයේ පළල හෝ CSS හෝ CSS හි අර්ථ දක්වන ලද පළල අනුකූල වීම නිසා උෂ්ණත්වය සීමා විය නොහැක. ඒ වෙනුවට, මේසයේ අවම උසම ස්ථානය නිර්ණය කිරීමට බ්රව්සරය සමත් විය. එම වගුව එම උස වඩා උසකින් යුක්ත වුවහොත්, එය ඉහළින් දිස්වනු ඇත. නමුත් ඔබ එම දේපල භාවිතා කළ යුතුය
CSS ගුණාංගය සමඟ ඔබ සතු අතිරික්ත අන්තර්ගතය සමඟ සිදු වන දේ නිර්ණය කිරීම සඳහා ඔබ CSS දේපල භාවිතා කරන විට උඩුගත කළ හැකිය.
මේසය මත අවම උසම ස්ථානය සකස් කරන්න:
style = "height: 30em;" >
මෙම වගුව අඩුම වශයෙන් 30 ක් ඉහළයි.
මෙම ගුණාංග දෙක සහ වම් / දකුණු පස කොටස (hspace) සහ ඉහළ / පහළ (සෑම තැනකම) එකතු කර ඇති ඉඩ ප්රමාණය. ඔබ විලාසිතා දේපල භාවිතා කළ යුතුය.
සිරස් අවකාශය පික්සල 20 ක් සහ තිරස් පෙදෙසට පික්සල 40 ක් දක්වා පිහිටුවන්න:
style = "margin: 20px 40px;"
මෙම වගුව පික්සල 20 ක් හා පික්සල් 40 ක hspace වේ.
මෙම ගුණාංගය යනු වගුවේ අන්තර්ගතය මාපිය මූලද්රව්යය හෝ කවුළුවෙහි කෙළවරේ හෝ තිරස් දිශාභිමුඛ අනුචලනයෙහි ඉඟි විය යුතුද යන්න නිර්වචනය කරන බූලියන් විශේෂයකි. ඒ වෙනුවට, ඔබ CSS දේපල භාවිතයෙන් එක් එක් වගුවේ සෛලවල ඔතන චර්යාවන් අර්ථ දැක්විය යුතුය.
අකුරු නොපවතින පෙළක් සහිත තීරුවක් සාදන්න, ලියන්න:
<වගුව>
style = "white-space: nowrap;" > මෙය ටොන් ටොන් සහිත තීරුවකි. එහෙත් එය බහාලුම් වලට වඩා පුළුල් වුවද, ඊළඟ රේඛාව වෙතට පෙළ නොතැබිය යුතු වුවද, සියලු අන්තර්ගතයන් බැලීම සඳහා තිරස් අතට තිරය අනුචලනය කිරීමට බ්රවුසර් කවුළුව බල කරති.
අවසාන වශයෙන්, එක් එක් කොටුවෙහි අන්තර්ගතය සෛල තුල සිරස් ලෙස සවිකර ගත යුතු ය. මෙම අවලංගු ආරෝපණය වෙනුවට, ඔබ වෙනස් කිරීමට අවශ්ය එක් එක් සෛලය මත CSS දේපල භාවිතා කළ යුතුය. සෛල අන්තර්ගතය වෙනත්, විශාල සෛල මගින් නිර්මාණය කරන ලද ඉඩ ප්රමාණයට වඩා අඩු නම් ඔබ මෙම ශෛලියෙහි ප්රතිඵල නොලැබෙනු ඇත.
පහළට සමතලා කිරීමට සෛලයක් බල කිරීම සඳහා (මැද පෙර මෙන්, පෙරනිමිය ලෙස) ලියන්න:
<වගුව>
සෙලියුලර් අනෙක් කොටස්වලට වඩා දිගු වන අතර එමගින් උස වැඩි වනු ඇත. එබැවින් සිරස් දිශාවට ගැලපෙන සෛලය පහළට සමතලා වී ඇති බව ඔබට පෙනෙනු ඇත.
style = "vertical-align: bottom;" > පතුලේ අන්තර්ගතය
මැද අන්තර්ගතයන්.