මිනිසුන් බෙදීම් සමඟ මේස සාදන්නේ ඇයි?

නූතන වෙබ් සංවර්ධනයේදී මම මෙම රටාව වෙන කවරදාකටත් වඩා නිතර නිතර දකිමි. එය මේ වගේ ය:

<div class="table">
    <div class="row">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
</div>

CSS හි එවැනි දෙයක් තිබේ:

.table { display: table; }
.row { display: table-row; }
.cell { display: table-cell; }

^{* (පංතියේ නම නිදර්ශනීය පමණි; සැබෑ ජීවිතයේ දී ඒවා සාමාන්‍ය පන්තියේ නම් වේ.}

මම මෑතකදී මෙය තනිවම කිරීමට උත්සාහ කළ නිසා ... ඔබ දන්නවා, හැමෝම එය කරනවා.

නමුත් මම තවමත් එය ලබා ගන්නේ නැහැ. ඇයි අපි මේක කරන්නේ? ඔබට මේසයක් අවශ්‍ය නම්, පිපිරීමක් <table>කර එය සමඟ කරන්න. ඔව්, එය පිරිසැලසුම සඳහා වුවද. වගු සඳහා ඇත්තේ එයයි - ටැබුලර් විලාසිතාවෙන් දේවල් තැබීම.

මට ඇති හොඳම පැහැදිලි කිරීම නම්, මේ වන විට සෑම කෙනෙකුම “පිරිසැලසුම සඳහා වගු භාවිතා නොකරන්න” යන මන්ත්‍රය අසා ඇති බැවින් ඔවුන් එය අන්ධ ලෙස අනුගමනය කරයි. නමුත් ඔවුන් තවමත් අවශ්ය ආකෘතිය සඳහා මේසයක්, ඔවුන් කළ නිසා (වෙන කිසිවක් මේසයක් ව්යාප්ත වන හැකියාවන් ඇති බැවින්) <div>(ඒක නිසා නොවේ මේසයක්!) හා පසුව එය කෙසේ හෝ මේසයක් කරවන CSS එක් කරන්න.

මුළු ලෝකයටම මෙය මට පෙනෙන්නේ අත්තනෝමතික ලෙස අනවශ්‍ය බාධක ඔබේ මාර්ගයට ගෙනැවිත් ඒවා මඟහරවා ගැනීම සඳහා අමතර වැඩක් කිරීමයි.

පිරිසැලසුම සඳහා වගු වලින් ඉවතට යාමේ මුල් තර්කය වූයේ පසුව වගු සැකැස්ම වෙනස් කිරීම අසීරු බවය. නමුත් "ව්‍යාජ වගු" පිරිසැලසුමක් වෙනස් කිරීම එතරම්ම දුෂ්කර වන අතර එකම හේතු නිසා. ඇත්ත වශයෙන්ම, ප්‍රායෝගිකව පිරිසැලසුමක් වෙනස් කිරීම සැමවිටම දුෂ්කර වන අතර, සුළු සුළු වෙනස් කිරීම් වලට වඩා බැරෑරුම් යමක් කිරීමට ඔබට අවශ්‍ය නම්, CSS වෙනස් කිරීම කිසිසේත් ප්‍රමාණවත් නොවේ. ඔබ ඇත බරපතල නිර්මාණය වෙනස්කම් සඳහා HTML ව්යුහය තේරුම් ගැනීම හා වෙනස් කිරීමට අවශ්ය වේ. තවද වගු මඟින් කාර්යයට වඩා දුෂ්කර හෝ පහසු නොවේ.

ඇත්ත වශයෙන්ම, මම වගු වෙනස් කිරීමට සැකැස්ම දුෂ්කර බවට පත් විය හැකි බව දකින එකම මාර්ගය, ඔබ නම් වේ ab ඔවුන් පාවිච්චි හා අභක්තික අවුල්. ඔබට එය බෙදීම් වලින් ද කළ හැකිය.

ඉතින් ... මෙය රැන්ට් එකක සිට සුහද ප්‍රශ්නයකට වෙනස් කිරීමේ උත්සාහයක: මට නැති වී ඇත්තේ කුමක්ද? මොනවාද? ඒවා සැබෑ සැබෑ එකක් පුරා "ලක්වීමෙන්-වගුව" භාවිතා ප්රතිලාභ?

අනුපිටපත් සබැඳිය ගැන: මෙය වෙනත් ටැගයක් හෝ යමක් භාවිතා කිරීමට යෝජනා නොවේ. මෙය <table>එදිරිව භාවිතා කිරීම පිළිබඳ ප්‍රශ්නයකි display:table.

ප්‍රතිචාරාත්මක වගු සෑදීම සඳහා මෙය පොදු රටාවකි. පෙළ කියවීම සඳහා පිටුව විශාලනය කර ඇති බැවින් වගු දත්ත මොබයිල් වල ප්‍රදර්ශනය කිරීම උපක්‍රමශීලී ය, එයින් අදහස් වන්නේ වගු පිටුවේ පැත්තෙන් ඉවතට යන අතර පරිශීලකයාට වගුව කියවීම සඳහා පසුපසට හා ඉදිරියට අනුචලනය කළ යුතු ය, නැතහොත් පිටුව විශාලනය වනු ඇත. , සාමාන්‍යයෙන් අදහස් කරන්නේ වගුව කියවීමට නොහැකි තරම් කුඩා බවය.

ප්‍රතිචාරාත්මක වගු කුඩා තිරවල පිරිසැලසුම වෙනස් කරයි - සමහර විට සමහර තීරු සැඟවී හෝ තීරු ඒකාබද්ධ කර ඇත, උදා: නම සහ ඊමේල් ලිපිනය විශාල තිරවල වෙනම විය හැකි නමුත් කුඩා තිරවල එක් කොටුවකට කඩා වැටෙන බැවින් තොරතුරු අනුචලනය නොකර කියවිය හැකිය.

<div>s <table>හේතු කිහිපයක් නිසා ටැග් වෙනුවට වගු නිර්මාණය කිරීමට භාවිතා කරයි . <table>ටැග් භාවිතා කරන්නේ නම් , ඔබේම කේතයක් එක් කිරීමට පෙර බ්‍රව්සරයේ පෙරනිමි මෝස්තර සහ පිරිසැලසුම අභිබවා යා යුතුය, එබැවින් මෙම අවස්ථාවේදී <div>ටැග් බොයිලේරු CSS විශාල ප්‍රමාණයක් ඉතිරි කරයි. මීට අමතරව, IE හි පැරණි අනුවාදයන් පෙරනිමි වගු ශෛලීන් අභිබවා යාමට ඔබට ඉඩ නොදේ, එබැවින් <div>s භාවිතා කිරීම හරස් බ්‍රව්සර් සංවර්ධනය සුමට කරයි.

CSS-Tricks හි ප්‍රතිචාරාත්මක වගු පිළිබඳ හොඳ දළ විශ්ලේෂණයක් ඇත .

සංස්කරණය කරන්න: මම මෙම රටාව වෙනුවෙන් පෙනී නොසිටින බව පෙන්වා දිය යුතුය - එය ඩිවිටිස් උගුලට වැටෙන අතර එය අර්ථකථන නොවේ - නමුත් මේ නිසා ඔබ divs වලින් සාදන ලද වගු සොයාගනු ඇත .

ප්‍රශ්නය වන්නේ දත්ත අර්ථාන්විතව වගුවක් නම් (එනම් දත්ත සමූහයක් හෝ තොරතුරු ඒකක තාර්කිකව මාන දෙකකින් සංවිධානය කර තිබීම) හෝ ඔබ දෘශ්‍ය පිරිසැලසුම සඳහා ජාලකය භාවිතා කරන්නේ නම්, උදා: ඔබට පැති තීරුවක් පුළුල් කිරීමට අවශ්‍ය නිසා හෝ එවැනි දෙයක්.

ඔබේ තොරතුරු අර්ථාන්විතව වගුවක් නම්, ඔබ <table>-tag භාවිතා කරයි . පිරිසැලසුම් අරමුණු සඳහා ඔබට ජාලයක් අවශ්‍ය නම්, ඔබ වෙනත් සුදුසු HTML අංග කිහිපයක් භාවිතා display:tableකර ස්ටයිල් ෂීට් එකේ භාවිතා කරයි.

විට දත්ත වගුවක් ශබ්දාර්ථයෙන් ද? දත්ත තාර්කිකව අක්ෂ දෙකක් ඔස්සේ සංවිධානය වූ විට. පේළි හෝ තීරු සඳහා ශීර්ෂයන් සමඟ එය අර්ථවත් නම්, ඔබට අර්ථකථන වගුවක් තිබිය හැකිය. අර්ථාන්විත නොවන වගුවකට උදාහරණයක් වන්නේ පුවත්පතක වැනි තීරුවල පෙළක් ඉදිරිපත් කිරීමයි. මෙය අර්ථාන්විතව වගුවක් නොවේ, මන්ද ඔබ තවමත් එය රේඛීයව කියවන අතර ඉදිරිපත් කිරීම ඉවත් කළහොත් කිසිදු අර්ථයක් නැති නොවේ.

හරි, අර්ථාන්විතව මේසයක් සඳහා පමණක් නොව සෑම දෙයක් සඳහාම භාවිතා නොකරන්නේ ඇයි<table> ? දෘශ්යමය වශයෙන් එය පැහැදිලිවම සමාන වේ (වගු මූලද්රව්යය display:elementපෙරනිමි ශෛලීය පත්රයේ ඇති බැවින්).

වෙනස වන්නේ අර්ථකථන තොරතුරු විකල්ප පරිශීලක නියෝජිතයින්ට උපකාර කළ හැකි වීමයි. නිදසුනක් ලෙස, තිර කියවනය මඟින් ඔබට වගුවේ මානයන් දෙකකින් සැරිසැරීමට ඉඩ දිය හැකි අතර, ඔබ සිටින ස්ථානය ඔබට අමතක වුවහොත් අක්ෂ දෙකම සඳහා කොටුවක් සඳහා ශීර්ෂයන් කියවන්න. වගුව අර්ථාන්විතව වගුවක් නොව දෘශ්‍ය පිරිසැලසුම සඳහා භාවිතා කළේ නම් මෙය ව්‍යාකූල වනු ඇත.

මෙම <table>එදිරිව display:tableසාකච්ඡා අර්ථ විචාර සලකුණු භාවිතා කිරීමේ වඩා පොදු මූලධර්මය පමණක් අදාල ය. නිදසුනක් ලෙස බලන්න: යමෙකු නිසි ලෙස හා අර්ථාන්විතව ලකුණු කිරීම කරදර කරන්නේ ඇයි? හෝ සෙවුම් යන්ත්‍ර සඳහා අර්ථකථන සලකුණු කිරීම සඳහා වැඩි බරක් ලබා දෙන්නේ ඇයි?

සමහර ස්ථානවල ඔබට ප්‍රවේශවීමේ හේතුන් සඳහා අර්ථකථන සලකුණු භාවිතා කිරීමට නීත්‍යානුකූලව අවශ්‍ය විය හැකි අතර, කෙසේ වෙතත් ඔබේ පිටුවට ප්‍රවේශ විය හැකි ලෙස අඩු කිරීමට කිසිදු හේතුවක් නැත.

ඔබ ආබාධිත පරිශීලකයින් ගැන සැලකිල්ලක් නොදක්වුවද, අන්තර්ගතයෙන් වෙන්ව ඉදිරිපත් කිරීමක් කිරීමෙන් ඔබට ප්‍රතිලාභ ලැබේ. උදා: ඔබේ තීරු තුනේ පිරිසැලසුම විකල්ප මෝස්තරයක් භාවිතා කරමින් ජංගම දුරකථනයක තනි තීරුවකින් ඉදිරිපත් කළ හැකිය.

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

<div class="table">
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

මෙම සංවර්ධකයා විසින් කර ඇති සියල්ලම මුල් <table>සලකුණු කිරීම CSS පන්ති නම් සමඟ අනුකරණය කිරීම පමණි . මෙයින් අදහස් කරන්නේ මෙම පිරිසැලසුම වගුවක් නොවන වහාම පන්ති නාම එකිනෙකට පරස්පර බවයි.

මෙම සංවර්ධකයා විසින් කළ යුතුව තිබුණේ වගුවේ ඇති තොරතුරු සලකා බැලීමයි - එය සිඟිති රූප ගැලරියද? හොඳයි, එහෙනම්:

<div class="thumbnail-gallery">
  <div>
    <div class="thumbnail">
      <img src="" />
      <p>Some text</p>
    </div>
    <div class="thumbnail">
      <img src="" />
      <p>Some text</p>
    </div>
    <div class="thumbnail">
      <img src="" />
      <p>Some text</p>
    </div>
  </div>
</div>

දැන් මට අනුවර්තී CSS කිහිපයක් නිර්මාණය කළ හැකිය:

@media screen {
  .thumbnail-gallery {
    display: table;
    border-collapse: collapse;
    width: 100%;
  }

  .thumbnail-gallery > div {
    display: table-row;
  }

  .thumbnail-gallery .thumbnail {
    display: table-cell;
    border: 1px solid #333333;
  }
}

@media screen and (max-width: 640px) {
  /** reset all thumbnail gallery elements to display as block and fill screen **/
  .thumbnail-gallery,
  .thumbnail-gallery > div,
  .thumbnail-gallery .thumbnail {
    display: block;
    width: 100%;
  }
}

බෙදීම් සහ වගු නොවන්නේ ඇයි

වගුවක වගු දත්ත අඩංගු වේ - වගුවක් ඉදිරිපත් කිරීම වගුවක ව්‍යුහයට නොවැලැක්විය හැකි ලෙස සම්බන්ධ වේ. ඔබ එම අන්තර්ගතය කොතැනක තැබුවද හෝ එය ප්‍රදර්ශනය කිරීමට අවශ්‍ය තිරය / උපාංගය කුමක් වුවත් වගු දත්ත සෑම විටම වගුගත ස්වරූපයෙන් තිබිය යුතුය.

සිඟිති රූප ගැලරිය (හෝ ලියාපදිංචි කිරීමේ පෝරමයක්, මෙනුවක් සහ තවත් බොහෝ දේ) වගු දත්ත නොවේ. එය සමහර සැලසුම් පිරිසැලසුම් වල වගුවක් මෙන් ඉදිරිපත් කළ හැකි නමුත් වෙනත් අවස්ථාවල පටු දුරකථන තිර වැනි ඔබට එය වඩාත් සාම්ප්‍රදායික බ්ලොක් පිරිසැලසුම් භාවිතා කිරීමට අවශ්‍ය වේ. නැතහොත් ප්‍රධාන අන්තර්ගත ප්‍රදේශය වෙනුවට පැති තීරුවක සිඟිති රූප පෙන්වීමට ඔබට අවශ්‍ය විය හැකිය.

ඔබේ තේරීම දැන් පුළුල් තිර අන්තර්ගතය (වගු) සහ පැති තීරුව හෝ පටු තිර අන්තර්ගතය (බෙදීම්) සඳහා වෙනස් සලකුණු ප්‍රතිදානය කිරීමයි - එයින් අදහස් වන්නේ ඔබ මෙය ක්‍රමලේඛිකව ගොඩනඟන්නේ නම් අන්තර්ගතය යන්නේ කොතැනටද යන්න පිළිබඳව ඔබේ සේවාදායකයේ පැති ස්ක්‍රිප්ට් දැන සිටිය යුතු බවයි. - නැතහොත් ඔබේ සේවාදායක පැත්තේ ස්ක්‍රිප්ට් ප්‍රතිදානය එකම සලකුණු කිරීමක් ඇත (මන්ද ඔබ මෙය තබන්නේ කොතැනද යන්න එය නොසලකයි) සහ විවිධ තත්වයන් සඳහා විවිධ CSS නීති භාවිතා කරන්න.

එබැවින්, ඔබට සෑම විටම වගු ප්‍රතිදානය කිරීමේ තේරීමක් ඇත, ඉන්පසු ස්වාභාවික වගු සංදර්ශන නීති බ්ලොක් සමඟ අභිබවා යාම (ඕනෑම සංවර්ධකයින්ගේ හිසෙහි සමහර ගියර් ඇඹරීමට අවශ්‍යය), හෝ මෝස්තරයට වඩාත් නම්‍යශීලී ප්‍රවේශයන් සඳහා ඉඩ සලසන හොඳින් ලේබල් කරන ලද ඩිවයිස් සමඟ යන්න.

හා වසර ගණනාවක් හොඳ පුරුදු දැන් වත්මන් tabular දත්ත අවශ්ය නොවන විට වැලැක්විමට වගු වී ඇත.

ළිඳත්, එන්ජින් දර්ශණය කිරීමේ වගුව " පෙනී ඔබ තීරුව නිමියෙන්ම සිංහල සඳහා ප්රතිශත භාවිතා කරන විට මන්දගාමී". එන්ජිමට අත්‍යවශ්‍යයෙන්ම සම්පූර්ණ දත්ත කට්ටලයම බාගත කළ යුතු අතර එය තිරය මත ඇඳීම සඳහා සෑම දෙයක්ම කොතරම් විශාලදැයි සොයා ගැනීමට පටන් ගනී.

DIV එන්ජිම වෙනස් විය. බ්‍රව්සරයට ඩීඅයිවී එකක් හමු වූ විට එය ඉදිරියට ගොස් එය ස්ථානගත කර අන්තර්ගතය පේළියේ පුරවන්නට පටන් ගනී. ඇත්ත වශයෙන්ම, දත්ත පැටවීම අවසන් වූ විට div හි පැනීම සිදුවිය හැකිය. එබැවින් මා ඉහත උපුටා දැක්වීම්වල පෙනී සිටියේ ඇයි. දෙකම සම්පූර්ණ කිරීමේ කාල රාමුව එක හා සමාන විය, කෙසේ වෙතත් අවසානය දක්වා වගු අඳින්නේ නැත, එයින් අදහස් කරන්නේ එය පැටවීම හෝ තත්පරයක් හෝ දෙකක් සඳහා පරිශීලකයාට විශ්වාස නැති බවයි.

මේස කූඩු කර තිබීම නිසා මෙය වඩාත් නරක අතට හැරුණි.

FAR FAR වගු විදැහුම්කරණය වේගවත් කිරීමට එකල (සහ තවමත් පවතී) ක්‍රම තිබුණි. මූලික වශයෙන් තීරු ප්‍රමාණයන් වෙනස් නොවන බවට ඉඟියක් ලබා දීමෙන් බ්‍රව්සරය වහාම වගු දත්ත විදහා දැක්වීමට පටන් ගනී. වගු ඇත්තටම නිවැරදි තත්ත්වය තුළ ප්රදර්ශනය කළ හැකි අවසානයේ මෙම අදහස් වේගවත් divs ඔවුන්ට වඩාත් හොඳින් වීමේ පෙනුමක් ලබා වඩා.

නමුත් එය සම්පූර්ණ කතාව නොවේ. ඉතිරි කොටස නම්, බොහෝ දේව්වරු මෙය දැන ගැනීමට තරම් ඔවුන්ගේ ශිල්ප ඉගෙන ගැනීමට කරදර නොවීමයි. ඒ වෙනුවට ඔවුන් විවිධ බෑන්ඩ්වැගන් මතට පැන ඔවුන්ට පිටපත් කිරීමට / ඇලවීමට හැකි ඕනෑම කේතයක් සමඟ යති. අද පවා මට පෙනී යන්නේ වෙබ් අඩවි සංවර්ධකයින් ඉතා සුළු පිරිසක් එක් ඩොක්ටයිපයක සිට තවත් එකක් දක්වා ඇති වෙනස දන්නා අතර - විවිධ වෙබ් අඩවි වලට විවිධ බ්‍රව්සර් ආවරණය කිරීම සඳහා සියලු ආකාරයේ ක්‍රියාමාර්ග තිබීමට අංක එකේ හේතුව එයයි.

එබැවින්, ප්‍රශ්නය ඇසීම සඳහා +1 ඔබට.

මට මෙහි ටිකක් "මෙටා" ලබා ගත හැකි නම්, මෙය මගේ මනසට ගැටළු දෙකක් ගෙන එයි:

එකක්: කවුරුහරි යම් හොඳ හේතුවක් නිසා රීතියක් යෝජනා කරන අතර, ආත්මය නොසලකා හරිමින් නීතියේ තාක්ෂණික අකුර අනුගමනය කිරීමෙන් මිනිසුන්ට එය සම්පූර්ණයෙන්ම මග හැරේ. රීතිය වැළැක්වීමට උත්සාහ කළ සියලු නරක දේ ඉටු කිරීමට ඔවුන් යම් ක්‍රමයක් සොයාගනී.

දෙක: කවුරුහරි ගැටලුවක් දකින අතර එය වැළැක්වීම සඳහා රීතියක් යෝජනා කරයි. තවත් සමහරු මෙම නීතියේ වටිනාකම දකිති. එවිට ඔවුන් මෙම රීතියට අන්ධ භක්තියක් ඉල්ලා සිටින්නේ එය විසඳිය යුතු යැයි සිතූ මුල් ගැටලුව සහ / හෝ එය නිර්මාණය කරන වෙනත් ගැටළු නොසලකා ය. මම බොහෝ සංවාදයන් පවත්වා ඇති අතර, "ඔබ X කළ යුත්තේ එයයි." මම ඔයාට කිව්වා! මොකද ඒක නීතිය! ” මම පිළිතුරු දෙමි, "නමුත් එය විසඳීමට වඩා ගැටලු ඇති කරන බවක් පෙනේ. මම හිතන්නේ අපි Y කිරීමට වඩා හොඳ වනු ඇත." එවිට පුද්ගලයා පවසයි, "නෑ, බලන්න, මම ඔබට පෙන්වන්නම්. බලන්න, එය මේ පොතේම තිබේ. X යනු රීතියයි."

මෙම අවස්ථාවේදී, අපට ගැටළුවක් ඇත: වගු ටැගය කාරණා දෙකක් කරයි: එකක්, එය ලේඛනයේ පිරිසැලසුම පාලනය කරයි. දෙක, සංවෘත දත්ත පේළි හා අංකවල තීරු හෝ වෙනත් දත්ත වලින් සෑදී ඇති බවට අදහස ගෙන එයි.

බොහෝ අය විසඳුම යෝජනා කළහ: තර්කානුකූලව "වගු" නොවන දේවල් පිරිසැලසුම පාලනය කිරීමට වගු ටැග් භාවිතා නොකරන්න. CSS භාවිතා කරන්න.

නමුත් මෙම විසඳුම සමඟ ගැටළුවක් ඇත. වගු ටැගය සහ එහි උප ටැග් මඟින් CSS භාවිතා කර පහසුවෙන් ළඟා කරගත නොහැකි ඉතා ප්‍රයෝජනවත් පිරිසැලසුම් කාර්යයන් සිදු කරන අතර ඒවා සාක්ෂාත් කරගත හැකි විට එය කිරීමට අවශ්‍ය කේතය බොහෝ විට කරදරකාරී වේ - කියවීමට අපහසු සහ නඩත්තු කිරීමට අපහසුය. පිරිසිදු, පහසු ක්‍රමයක් ඇති විට අප කරදරකාරී, දුෂ්කර ආකාරයකින් දේවල් කළ යුත්තේ ඇයි?

පුද්ගලිකව, මම සිතන්නේ, “යමක් වගු ටැගයක් තුළ තිබීම ඇත්ත වශයෙන්ම එයින් පේළි සහ සංඛ්‍යා තීරු නිරූපණය වන බවක් නොවේ.” මෙය අතිශය දරුණු ප්‍රකාශයක් නොවනු ඇත. "P" ටැගය භාවිතා කළ හැක්කේ ව්‍යාකරණ-නිවැරදි, තර්කානුකූලව සාදන ලද ඉංග්‍රීසි වාක්‍යවල ඡේද සඳහා පමණක් යැයි කිසිවෙකු පැවසීම මා අසා නැත. ලැයිස්තුවක් සඳහා "උල්" ටැගයක් භාවිතා කිරීම වැරදියි කියා කිසිවෙකු මා අසා නැත, ඇත්ත වශයෙන්ම, තාර්කික අනුපිළිවෙලකට පැමිණෙන්නේ ඔබට උණ්ඩ අවශ්‍ය වූ නිසා මිස අනුක්‍රමික අංක නොවේ. ආදිය.

මෙහි දැනටමත් විශිෂ්ට පිළිතුරු ටොන් ගණනක් ඇත. නමුත් මට අවශ්‍ය වූයේ tableමූලද්‍රව්‍ය සඳහා විදැහුම්කරණ සීමාවන් ඇති බවයි div. අතථ්‍ය අනුචලනය කරන වගුවක් උත්සාහ කරන්න (වැනි: SlickGrid , DataTables , සහ වෙනත්) එවිට ඔබ දැඩි ලෙස කලකිරීමට පත් වනු ඇත. එය ක්‍රියා නොකරයි. බොහෝ (සියල්ල?) නූතන ජාවාස්ක්‍රිප්ට් ජාලක භාවිතා divකරන්නේ සීඑස්එස් වඩාත් නම්‍යශීලී විදැහුම්කරණයට ඉඩ සලසන බැවිනි.

වෙනත් සීමාවන් ද තිබේ. මගේ සාමාන්‍ය රීතිය නම්, මම මුළු tableවගුවම එකම තිරයකින් බැලීමට යන්නේ නම් සහ ඒ සඳහා කිසිදු / වැඩි අභිරුචි විදැහුමක් අවශ්‍ය නොවන්නේ නම් මම මූලද්‍රව්‍යයක් භාවිතා කරමි , එසේ නොමැතිනම් ප්‍රති div ල බොහෝ දුරට පාලනය කළ හැකි නිසා මම ඩිවිස් සමඟ යන්නෙමි. , වඩාත් පහසුවෙන්.

HTML සහ CSS යම් තරමක නම්‍යතාවයක් ඇති කර ඇති අතර එයින් අදහස් කරන්නේ <div>(HTML හි පැරණිතම හා වඩාත් පොදු බ්ලොක් අන්තර්ගතය) වැනි සංකල්පමය වශයෙන් "අවහිර" අංග පවා බ්ලොක් ලෙස පෙන්වීමට අවශ්‍ය නොවන බවයි:

div { display: inline; }

ඔබ සටහන් කර ඇති පරිදි, <div>අනුකරණය කිරීමට <table>සහ එහි සෙසු සංචාරකයින්ට නැවත ප්‍රතිනිර්මාණය කළ හැකිය . ඇත්ත වශයෙන්ම, බොහෝ ටැග් වලට හැකිය. ඔවුන්ගේ විශේෂ චරිත සලකන විට, මම ඔයා වගේ විමසිය remap සාර්ව ටැග් හැකි සැක <html>, <head>, <body>, හා <script>, නමුත් "පොදු" ටැග් වැනි <div>, <p>, <b>, <em>, <span>, හා <pre>? උදුරා ගැනීම සඳහා ඉහළට. පේළිගත කිරීමේ ටැග් බ්ලොක් කරන්න, බ්ලොක් ඉන්ලයින්, පෙර හැඩතල ගැන්වූ ටැග්ස් ගලායන්න, ස්ථිතික ඒවා පාවෙන්න. පිස්සු යන්න, ඔබ කැමති නම්!

එය කළ හැකි ය . අප සියල්ලන්ම "අර්ථකථන සලකුණු" බ්ල් බ්ලා බ්ලා භාවිතා කළ යුතු ආකාරය ගැන නූල් කරකැවීමට ඔබට අවශ්‍ය විය හැකිය , නැතහොත් පයිතොනිස්ටා සමඟ විශ්වාස කරන්න "එකක් තිබිය යුතු අතර ඊට වඩා එක් පැහැදිලි ක්‍රමයක් තිබිය යුතුය." එහෙත් ටිම් ටෝඩි දක්ෂ හා කුතුහලයෙන් පිරි අයෙකි . නිදහස් අතක් දී, ඔහු ඒ සියල්ල ගවේෂණය කරයි. ආදේශක සෑදීම සඳහා පවතින නම්‍යශීලී බව භාවිතා කිරීම ඊට ඇතුළත් ය. සමහරු wise ානවන්ත ය, සමහරක් වෙනත් ආකාරයකින් ඔප්පු වනු ඇත. නමුත් එය සොයා ගැනීමට ඇති එකම ක්‍රමය අත්හදා බැලීම, දෝෂය සහ අත්දැකීම් ය. එබැවින් ආදේශනය සඳහා ප්රමාණවත් කොන්දේසි පවතී.

ආදේශනය ද අවශ්‍ය යැයි කීම ඕනෑවට වඩා යැයි මම නොසිතමි. අවම වශයෙන්, එය අතිශයින්ම පහසුය . දීර්ඝ කාලයක් තිස්සේ, HTML සිටියේ නැත <menu>, <section>හෝ <aside>අංග. සෑම තැනකම වෙබ් පිටු සහ යෙදුම්වල මෙනු, කොටස් සහ පැති තීරු ඇත. කොහොමද? HTML ලැයිස්තු මූලද්‍රව්‍ය ( <ul>, <ol>සහ <li>) පහසුවෙන් ප්‍රතිනිර්මාණය කර ඇති අතර සමහර භාවිතයන් මෙනු බහාලුම් සහ කොටස් ලෙස නැවත වර්ගීකරණය කර ඇත. <div>සඳහා ඉදිරිපත් විය හැකි <article>, <section>, <aside>, <figure>, සහ <summary>. HTML5 මීට පෙර අවධානයට ලක් නොකළ භාවිත අවස්ථා සඳහා බෙස්පෝක් අංග එකතු කර ඇත. පොදු, තථ්‍ය-ලෝක භාවිතයට ඉඩ සැලසීමට එය හොඳ යාවත්කාලීන කිරීමක් සහ නිවැරදි කිරීමකි.

එසේ වුවද, බෙස්පෝක් ටැග් හෝ අර්ථකථන ආකෘති නොමැති පොදු මෝඩයන් බොහොමයක් පවතී . පිටු සහ පාද සටහන්, අදින්න-උපුටා දැක්වීම්, අදහස් දැක්වීම්, ආශ්‍රිත අවතාර, "කැමති," උප සිරැසි, සහ මම සහ තවත් බොහෝ අය දිනපතා භාවිතා කරන උපසිරැසි වැනි දේවල්. අප කුමක් කළ යුතුද? අපට කළ හැකි දේ. HTML6 හෝ HTML7 ලබා ගන්නා තෙක් ඉදිරි වසර පහ හෝ දහය හෝ කොපමණ වසරක් සඳහා අපගේ වැඩ කටයුතු සඳහා සහයෝගය දැක්වීමට පන්ති සහ අයිඩී සමඟ "සමීප නමුත් නිරවද්‍ය" අංග නැවත ප්‍රතිනිර්මාණය කරන්න. HTML / CSS හි "ඔව්, එය එක්ස්, න්‍යායිකව, නමුත් අපි එය ටැග් කර එය Y ලෙස වැඩ කරන්නෙමු" හැකියාව ඇදහිය නොහැකි තරම් පහසුය. අත්‍යවශ්‍යයි, ඇත්තටම. එමඟින් වෙබ් අන්තර්ගතය නම්‍යශීලී වන අතර අස්ථාවර නොවේ.

ඊටත් වඩා ඉදිරියට යන විට, "අර්ථකථන සලකුණු කිරීම" හට ආපසු හැරවිය නොහැකි සීමාවන් ඇත. අන්තර්ගතය සඳහා ඔබට සිතාගත හැකි ඕනෑම ආකාරයක දැඩි ව්‍යුහයක් සම්බන්ධයෙන් එය සත්‍යයකි.

සම්මත ආකෘතීන්ට මිනිස් අවශ්‍යතා, ආශාව සහ විවිධත්වයේ සමස්ත ධනයම ඇතුළත් කළ නොහැක. ඔවුන් හැම විටම ජනතාව කරන්නේ මොකද? "වක්රය" පිටුපස කළ යුතුයි දැන් . ඔවුන් නව්‍යකරණය කරන්නේ කෙසේද. හෙක්, HTML5 තවමත් 17 වන සියවසේ පාද සටහන්, උප ශීර්ෂ සහ වෙනත් මුද්‍රණ නවෝත්පාදන වල වක්‍රය පිටුපසින් සිටී. බොහෝ තොරතුරු කම්කරුවන්ට සහ අන්තර්ගත නිර්මාණකරුවන්ට අත්‍යවශ්‍ය අංග එහි නොමැත. එබැවින් අපි දියුණු වෙමු.

ඊටත් වඩා වෙනස් නොවන දෙය නම් තොරතුරු එක් නීති මාලාවක් අනුගමනය නොකිරීමයි. ෂුවර්, එය මේසයක් ලෙස ආරම්භ වේ. නමුත් සමහර විට ඔබට සාරාංශය අවශ්‍ය විය හැකිය - එක් එක් පේළිය සඳහා මාතෘකාව ලැයිස්තුවක් ලෙස පවසන්න. සමහර විට එය වැඩි ඉඩ ප්‍රමාණයක් ගත හැකි අතර, ඔබ එය අවකාශය ඉතිරි කරන පේළිගත ලැයිස්තුවක් ලෙස කැමති වනු ඇත. සමහරවිට ඔබට මාතෘකාවක් අවශ්‍ය වාර්තා තිබේ නම්, ඔබ ක්ලික් කළහොත්, ඔබට යටින් ඇති තොරතුරු පෙනේ. නැතහොත් සංකීර්ණ ලැයිස්තුවක හෝ වගුවක ඇති අයිතම කාණ්ඩගත කර වර්ගීකරණය කිරීමට ඔබට අවශ්‍යය. ඔහ්, දැන් ඔබට එය මාරු කර වෙනත් ආකාරයකින් වර්ගීකරණය කිරීමට අවශ්‍යයි. නැතහොත් තීරු ප්‍රස්ථාරයක් ලෙස සැකසූ අගයන්. යෙදුම්, පැතුරුම්පත් සහ දත්ත දෘශ්‍යකරණය තුළ සෑම දිනකම මේවා සිදු වේ. ඒවා අපගේ තොරතුරු භූ දර්ශනයේ කොටසක් සහ කොටසක් වන අතර වෙබයේ අපට අවශ්‍ය හා කළ යුතු දේ. අපගේ දත්තවල ස්වරූපය සහ ඉදිරිපත් කිරීම මිනිසුන් නිරන්තරයෙන් ප්‍රතිසංවිධානය කරයි. එය එක් දෙයක් හෝ එක් ආකෘතියක් / පිරිසැලසුමක් පමණක් නොවේ හෝ එක් සංකල්පයක්. එය දිලීර, අර්ථය අනුව තත්වය සහ පරිශීලකයින් අන්තර්ක්‍රියාකාරීව කරන තේරීම් මත පදනම්ව. ඔව්, පෙළ "අවධාරණය" ලෙස සලකුණු කරන්න (<em>), නමුත් එය සමුළුවක් පමණයි. මම අවම වශයෙන් දුසිම් භාගයක්වත් විවිධාකාර “අවධාරණයන්” සහිත ලේඛනවල වැඩ කර ඇත්තෙමි. අපි අවශ්ය විවිධ භාවිතයන්, විවිධ අර්ථ නිරූපණයන් සඳහා බව අභිරුචිකරණය remap කිරීමට හැකි විය. එක් ආකාරයක HTML අවධාරණය? අතිශයින්ම අඩු කිරීම. සීමා කිරීම. බිඳෙන සුළුය. ඒ සඳහා සැබෑ ය <table>, <p>යනාදිය

"කොතැනට යන්නේද" යන්න පිළිබඳව සමස්ත ප්‍රජාවගේම චින්තනය සංවිධානය කිරීමට උපකාරී වන ටැග් / අංග තිබීම සතුටක්. එය සම්මුතීන් සහ මුග්ධයන් ස්ථාපිත කිරීමට උපකාරී වන අතර සාමූහිකව වඩාත් කාර්යක්ෂම කරයි. නමුත් දේවල් නැවත සකස් කිරීමට, එම ව්‍යුහයන් නැවත සැලසුම් කිරීමට හා නැවත නිර්මාණය කිරීමට ඇති හැකියාව? එය වෙබයේ ඇතුළත් වීමේ සහ එහි සාර්ථකත්වයේ කොටසකි.

නඩු කාරණා භාවිතා කරන්න. අන්තර්ගත පිටුවක සහ යෙදුමක පිරිසැලසුම / ඉදිරිපත් කිරීම අතර විශාල වෙනසක් ඇත. අන්තර්ගතය තුළ, අර්ථ නිරූපණයන් SEO- දැනුවත්භාවය සහ භාවිතයට විශාල වශයෙන් වැදගත් වේ. මෙම අවස්ථා වලදී, වගු දත්ත ඉදිරිපත් කිරීම සඳහා වගු භාවිතා කිරීම සාමාන්‍යයෙන් කළ යුතු නිවැරදි දෙයයි. අනෙක් අය සඳහන් කර ඇති පරිදි, සෙවුම් යන්ත්‍ර මඟින් ඔබට ද ize ුවම් කරනු ඇති අතර, රජයේ භාවිතයට අදාළ මාර්ගෝපදේශයන්ට අනුකූල වීම සඳහා ඔබට ප්‍ර ute ප්තියක් අවශ්‍ය නම්, ඔබ භාවිත කිරීමේ නීති නොසලකා හැරිය හැකිය.

වෙබ් යෙදුමක දී, සංවර්ධකයින්ට SEO සහ භාවිතාව සඳහා සම්පූර්ණයෙන්ම වෙනම අදහස් නිර්මාණය කිරීමට තෝරා ගත හැකිය. ප්‍රතිචාරාත්මක සැලසුම මඟින් ඩෙස්ක්ටොප් සහ ජංගම පිරිසැලසුම් හැසිරවිය හැකි අදහස් ගොඩනඟා ගැනීමට මිනිසුන් පෙළඹී ඇති අතර, එම අවස්ථා වලදී වගු වලට වඩා බෙදීම් වඩා හොඳය.

උදාහරණයක් ලෙස ඊ-වාණිජ්‍යය අඩවි ගන්න. බ්‍රවුස් හෝ සෙවුම් ප්‍රති result ලයකින් නිෂ්පාදන ලැයිස්තුවක් බැලීම, සාමාන්‍යයෙන්, ටැබුලර් ආකෘතියෙන් නිෂ්පාදන ලැයිස්තුවක් පෙන්වයි, නමුත් එම අදහස් වගු වලට වඩා බෙදීම් (වඩාත් ජනක හා නම්‍යශීලී පිරිසැලසුම් සහ මෝස්තර විකල්පයන් සපයන) භාවිතා කරමින් ජනනය කළ හැකිය. ඇමේසන් සහ ඊබේ මෙම ප්‍රවේශයට හොඳ උදාහරණ වේ. ඕනෑම වෙබ් අඩවියක සෙවුම් ප්‍රති result ලයක් පරීක්ෂා කර බලන්න.