লোকেরা ডিভ দিয়ে টেবিল তৈরি করছে কেন?


269

আধুনিক ওয়েব বিকাশে আমি আরও প্রায়ই এই প্যাটার্নটি জুড়ে আসছি। দেখে মনে হচ্ছে:

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

এবং সিএসএসে এরকম কিছু রয়েছে:

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

* (শ্রেণীর নাম কেবল চিত্রণযোগ্য; বাস্তব জীবনে এগুলি সাধারণ শ্রেণীর নাম যা উপাদানটি সম্পর্কে প্রতিফলিত করে)

এমনকি আমি নিজেও সম্প্রতি এটি করার চেষ্টা করেছি কারণ ... আপনি জানেন, সবাই এটি করছে।

তবে আমি এখনও এটি পাই না। কেন আমরা এই করছেন? আপনার যদি কোনও টেবিলের প্রয়োজন হয়, তবে কেবল একটি বিস্ফোরণ তৈরি করুন <table>এবং এটি দিয়ে সম্পন্ন করুন। হ্যাঁ, এটি লেআউটের জন্য হলেও। টেবিলগুলি সেগুলির জন্য - টেবুলার ফ্যাশনে স্টাফ আউট করা।

আমার কাছে সর্বোত্তম ব্যাখ্যাটি হ'ল এখন অবধি সবাই "লেআউটের জন্য টেবিল ব্যবহার করবেন না" মন্ত্রটি শুনেছেন, তাই তারা এটিকে অন্ধভাবে অনুসরণ করেন। কিন্তু তারা এখনও প্রয়োজন লেআউট জন্য একটি টেবিল (কারণ অন্য কিছুই একটি টেবিলের বিস্তৃত ক্ষমতা আছে), তাই তারা একটি করতে <div>(এটা কারণ না একটা টেবিল!) এবং তারপর সিএসএস এটা তোলে একটি টেবিল যাহাই হউক না কেন যোগ করুন।

সমস্ত বিশ্বের কাছে আমার কাছে মনে হচ্ছে আপনার পথে স্বেচ্ছাচারী অপ্রয়োজনীয় বাধা দেওয়া এবং তারপরে এড়াতে অতিরিক্ত কাজ করা।

বিন্যাসের জন্য সারণীগুলি থেকে সরে আসার মূল যুক্তিটি হ'ল পরে কোনও সারণী বিন্যাসটি সংশোধন করা শক্ত hard তবে "ভুল-টেবিল" বিন্যাসটি সংশোধন করা ঠিক ততটাই শক্ত এবং একই কারণে। প্রকৃতপক্ষে, অনুশীলনে লেআউটকে সংশোধন করা সবসময়ই শক্ত এবং আপনি যদি ছোটখাট টুইটগুলির চেয়ে আরও গুরুতর কিছু করতে চান তবে কেবল সিএসএস পরিবর্তন করার পক্ষে এটি যথেষ্ট নয়। আপনি হবে বুঝতে এবং গুরুতর নকশা পরিবর্তনের জন্য এইচটিএমএল স্ট্রাকচার পরিবর্তন করতে হবে। এবং সারণীগুলি ডিভের চেয়ে কাজটিকে আরও শক্ত বা সহজ করে না।

বস্তুত, একমাত্র উপায় আমি দেখতে টেবিল একটি লেআউট পরিবর্তন করতে কঠিন, বানাতে পারে যে আপনি যদি হয় এবি তাদের ব্যবহার করা হয় এবং একটি ধর্মবিরোধী জগাখিচুড়ি সৃষ্টি করেছেন। আপনি ডিভগুলি দিয়ে এটিও করতে পারেন।

সুতরাং ... একটি অভিজাত থেকে এটি একটি সুসংগত প্রশ্নে পরিবর্তনের প্রয়াসে: আমি কী অনুপস্থিত? সত্যিকারের চেয়ে "ভুল-টেবিল" ব্যবহারের আসল সুবিধাগুলি কী কী ?

সদৃশ লিঙ্কটি সম্পর্কে: এটি অন্য কোনও ট্যাগ বা কিছু ব্যবহার করার পরামর্শ নয়। এই ব্যবহার সম্পর্কে একটি প্রশ্ন <table>বনাম display:table


6
@ জুহান্টিনেন: এটি ... অসম্ভব বলে মনে হচ্ছে। উৎস?
পল ডি ওয়েট

5
@ পলডি.ওয়েট - এটি আজও সত্য I অন্যান্য উত্তর পড়ুন। টেবিলটি table-layout:fixedনা থাকলে এটি প্রদর্শিত হওয়ার আগে এটি পুরোপুরি লোড করা দরকার। আধুনিক ব্রডব্যান্ডের সাথে এই প্রভাবটি কম কম লক্ষ করা যায়।
ভিলেক্স-

4
@ জুহান্টিনেন: এটি সম্পূর্ণ সঠিক নয়। আপনি কলাম প্রস্থের জন্য শতাংশ ব্যবহার করার সময় টেবিল রেন্ডারিং ইঞ্জিনটি ধীর ছিল কারণ ব্রাউজারটি সবকিছু কীভাবে তৈরি করতে পারে তা নির্ধারণের আগে পুরো টেবিলটি ডাউনলোড করতে হয়েছিল। এটি নেস্টেড টেবিলগুলি দ্বারা জটিল ছিল। তবে, এফআর ফার আরও দ্রুত টেবিল রেন্ডারিংয়ের তখন (এবং এখনও বিদ্যমান) উপায় রয়েছে। খুব কম সংখ্যক দেবই তাদের কারুকাজটি যথেষ্ট পরিমাণে শিখতে এবং পরিবর্তে ব্যান্ডওয়্যাগনে ঝাঁপিয়ে পড়তে বিরক্ত করেন।
নোটম

4
এমনকি পুরানো দিনগুলিতে আমরা সেখানে টেবিলগুলির সাথে ডিভগুলি নকল করতাম।
ওয়াট বার্নেট

4
কেউ পড়েছেন যে তাদের বিন্যাসের জন্য টেবিলগুলি ব্যবহার করার কথা ছিল না এবং এটি গ্রহণ করে যে তারা টেবিলগুলি ব্যবহার করার কথা নয়। আমি এই প্রবণতা ঘৃণা করি।
কেসি

উত্তর:


120

প্রতিক্রিয়াশীল সারণী তৈরির জন্য এটি একটি সাধারণ প্যাটার্ন। ট্যাবুলার ডেটা মোবাইলগুলিতে প্রদর্শন করানো কঠিন কারণ যেহেতু পৃষ্ঠাটি পাঠ্যটি পড়তে জুম করা হবে, অর্থ টেবিলগুলি পৃষ্ঠার পাশের দিকে চলে যাবে এবং ব্যবহারকারীকে টেবিলটি পড়তে পিছনে এবং ফরোয়ার্ডে স্ক্রোল করতে হবে, বা পৃষ্ঠাটি জুম আউট হবে will , সাধারণত অর্থ হ'ল টেবিলটি পড়তে সক্ষম হওয়ায় খুব ছোট।

প্রতিক্রিয়াশীল টেবিলগুলি ছোট স্ক্রিনে লেআউট পরিবর্তন করে - কখনও কখনও কিছু কলাম লুকানো থাকে বা কলামগুলি একত্রিত হয়, উদাহরণস্বরূপ নাম এবং ইমেল ঠিকানা বড় স্ক্রিনে পৃথক হতে পারে তবে ছোট পর্দার একটি কক্ষে বিচ্ছিন্ন হয়ে পড়ে যাতে তথ্য স্ক্রোল না করেই পঠনযোগ্য।

<div>গুলি বেশ <table>কয়েকটি কারণে ট্যাগের পরিবর্তে টেবিলগুলি তৈরি করতে ব্যবহৃত হয় । যদি <table>ট্যাগগুলি ব্যবহার করা হয় তবে আপনার নিজের কোড যুক্ত করার আগে আপনাকে ব্রাউজারের ডিফল্ট শৈলী এবং লেআউটটিকে ওভাররাইড করতে হবে, সুতরাং এই ক্ষেত্রে <div>ট্যাগগুলি প্রচুর বয়লারপ্লেট সিএসএসে সংরক্ষণ করে। অতিরিক্তভাবে, IE এর পুরানো সংস্করণগুলি আপনাকে ডিফল্ট টেবিল শৈলীর ওভাররাইড করতে দেয় না, সুতরাং এর ব্যবহার <div>ক্রস ব্রাউজারের বিকাশকে মসৃণ করে।

সিএসএস-ট্রিকসে প্রতিক্রিয়াশীল টেবিলগুলির একটি দুর্দান্ত ভাল ওভারভিউ রয়েছে

সম্পাদনা: আমার উল্লেখ করা উচিত যে আমি এই প্যাটার্নটির পক্ষে পরামর্শ দিচ্ছি না - এটি ডিভায়াইটিসের জালে পড়ে এবং শব্দার্থক নয় - তবে এই কারণেই আপনি divএস থেকে তৈরি টেবিলগুলি খুঁজে পাবেন ।


6
আমি এই উত্তরটি গ্রহণ করছি কারণ মনে হচ্ছে যে দরকারী আর কিছুই আসেনি। উচ্চ-ভোটযুক্ত উত্তর রয়েছে তবে তারা মূলত "কারণ শব্দার্থবিজ্ঞান" বলে (এবং শব্দার্থবিজ্ঞানের একমাত্র কারণ যা তারা সরবরাহ করতে পারে তা হল পর্দার পাঠক, যা আমাকে বিশ্বাস করে না)। @ হুরাসকোলের উত্তরে আপনার আগে প্রতিক্রিয়ার কথা উল্লেখ করা হয়েছে, তবে আপনার বক্তব্য আরও বেশি। যদি ভবিষ্যতে আরও ভাল উত্তর উপস্থিত হয়, আমি এটিকে গ্রহণযোগ্য উত্তর হিসাবে পরিবর্তন করব।
ভিলক্স-

5
এটি হাস্যকর এবং অলস। আপনি <div>"টেবিলগুলি" দিয়ে যা কিছু করছেন সম্ভবত নিয়মিতগুলি দিয়েই সম্পন্ন হতে পারে, সুতরাং টেবিলগুলি তৈরির জন্য শব্দার্থবিজ্ঞানের উপাদানগুলি ব্যবহার করার জন্য আক্ষরিক কোনও কারণ নেই (পুরানো IE সংস্করণ এবং অলসতা বাদে)। এটি বলেছিল যে, প্রকৃত ট্যাবুলার ডেটা ইন্টারনেটে বিরল বলে মনে হচ্ছে তাই এটি সম্ভবত একটি নন-ইস্যু।
আপনি

1
@ ভিলাক্স: আপনি যে প্রশ্নটি উত্থাপন করেছেন তা হ'ল " লোকেরা ডিভগুলি দিয়ে টেবিল তৈরি করছে কেন ", যার উত্তর আপনি পাচ্ছেন। উদাহরণস্বরূপ আপনি পর্দার পাঠকদের জন্য যত্ন নিতে পারেন না, তবে এটি যে পরিবর্তন করে না যে অ্যাক্সেসযোগ্যতা অনেকের জন্যই সত্য উদ্বেগ, এবং (অনুসন্ধান ইঞ্জিনের সাথে একসাথে) বহু লোক সিম্যানেটিক এইচটিএমএল বেছে নেওয়ার প্রধান কারণ।
জ্যাকবিবি

13
সমস্ত উদ্দেশ্য এবং উদ্দেশ্যগুলির জন্য, এটি সাধারণভাবে ভুল। যদি আপনার ডেটা সারণী হয়, এটি একটি টেবিলের মধ্যে যায়। মোবাইল ডিভাইসে টেবিলগুলি বিশেষত খারাপ আচরণ করে এমন দাবি করা BS। আপনি টেবিল উপাদানগুলির প্রদর্শন বৈশিষ্ট্যগুলি সহজেই নন-টেবিলের মান হিসাবে পরিবর্তন করতে পারেন আপনি নন-টেবিল উপাদানগুলির টেবিলের মান থাকতে পারেন।
cimmanon

8
আমি বিশ্বাস করি এই উত্তরটি কিছুটা বিভ্রান্তিকর। প্রতিক্রিয়াশীল সারণীগুলি ভাল ডিজাইন, তবে যদি আপনার <টেবিল> বা <ডিভি> ব্যবহার করা উচিত তবে এটি প্রশ্নের থেকে পৃথক - আপনি একই ভিজ্যুয়াল এফেক্টটি ব্যবহার করতে পারেন। প্রকৃতপক্ষে, এটি কাঠামো এবং উপস্থাপনা পৃথক করার ধারণা মূল। এটি সত্য যে আই এর পুরানো সংস্করণগুলি টেবিলের স্টাইলকে ওভাররাইড করার অনুমতি দেয়নি, তবে আইই এর পুরানো সংস্করণগুলি প্রদর্শনটি সমর্থন করে না: সারণী, সুতরাং আপনি কোনওভাবেই প্রতিক্রিয়াশীল টেবিলগুলি ব্যবহার করতে পারবেন না।
জ্যাকবিবি

153

প্রশ্নটি যদি ডেটা শব্দার্থগতভাবে একটি টেবিল হয় (যেমন তথ্যগুলির একটি সেট বা তথ্যের এককগুলি যৌক্তিকভাবে দুটি মাত্রায় সংগঠিত হয়) বা আপনি কেবল ভিজ্যুয়াল বিন্যাসের জন্য গ্রিড ব্যবহার করেন, যেমন আপনি একটি সাইডবারটি প্রসারিত করতে চান বা এর মতো কিছু।

যদি আপনার তথ্যগুলি শব্দার্থতভাবে একটি টেবিল হয় তবে আপনি একটি- <table>ট্যাগ ব্যবহার করুন । আপনি যদি বিন্যাসের উদ্দেশ্যে কেবল গ্রিড চান তবে আপনি অন্য কিছু উপযুক্ত এইচটিএমএল উপাদান ব্যবহার করুন display:tableএবং স্টাইল শীটে ব্যবহার করুন ।

শব্দগুলি যখন শব্দার্থে একটি টেবিল হয়? যখন ডেটা যৌক্তিকভাবে দুটি অক্ষ বরাবর সংগঠিত হয়। যদি এটি সারি বা কলামগুলির জন্য শিরোনামগুলির সাথে অর্থ দেয় তবে আপনার কাছে শব্দার্থ সারণী থাকতে পারে। অর্থহীনভাবে কোনও টেবিল কোনও সংবাদপত্রের মতো কলামগুলিতে একটি পাঠ্য উপস্থাপন করছে mant এটি শব্দার্থগতভাবে কোনও টেবিল নয়, যেহেতু আপনি এখনও এটি রৈখিকভাবে পড়তে পারবেন এবং উপস্থাপনাটি সরানো থাকলে কোনও অর্থ হারাবে না।


ঠিক আছে, কেন<table> কেবল কিছু অর্থের জন্য ব্যবহার না করে যা শব্দার্থগতভাবে একটি টেবিল? দৃশ্যত এটি স্পষ্টতই একই (যেহেতু টেবিলের উপাদানটি কেবলমাত্র display:elementডিফল্ট শৈলীতে রয়েছে)।

পার্থক্যটি হ'ল শব্দার্থক তথ্য বিকল্প ব্যবহারকারী এজেন্টদের সহায়তা করতে পারে। উদাহরণস্বরূপ, কোনও স্ক্রিন রিডার আপনাকে টেবিলে দুটি মাত্রায় নেভিগেট করার অনুমতি দিতে পারে এবং আপনি কোথায় আছেন তা ভুলে গেলে উভয় অক্ষের জন্য একটি সেলের শিরোনাম পড়তে পারে। এটি কেবল বিভ্রান্ত হবে যদি টেবিলটি শব্দার্থগতভাবে কোনও টেবিল না হয়ে কেবল ভিজ্যুয়াল বিন্যাসের জন্য ব্যবহৃত হয়।

<table>বনাম display:tableআলোচনা শুধু শব্দার্থিক মার্কআপ ব্যবহার করে আরও সাধারণ নীতির ক্ষেত্রে দেখা যায়। উদাহরণস্বরূপ দেখুন: কেন কেউ সঠিকভাবে এবং শব্দার্থবিজ্ঞান চিহ্নিত করতে বিরক্ত করবে? অথবা অনুসন্ধান ইঞ্জিনগুলির জন্য কেন সিনটিক মার্কআপকে আরও বেশি ওজন দেওয়া হচ্ছে?

কিছু জায়গায় অ্যাক্সেসযোগ্যতার কারণে আপনার কাছে আইনত আইনসম্মতভাবে মার্কসআপ ব্যবহার করতে হবে এবং কোনও ক্ষেত্রে উদ্দেশ্যমূলকভাবে আপনার পৃষ্ঠাকে কম অ্যাক্সেসযোগ্য করার কোনও কারণ নেই।

এমনকি আপনি অক্ষম ব্যবহারকারীদের জন্য যত্ন না নিলেও, সামগ্রী থেকে আলাদা উপস্থাপনা থাকা আপনাকে সুবিধা দেয়। যেমন আপনার তিনটি কলামের বিন্যাস বিকল্প স্টাইলশীটটি ব্যবহার করে কোনও একক কলামে মোবাইলে উপস্থাপন করা যেতে পারে।


14
@ ভিলক্স- কেন <em>এবং এর <strong>চেয়ে <b>এবং কেন ব্যবহার করবেন <i>? কারণ <b>এবং <i>ট্যাগের শব্দার্থবিজ্ঞানের বিষয়ে নয়। <table>হয়েছে শব্দার্থিক অর্থ। এমন কিছু বিষয় যা জন্য এটি ব্যবহার হয় না একটা টেবিল পাওয়া কঠিন হয়ে পড়ে নথির শব্দার্থিক মানে বুঝতে সহজ করে তোলে।

22
@ Vilx- The book <i>Peoplesoft</i> is the <em>best</em> book on the subject. ফেলে <i>প্রায় সেরা ভুল হবে যে কিছু চেয়ে ভিন্ন মানে কারণ <i>বইয়ের শিরোনাম প্রায়। আরও তথ্যের জন্য, দেখুন এবং ট্যাগগুলি হ্রাস করা হয়েছে কেন ? <b><i>এবং মধ্যে পার্থক্য কি <b>এবং <strong>, <i>এবং <em>?

19
আপনি যদি আপনার সামগ্রীর অর্থ কী তা বিবেচনা না করেন তবে আমি দৃ strongly়ভাবে আপনাকে ফর্ম এবং ডিভগুলি বাদ দিয়ে কোনও উপাদান ব্যবহার বন্ধ করার পরামর্শ দিচ্ছি। স্টাইলিং এবং আচরণ প্রয়োগের জন্য কেবল ক্লাস যুক্ত করুন।
ধনী Remer

9
@ ভিলাক্স-: আপনি যখন বলেন যে আপনি আপনার ব্যবহারকারীর অভিজ্ঞতার বিষয়ে চিন্তা করেন আপনি কেবলমাত্র আপনার ব্যবহারকারীর একটি উপসেটই বোঝায়। আপনি যেভাবে বর্ণনা করছেন ঠিকভাবে মার্কআপ ব্যবহারের মূল কারণ হ'ল অ্যাক্সেসিবিলিটি, যা সরাসরি অক্ষম ব্যবহারকারীদের ব্যবহারকারীর অভিজ্ঞতার সাথে সম্পর্কিত। এই লোকেরা আপনার পক্ষে সঠিক উপায়ে কাজ করে এবং এই সম্মেলনগুলিকে উপেক্ষা করার অর্থ সম্ভবত তাদের ওয়েব অভিজ্ঞতা আরও শক্ত করা means
রোবি

31
@ ভিলাক্স- হ্যাঁ, একটি স্ক্রিন রিডার <টেবিলকে <ডিভিড> থেকে খুব আলাদা আচরণ করে। <div> গুলি বেশিরভাগ উপেক্ষা করা হয় এবং ক্রমানুসারে পড়া হয়। একটি <টেবিলের অভ্যন্তরে এটি বিভিন্ন নেভিগেশন কীস্ট্রোক / কমান্ড সরবরাহ করতে পারে ("ডানদিকে ঘরে ঝাঁপুনি", "কলাম এবং সারি শিরোনাম পড়ুন", এবং এগুলি) এবং বিভিন্ন অবস্থানের তথ্য ভয়েস করে (যখন পাঠের স্ট্রিমটি একটি সারণিতে প্রবেশ করে) এটি "টেবিল 3, সারি 1 কলাম 1,
লরেম ইপসাম ডলোর

102

প্রকৃতপক্ষে, আমি বলব যে আপনার উদাহরণে "টেবিল" এর মতো শ্রেণীর নামের ব্যবহারটি বোঝায় যে শব্দার্থক মার্কআপের জন্য চেষ্টা করার সময় লোকেরা কীভাবে তারা কী করছে তা আসলে কীভাবে বোঝে না। সামগ্রীগুলি টেবুলার ডেটা নয় তা দেখানোর চেষ্টা করার জন্য তারা চিহ্ন পেয়েছে তবে খারাপ শ্রেণির নামের জন্য তারা চিহ্ন হারিয়েছে।

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

এই বিকাশকারী যা কিছু করেছে তা হ'ল <table>সিএসএস শ্রেণীর নামগুলির সাথে মূল মার্কআপটিকে প্রতিলিপি করা । এর অর্থ এই লেআউটটি কোনও টেবিল না হওয়ার সাথে সাথে শ্রেণীর নামগুলি প্রতিকূল।

এই বিকাশকারীকে যা করা উচিত ছিল তা টেবিলে কী তথ্য রয়েছে তা বিবেচনা করা উচিত - এটি কি একটি থাম্বনেইল গ্যালারী? ঠিক আছে তাহলে:

<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>

এখন আমি কিছু অভিযোজিত সিএসএস তৈরি করতে পারি:

@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%;
  }
}

ডিভগুলি কেন এবং টেবিলগুলি নয়

একটি সারণীতে টেবুলার ডেটা রয়েছে - একটি টেবিলের উপস্থাপনা টেবিলের কাঠামোর সাথে অবিচ্ছিন্নভাবে লিঙ্কযুক্ত। আপনি যে সামগ্রীটি রেখেছেন বা কোন স্ক্রিন / ডিভাইসে আপনি এটি প্রদর্শন করতে চান তা বিবেচনা করেই টেবুলার ডেটা সর্বদা টেবুলার আকারে থাকা দরকার।

একটি থাম্বনেইল গ্যালারী (বা রেজিস্ট্রেশন ফর্ম, একটি মেনু এবং আরও অনেক কিছু) ট্যাবুলার ডেটা নয়। এটি কিছু ডিজাইনের বিন্যাসে একটি টেবিলের মতো উপস্থাপিত হতে পারে, তবে অন্যান্য ক্ষেত্রে, সংকীর্ণ ফোন স্ক্রিনগুলির মতো, আপনি এটি আরও প্রচলিত ব্লক বিন্যাসগুলি ব্যবহার করতে চান। অথবা সম্ভবত আপনি প্রধান বিষয়বস্তু অঞ্চলের পরিবর্তে একটি সাইডবারে থাম্বনেইল প্রদর্শন করতে চান।

আপনার পছন্দটি এখন প্রশস্ত স্ক্রিন সামগ্রী (সারণী) এবং সাইডবার বা সংকীর্ণ স্ক্রিনের সামগ্রী (ডিভিএস) এর জন্য আলাদা মার্কআপ আউটপুট দেবে - যার অর্থ আপনার প্রোগ্রামটি তৈরি করে যদি আপনার সার্ভারের সাইড স্ক্রিপ্টগুলি বিষয়বস্তুটি কোথায় চলেছে তা সম্পর্কে সচেতন হতে হবে means - অথবা আপনার সার্ভারের সাইড স্ক্রিপ্ট আউটপুট একই মার্কআপ রয়েছে (কারণ এটি আপনি কোথায় রাখছেন তা বিবেচনা করা উচিত নয়) এবং বিভিন্ন পরিস্থিতিতে বিভিন্ন সিএসএস বিধি ব্যবহার করুন।

সুতরাং, আপনার কাছে সর্বদা আউটপুট টেবিলগুলির একটি পছন্দ রয়েছে এবং তারপরে ব্লক সহ প্রাকৃতিক টেবিল প্রদর্শন বিধিগুলিকে ওভাররাইড করা (যা সত্যই কোনও বিকাশকারীদের মাথার মধ্যে কিছু গিয়ার টুকরা টুকরা করা উচিত), বা ভাল লেবেলযুক্ত ডিভগুলি নিয়ে যা স্টাইলিংয়ে আরও নমনীয় পদ্ধতির অনুমতি দেয়।

এবং বেশ কয়েক বছর ধরে সেরা অভ্যাসগুলি এখন সারণী এড়ানো এড়ানো ছিল যখন টেবুলার ডেটা উপস্থাপন করার প্রয়োজন হয় না।


শ্রেণীর নামগুলি আসলে একটি উদাহরণ ছিল। বাস্তব জীবনে এগুলি বেশিরভাগই সঠিকভাবে বর্ণনামূলক। যাইহোক, আপনার উদাহরণে আপনি এর <div>পরিবর্তে কেন ব্যবহার করবেন <table>? এটি কি সুবিধা দেয়?
ভিলেক্স-

1
হুঁ ... ভাল, আপনার ক্ষেত্রে আপনি মিডিয়া ক্যোয়ারির মাধ্যমে একই HTML এর দুটি পৃথক উপস্থাপনা করেন। ঠিক আছে, এটি একটি ভাল ব্যবহারের ক্ষেত্রে। তবে যদি এটি না হয় এবং আপনি আগেই জানতেন যে এই থাম্বনেইল গ্যালারীটি কেবলমাত্র এক জায়গায় প্রদর্শিত হবে এবং কেবল টবুলার ফর্ম্যাটে - আপনি কি <table>তখন বা এখনও ব্যবহার করবেন display:table? কারণ, ভাল, একটি উপায় এটা হয় ট্যাবুলার তথ্য। "ডেটা" ছবিগুলি ব্যতীত তবে এখনও।
ভিলেক্স-

15
ভাল, না, এটি টেবুলার ডেটা নয়। আপনি এটি একটি গ্রিডে উপস্থাপন করছেন যা কোনও টেবিলের অনুরূপ। টেবুলার ডেটা হ'ল পরিসংখ্যান এবং তুলনামূলক তথ্য - একটি স্প্রেডশিটের মতো ভাবেন। আপনি কি বলতে পারবেন যে উইন্ডোজ ফাইল এক্সপ্লোরারে থাম্বনেইল ভিউটি ট্যাবুলার ডেটা? এবং, এটি কি সর্বদা একটি টেবিলের মতো উপস্থাপিত হতে চলেছে ? আপনি যদি 6 বা 12 মাসে আলাদা ভিউ স্টাইল চান? কেন ব্যাপকভাবে গৃহীত অনুশীলনের মুখে বাধা থাকার জন্য দীর্ঘমেয়াদী প্রভাব ফেলে এমন বিধিনিষেধ কেন?
হোরাসকোল

12
এটি মোটেই টেবুলার ডেটা নয়। এই বিষয়বস্তুটি একটি টেবিলের সাথে সাদৃশ্যপূর্ণ স্বেচ্ছাচারী বিন্যাসের সিদ্ধান্ত ব্যতীত অন্য কোনও কারণ নেই। এটি কলাম এবং সারিগুলিতে কাঠামোগত ডেটা নয়, এটি গ্রিডে রাখা সামগ্রীর একটি তালিকা। - সম্পাদনা করুন: হোরাসকোল কী বলেছেন।
এরিক কিং 23

3
ঠিক আছে, ঠিক আছে, এটি কিছুটা প্রসারিত করছিল। :) আচ্ছা, আপনি আমাকে কিছু ভেবেছিলেন! এটার জন্য ধন্যবাদ! আমি এখনও 100% বিশ্বাসী নই, তবে কমপক্ষে এটি চালিয়ে যাওয়ার মতো কিছু। :)
ভিলেক্স-

11

পুরানো দিনগুলিতে, আপনি কলাম প্রস্থের জন্য শতাংশ ব্যবহার করলে টেবিল রেন্ডারিং ইঞ্জিন "ধীরে ধীরে " উপস্থিত হয়েছিল । ইঞ্জিনটি মূলত পুরো ডেটা সেটটি ডাউনলোড করে নেওয়ার আগেই স্ক্রিনে এটিকে আঁকতে কত বড় ছিল তা নির্ধারণ করতে শুরু করবে।

ডিআইভির ইঞ্জিনটি আলাদা ছিল। ব্রাউজারটি কোনও ডিআইভির মুখোমুখি হওয়ায় এটি এগিয়ে যাবে এবং এটিকে স্থাপন করবে এবং সামগ্রীটি ইনলাইন পূরণ করা শুরু করবে। অবশ্যই, ডেভিডগুলি লোডিং শেষ হওয়ার সাথে সাথে প্রায় লাফিয়ে উঠবে। সুতরাং কেন আমি উপরের উদ্ধৃতিতে হাজির হয়েছি। উভয়টির সমাপ্তির সময়সীমা একই ছিল, তবে টেবিলগুলি শেষ অবধি টানা ছিল না যার অর্থ ব্যবহারকারী এটি নিশ্চিত ছিল না যে এটি লোড হচ্ছে কিনা তা দ্বিতীয় বা দুইয়ের জন্য নয়।

টেবিলগুলি বাসা বেধে থাকায় এটি আরও খারাপ হয়েছিল।

সারণি রেকর্ডিং এফ এআর আরও দ্রুততর করার জন্য তখন (এবং এখনও বিদ্যমান) উপায় রয়েছে। মূলত এটিকে একটি ইঙ্গিত দিয়ে যে কলামের আকার পরিবর্তন হচ্ছে না, তারপরে ব্রাউজারটি সঙ্গে সঙ্গে ট্যাবুলার ডেটা রেন্ডারিং শুরু করে। শেষ পর্যন্ত এই এর মানে হল যে টেবিল আসলে সঠিক অবস্থানে প্রদর্শন করতে পারেন দ্রুত তাদের ভাল হওয়ার চেহারা দান আছে divs হয়।

তবে এটি পুরো গল্প নয়। এটির বাকীটি হ'ল বেশিরভাগ ডেভসরা এগুলি জানার জন্য যথেষ্টভাবে তাদের নৈপুণ্য শিখতে বিরক্ত করে না। পরিবর্তে তারা বিভিন্ন ব্যান্ডওয়াগনে ঝাঁপিয়ে পড়ে এবং যে কোনও কোড থেকে তারা অনুলিপি / পেস্ট করতে পারে with আজও আমি দেখতে পেলাম যে খুব কম ওয়েব বিকাশকারীই একটি ডক্টাইপ থেকে পরের ডকুমেন্টের মধ্যে পার্থক্য জানে - এবং এটিই এক নম্বর কারণ যা বিভিন্ন সাইটের বিভিন্ন ব্রাউজারে বিভিন্ন ধরণের কাজ রয়েছে ar

সুতরাং, প্রশ্ন জিজ্ঞাসা করার জন্য আপনাকে +1।


ডক্টিপাইপি সম্পর্কে অফটপিক: আমি ভেবেছিলাম যে তাত্ত্বিক পার্থক্য থাকলেও (এবং যাচাইকারীরা এটিকে গুরুত্বের সাথে নিয়েছিল), বাস্তবে ব্রাউজারগুলি তাদের মধ্যে সত্যই পার্থক্য করে না। ঠিক আছে, সম্ভবত এইচটিএমএল / এক্সএইচটিএমএল স্বাদগুলির মধ্যে কিছু ছোটখাটো পরিবর্তন হয়েছে তবে সংস্করণ এবং ডিটিডি তথ্য অন্তত ব্যবহৃত হয়নি। এই কারণেই এইচটিএমএল 5 যাইহোক পুরো জিনিসটি ফেলে দেয় এবং ঠিক সাথে চলে যায় এবং <!DOCTYPE html>এই কারণেই এটি আই 6 এর মতো পুরানো ব্রাউজারগুলিতেও কাজ করে। আমি কিছু মিস করেছি?
ভিলক্স-

2
@ ভিলাক্স: একটি ডক্টাইপ একটি ব্রাউজারকে একটি নির্দিষ্ট মোডে রাখে। অন্যান্য জিনিসের মধ্যে এটি বাক্সের মডেলটি ব্যবহারের ক্ষেত্রে সংজ্ঞায়িত করে। বেশ কয়েকটি ডক্টাইপের জন্য ব্রাউজারগুলি লাইন করায় না কারণ ব্যবহৃত বাক্সের মডেলটি আলাদা ছিল। এ কারণেই এতগুলি বিকাশকারী অভিযোগ করেছেন যে ব্রাউজারগুলি পৃষ্ঠাগুলি আলাদাভাবে দেখায় এবং ডক্টাইপ ঠিক করার পরিবর্তে বিশাল আকারের সিএসএস রিসেট শীট ব্যবহার করে। যাইহোক, কয়েকটি ডক্টাইপ রয়েছে যার মধ্যে সমস্ত ব্রাউজারগুলি একই বক্স মডেল ব্যবহার করেছিল - তবে সেগুলি কখনই ডিফল্ট ছিল না, আপনাকে সেগুলি জানতে হবে।
নোটম

@ ভিলেক্স: এইচটিএমএল 5 পুরো জিনিসটি ফেলে দেয় না। বরং একটি নতুন ডক্টাইপ যুক্ত হয়েছিল। পয়েন্টটি হ'ল, এইচটিএমএল ডকুমেন্টের শীর্ষে উপস্থিত হওয়া খুব প্রথম লাইনটি সমালোচনাযোগ্য এবং এটি কী করে তা যদি আপনি বুঝতে না পারেন এবং বিভিন্ন ব্রাউজারগুলি কীভাবে প্রতিক্রিয়া দেখায় তবে আপনি আপনার লেআউটটি কেন খুঁজে বের করতে অনেক বেশি সময় ব্যয় করবেন spend একটি নির্দিষ্ট ব্রাউজারে "ভাঙ্গা" হয়।
নটমে

অপেক্ষা করুন, তাই হয় বিভিন্ন doctypes যে একই দস্তাবেজে ভিন্নভাবে রেন্ডার করা? কোনটা? মনে মনে আমি বিভিন্ন ডক্টাইপ সম্পর্কে কথা বলছি, ডকটাইপ বনাম ডকটাইপের অভাব নয় (ওরফে কিরকস্মোড)।
ভিলেক্স-

@ ভিলাক্স: এটি কিছুটা জটিল, যেহেতু কিছু ডক্টাইপ টাইপের ট্রিগার মোড (ডক্টাইপের মতো নয়) এবং কিছু অন্যান্য ডক্টাইপস (এইচটিএমএল 5 ডক্টাইপ সহ) ট্রিগার স্ট্যান্ডার্ড মোড, এবং এমন কিছু ডক্টাইপ রয়েছে যা তৃতীয় "প্রায়-স্ট্যান্ডার্ডকে ট্রিগার করে" "কিছু ব্রাউজারে মোড।
জ্যাকবিবি

5

আমি যদি এখানে একটু "মেটা" পেতে পারি তবে এটি আমার মনে দুটি সমস্যা নিয়ে আসে:

একটি: কেউ কোনও কারণে কোনও নিয়মের প্রস্তাব দেয় এবং লোকেরা স্পিরিটটিকে উপেক্ষা করার সময় নিয়মের প্রযুক্তিগত চিঠি অনুসরণ করে বিষয়টি পুরোপুরি মিস করে। নিয়মটি প্রযুক্তিগতভাবে শব্দের মতো অনুসরণ করে, নিয়মটি প্রতিরোধ করার চেষ্টা করা ছিল এমন সমস্ত খারাপ জিনিসগুলি সম্পাদনের জন্য তারা কিছু উপায় খুঁজে পায়।

দুই: কেউ সমস্যা দেখেন এবং এটি প্রতিরোধের জন্য একটি বিধি প্রস্তাব করেন। অন্যরা এই নিয়মের মূল্য দেখেন। তারপরে তারা মূল সমস্যাটি সমাধান করার কথা বিবেচনা করে এবং / অথবা এটি অন্যান্য যে সমস্যাগুলি সৃষ্টি করে তা বিবেচনা না করেই এই নিয়মটির প্রতি অন্ধ ভক্তিতে জোর দেয়। আমার অনেক কথোপকথন হয়েছিল যেখানে কেউ বলে, "আপনার অবশ্যই এক্স করা উচিত কারণ এটি নিয়ম", এবং তারপরে আমি জিজ্ঞাসা করি, "তবে আমাদের এক্স করা উচিত কেন?", এবং তারা আমার দিকে অবাক হয়ে ও উদ্বেগের সাথে তাকিয়ে বলে, "তবে আমি আপনাকে কেবল বলেছি! কারণ এটি নিয়ম! " আমি উত্তর দিয়েছি, "তবে এটি সমাধানের চেয়ে আরও সমস্যার সৃষ্টি করেছে বলে আমি মনে করি ওয়াই করার চেয়ে আমরা আরও ভাল d" এবং তারপরে ব্যক্তিটি বলে, "না, দেখুন, আমি আপনাকে দেখাবো, দেখুন, এই বইটিতে এটি ঠিক আছে X এক্স এর নিয়ম।"

এই ক্ষেত্রে, আমাদের একটি সমস্যা রয়েছে: টেবিল ট্যাগটি দুটি কাজ করে: একটি, এটি একটি নথির বিন্যাস নিয়ন্ত্রণ করে। দ্বিতীয়ত, এটি এই ধারণাটি পৌঁছে দেয় যে সংযুক্ত তথ্যগুলি সারি এবং সংখ্যা বা অন্যান্য ডেটার কলামগুলি দিয়ে তৈরি।

এত লোক সমাধানটির প্রস্তাব দিয়েছিল: লজিক্যাল "টেবিল" নয় এমন লেআউটগুলি নিয়ন্ত্রণ করতে টেবিল ট্যাগ ব্যবহার করবেন না। সিএসএস ব্যবহার করুন।

তবে এই সমাধানে একটি সমস্যা আছে। সারণী ট্যাগ এবং এর সাবট্যাগগুলি অনেকগুলি কার্যকর লেআউট ফাংশন করে যা সিএসএস ব্যবহার করে অর্জন করা সহজ নয় এবং যখন এটি অর্জন করা যায় তখন এটি করার জন্য প্রয়োজনীয় কোডটি প্রায়শই জটিল - পড়া এবং পড়া বজায় রাখা কঠিন। যখন একটি পরিষ্কার, সহজ উপায় থাকে তখন কেন আমাদের আনাড়ি, কঠিন উপায়ে জিনিসগুলি করা উচিত?

ব্যক্তিগতভাবে, আমি মনে করি আমরা কেবল ঘোষণা করা থেকে আরও ভাল হত "" কোনও টেবিল ট্যাগের ভিতরে কিছু রয়েছে তার অর্থ এই নয় যে এটি সংখ্যার সারি এবং কলামগুলি উপস্থাপন করে। " এটি একটি বিদ্বেষপূর্ণ ঘোষণা হত না। আমি কাউকে বলতে কখনও শুনিনি যে "পি" ট্যাগটি কেবলমাত্র সেই জিনিসগুলির জন্য ব্যবহার করা যেতে পারে যা সত্যিই ব্যাকরণগতভাবে সঠিক, যুক্তিযুক্তভাবে নির্মিত ইংরেজি বাক্যগুলির অনুচ্ছেদে। আমি কখনও কাউকে বলতে বলতে শুনিনি যে কোনও তালিকার জন্য "উল" ট্যাগ ব্যবহার করা ভুল, যা আসলে একটি যৌক্তিক ক্রমে আসে, কারণ আপনি বুলেট চেয়েছিলেন এবং ক্রম সংখ্যাটি নয়। প্রভৃতি


7
শেষ অনুচ্ছেদে আর্ট করুন - আপনি এই উপাদানগুলির জন্য এইচটিএমএল 5 স্পেসিফিকেশনটি পড়েছেন, তাই না? w3.org/html/wg/drafts/html/master/semantics.html#the-p-element w3.org/html/wg/drafts/html/master/semantics.html#the-ul-element w3.org/ এইচটিএমএল / ডাব্লুজি / ড্রাফ্টস / এইচটিএমএল / মাস্টার / সিমান্টিকস html # দ্য ওল-এলিমেন্ট - বিশেষত, যদি আদেশের কোনও গুরুত্ব নেই, তবে ওল উপাদানটি ব্যবহার করুন (যেহেতু এটি কাঠামোগত অংশ) - আপনি এখনও এটি বুলেট তালিকা হিসাবে উপস্থাপন করতে পারেন সিএসএস ব্যবহার করে
হুরাসকোল

5
এবং যদি আপনি এখানে অন্য দুটি জবাবের দিকে তাকান, আপনি দেখতে পাবেন যে
কোনওটিই

1
হুম, আমার কাছে মনে হচ্ছে আমি এরকম কিছু বলেছি: "কেউ সমস্যা দেখেন এবং এটি প্রতিরোধের জন্য একটি বিধি প্রস্তাব করেন Others অন্যরা এই বিধিটির মূল্য দেখেন Then তারপরে তারা মূল সমস্যাটিকে অনুধাবন না করেই এই নিয়মের প্রতি অন্ধ নিষ্ঠার প্রতি জোর দিয়েছিলেন it এটি সমাধান করে এবং / অথবা এটি অন্যান্য যে কোন সমস্যা সৃষ্টি করে তা বিবেচনা না করেই "। আমি অস্বীকার করি না যে নিয়মের পিছনে যুক্তিসঙ্গত চিন্তাভাবনা রয়েছে। আমি কেবল উপসংহারে একমত নই অবশ্যই আমি বলতে পারি, "আপনার সেখানে একটি ভাল বক্তব্য রয়েছে, তবে তবুও আমি একমত নই" " এবং অবশ্যই আপনি অস্বীকার করবেন না যে এমন কিছু লোক আছেন যারা উপকারিতা এবং কৌশলগুলি বোঝেন না এবং বলে ...
জয়

1
... "কারণ এটি নিয়ম"। এই ব্যক্তিদের সাথে কয়েক বছর ধরে এই বিশেষ ইস্যুতে এবং আরও অনেকের সাথে আমার বেশিরভাগ কথোপকথন হয়েছে। যে লোকেরা এমনকি কোনও বিধি সম্পর্কে উপকার ও কুফলগুলিও আলোচনা করতে অস্বীকার করে, কারণ এটি নিয়ম, আলোচনার সমাপ্তি।
জয়

এই দুর্ভাগ্য ধারণাটি উদ্ভূত হয়েছে যে এইচটিএমএল ডিজাইনের শিকড় শিল্পের চেয়ে প্রকৌশল কিছু বিমূর্ত আকারে রয়েছে। যেমন, শিরাতে, কেউ কেউ সিদ্ধান্ত নিয়েছে যে পদার্থবিজ্ঞানের সাথে সামঞ্জস্যপূর্ণ নিখুঁত নিয়ম অবশ্যই থাকতে হবে, এবং মাধ্যাকর্ষণ অবশ্যই মেনে চলতে হবে, বা যে কেউ এই জাতীয় নিয়ম ভঙ্গ করেছে তাকে "বিশুদ্ধ বিশ্বাস" থেকে বিদায় নেওয়া হয়েছে। বাস্তবতা হ'ল কোনও ব্রাউজার বা ডিজাইনের রূপক অবর্ণনীয় নয়। যারা বিপরীতে জোর দেয় তাদের চারপাশে সতর্কতার সাথে পদক্ষেপ দিন।
ডেভিড ডব্লিউ

5

ইতিমধ্যেই টন এখানে মহান উত্তর। তবে আমি যুক্ত করতে চেয়েছিলাম যে tableউপাদানগুলির রেন্ডারিং সীমাবদ্ধতা রয়েছে যা divউপাদানগুলির জন্য বিদ্যমান নয় । চেষ্টা করুন এবং যে ভার্চুয়াল স্ক্রলিং (যেমন: কি একটি টেবিল তৈরী SlickGrid , DataTables , এবং অন্যান্য) এবং আপনার দারুণভাবে হতাশ হবেন। এটা ঠিক কাজ করে না। সর্বাধিক (সমস্ত?) আধুনিক জাভাস্ক্রিপ্ট গ্রিডগুলি ব্যবহার করে divকারণ সিএসএস আরও অনেক নমনীয় উপস্থাপনের জন্য অনুমতি দেয়।

এছাড়াও অন্যান্য সীমাবদ্ধতা আছে। আমার সাধারণ নিয়মটি হ'ল আমি যদি একক পর্দায় পুরো টেবিলটি দেখতে যাচ্ছি এবং আমি এর জন্য কোনও / বেশি কাস্টম রেন্ডারিং চাই না তবে আমি একটি tableউপাদান ব্যবহার করি, অন্যথায় আমি ডিভগুলি নিয়ে যাই কারণ আমি ফলাফলগুলিকে অনেকটা নিয়ন্ত্রণ করতে পারি , আরও অনেক সহজে।


3

এইচটিএমএল এবং সিএসএস কিছুটা নমনীয়তার বিকাশ করেছে যার অর্থ ধারণাগতভাবেও "ব্লক" উপাদানগুলি <div>(এইচটিএমএলের প্রাচীনতম এবং ব্লক সামগ্রীর সর্বাধিক সাধারণ রূপ) হিসাবে ব্লক হিসাবে প্রদর্শিত হবে না:

div { display: inline; }

আপনি যেমন নোট করেছেন, <div>অনুকরণ <table>এবং এর সহযাত্রীদের পুনঃপ্রেরণ করা যেতে পারে । আসলে, বেশিরভাগ ট্যাগই পারেন তাদের বিশেষ ভূমিকা দেওয়া, আমার সন্দেহ আপনি থেকে কার্যকররূপে মত ম্যাক্রো ট্যাগ remap পারে <html>, <head>, <body>, এবং <script>, কিন্তু "সাধারণ" মত ট্যাগ <div>, <p>, <b>, <em>, <span>, এবং <pre>? ধরার জন্য ইনলাইন ট্যাগগুলি ব্লক করুন, ব্লকগুলি ইনলাইন করুন, প্রাক-ফর্ম্যাট করা ট্যাগগুলি প্রবাহিত হবে, স্থির স্থানে ভাসমান। পাগল হয়ে যাও, ভালো লাগলে!

এটা সম্ভব । আমরা কীভাবে আমাদের সকলকে "শব্দার্থক মার্কআপ" ব্লাহ ব্লাহ ব্লাহ ব্যবহার করতে পারি বা পাইথোনিস্টাসের সাথে বিশ্বাস রাখতে পারি তা সম্পর্কে আপনি কোনও সুতা স্পিন করতে চাইতে পারেন, " এটি করার সুস্পষ্ট উপায় একটি এবং সেখানে থাকা উচিত।" তবুও টিম টোডি একটি চালাক এবং কৌতূহলী লোক। একটি বিনামূল্যে হাত দেওয়া, তিনি তাদের সব অন্বেষণ করব। এর পরিবর্তে বিকল্পগুলি তৈরি করতে উপলব্ধ নমনীয়তা ব্যবহার করে। কিছু জ্ঞানী, কিছু অন্যথায় প্রমাণিত হবে। তবে এটি অনুসন্ধানের একমাত্র উপায় বিচার, ত্রুটি এবং অভিজ্ঞতা। সুতরাং প্রতিস্থাপনের জন্য পর্যাপ্ত শর্ত রয়েছে।

আমি মনে করি না যে এটি বলার অপেক্ষা রাখে না যে প্রতিস্থাপনটিও প্রয়োজনীয়। সর্বনিম্ন, এটি অত্যন্ত সুবিধাজনক । একটি দীর্ঘ সময়ের জন্য, এইচটিএমএল ছিল না <menu>, <section>অথবা <aside>উপাদান। তবুও ওয়েব পৃষ্ঠাগুলি এবং অ্যাপ্লিকেশনগুলির সর্বত্র মেনু, বিভাগ এবং সাইডবার রয়েছে। কিভাবে? কারণ এইচটিএমএল তালিকার উপাদানগুলি ( <ul>, <ol>এবং <li>) সহজেই পুনঃপ্রবর্তিত হয়েছিল এবং কিছু ব্যবহার মেনু ধারক এবং যন্ত্রাংশ হিসাবে পুনরায় শ্রেণিবদ্ধ করা হয়েছিল। <div>জন্য দাঁড়ানো পারে <article>, <section>, <aside>, <figure>, এবং <summary>। এইচটিএমএল 5 কিছু পূর্বে-অব্যক্ত ব্যবহারের ক্ষেত্রে বিসোক উপাদান যুক্ত করেছে এবং যুক্ত করেছে। সাধারণ, বাস্তব-বিশ্বের ব্যবহারের জন্য এটি একটি দুর্দান্ত আপডেট এবং সংশোধন।

তবুও, প্রচুর প্রচলিত আইডিয়োম রয়েছে যাতে bespoke ট্যাগ বা শব্দার্থক মডেল নেই । পৃষ্ঠা এবং পাদটীকা, টান-উদ্ধৃতি, মন্তব্য স্ট্রিম, সম্পর্কিত অবতার, "পছন্দগুলি," সাবহেড এবং সাবটাইটেলগুলির মতো জিনিসগুলি যা আমি এবং আরও অনেকে প্রতিদিন ব্যবহার করি। আমারা কি করছি? আমরা কি পারি এইচটিএমএল 6 বা এইচটিএমএল 6 না পাওয়া পর্যন্ত পরবর্তী পাঁচ বা দশ বা তবু বহু বছর ধরে আমাদের কাজটি সমর্থন করতে ক্লাস এবং আইডিসহ "ঘনিষ্ঠ তবে অযৌক্তিক" উপাদানগুলিকে পুনর্বিবেচনা করুন। এইচটিএমএল / সিএসএসের "হ্যাঁ, এটি তাত্ত্বিকভাবে একটি এক্স, তবে আমরা এটি ট্যাগ করব এবং এটির সাথে Y হিসাবে কাজ করব" ক্ষমতাটি অবিশ্বাস্যভাবে সুবিধাজনক। অনিবার্য, সত্যই। এটি ওয়েব সামগ্রীকে নমনীয় করে তোলে এবং ভঙ্গুর হতে পারে না।

আরও এগিয়ে গিয়ে, "শব্দার্থক মার্কআপ" এর অপ্রতিরোধযোগ্য সীমাবদ্ধতা রয়েছে । বিষয়বস্তুর জন্য আপনি যে কোনও ধরণের কঠোর কাঠামো কল্পনা করতে পারেন এটি সত্য।

স্ট্যান্ডার্ড ফর্ম্যাটগুলি মানুষের প্রয়োজন, আকাঙ্ক্ষা এবং বিভিন্ন ধরণের সম্পূর্ণ সম্পদকে ঘিরে রাখতে পারে না। লোকেরা এখন কী করছে তার সবসময় তারা "বক্ররেখার পিছনে" থাকবে । তারা কীভাবে উদ্ভাবন করছে। হিক, এইচটিএমএল 5 এখনও 17 ম শতাব্দীর পাদটীকা, সাবহেড এবং অন্যান্য মুদ্রণ উদ্ভাবনগুলিতে বক্ররেখার পিছনে রয়েছে। এটিতে অনেক তথ্য কর্মী এবং সামগ্রী নির্মাতাদের কাছে প্রয়োজনীয় বৈশিষ্ট্যগুলির অভাব রয়েছে। সুতরাং আমরা উন্নতি।

আরও অপরিবর্তনীয় হ'ল তথ্যগুলি নিয়মের একটি সেটকে মেনে চলে না। অবশ্যই, এটি একটি টেবিল হিসাবে শুরু হয়। তবে আপনি কেবল সংক্ষিপ্তসারটি চান - একটি তালিকা হিসাবে প্রতিটি সারির শিরোনাম বলুন। হতে পারে এটি অনেক বেশি জায়গা নেয় এবং আপনি এটি একটি স্থান-সংরক্ষণের ইনলাইন তালিকা হিসাবে পছন্দ করেন। আপনার কাছে রেকর্ড রয়েছে যা আপনি কেবল শিরোনাম চান, তারপরে আপনি ক্লিক করলে আপনি অন্তর্নিহিত বিশদটি দেখতে পাবেন। অথবা আপনি চান যে কোনও জটিল তালিকা বা টেবিলের আইটেমগুলি গোষ্ঠীভুক্ত করা এবং শ্রেণিবদ্ধকরণ করা উচিত। ওহ, এখন আপনি এটি স্থানান্তরিত করতে এবং অন্যভাবে শ্রেণিবদ্ধকরণ করতে চান। অথবা মানগুলি বার চার্ট হিসাবে প্লট করা হয়। এগুলি অ্যাপস, স্প্রেডশিট এবং ডেটা ভিজ্যুয়ালাইজেশনে প্রতিদিন করা জিনিস things এগুলি আমাদের তথ্য ল্যান্ডস্কেপের অংশ এবং পার্সেল এবং ওয়েবে আমরা কী চাই এবং কী করতে চাই। মানুষ ক্রমাগত আমাদের ডেটা ফর্ম এবং উপস্থাপনা পুনর্গঠিত। এটি কেবল একটি জিনিস বা একটি বিন্যাস / বিন্যাস নয়, বা একটি ধারণা। পরিস্থিতি এবং ব্যবহারকারীরা ইন্টারেক্টিভভাবে বেছে নেওয়ার পছন্দগুলির উপর নির্ভর করে শব্দার্থকগুলির সাথে এটি মজাদার। হ্যাঁ, পাঠ্যটিকে "জোর দেওয়া" হিসাবে চিহ্নিত করুন (<em>), তবে এটি কেবল একটি সম্মেলন। আমি ন্যূনতম বিভিন্ন ধরণের "জোর" দিয়ে নথিগুলিতে কাজ করেছি। আমাদের বিভিন্ন ব্যবহারের জন্য, বিভিন্ন ব্যাখ্যার জন্য কাস্টমাইজ করতে এবং পুনরায় তৈরি করতে সক্ষম হওয়া দরকার । একধরনের এইচটিএমএল জোর? অসাধারণভাবে হ্রাসকারী। সীমিত। ভঙ্গুর। একই জন্য সত্য <table>, <p>ইত্যাদি

"কি আছে কোথায়" এই সম্পর্কে সমগ্র সম্প্রদায়ের চিন্তাকে সংগঠিত করতে এমন ট্যাগ / উপাদান থাকা খুব দুর্দান্ত great এটি সম্মেলন এবং প্রতিমা প্রতিষ্ঠা করতে সহায়তা করে এবং আমাদের সম্মিলিতভাবে আরও দক্ষ করে তোলে। কিন্তু জিনিসগুলিকে পুনর্নির্মাণের ক্ষমতা, সেই কাঠামোগুলি পুনরায় নকশাকরণ এবং পুনর্নির্মাণের ক্ষমতা? এটি ওয়েবের অন্তর্ভুক্তি এবং এর সাফল্যের অংশ এবং অংশ।


4
কীভাবে এটি প্রশ্নের উত্তর দেওয়ার কাছাকাছি যায়?
হুরাসকোল

2
আইএমও, এটি ডিজাইনার, বিকাশকারী এবং কন্টেন্ট কর্মীরা নির্দিষ্ট, উদ্দেশ্য-অন্তর্নির্মিত উপাদানগুলির (উদাহরণস্বরূপ ) স্থানে জেনেরিক উপাদানগুলি ( <div>এবং <span>) ব্যবহার কেন বেছে নেয় তার অন্তর্নিহিত প্রশ্নটি আলোচনা করে <table>। এটি কেবলমাত্র সেই ট্যাগগুলির চেয়ে কিছুটা বেশি মেটা, তবে এটি ব্যবহারের নিদর্শন এবং নীতিগুলির সাথে সরাসরি কথা বলে।
জোনাথন ইউনিস

@ হারুসকোল আসলে, এখানে থাকা সমস্ত উত্তরগুলির মধ্যে, এই উত্তরটি আপনার উত্তরটির সাথে সর্বাধিক সামঞ্জস্যপূর্ণ এবং সহায়ক। আমি বলব যে তারা ভাল জাল।
জোনাথন ইউনিস

1
আমি জানি না যে আমি (উদ্দেশ্য হিসাবে নির্মিত) এর divসাথে বিপরীতে (জেনেরিক হিসাবে) এতদূর যেতে পারি কিনা table। এইগুলি হল উভয় বিশেষভাবে নির্মিত, দুটি ভিন্ন (এখনও সম্ভবত আংশিকভাবে ওভারল্যাপিং) উদ্দেশ্যে। এটি, আমি বিশ্বাস করি, এটিই প্রশ্নের কেন্দ্রবিন্দু।
এরিক কিং

@ এরিকিং এটা বলা ঠিক যে divএর একটি উদ্দেশ্য রয়েছে fair কিন্তু divspanখুব হবে না নির্দিষ্ট উদ্দেশ্যে উদ্দেশ্য যে table, thead, tdইত্যাদি না। আপনি যদি divসাইডবার, টান কোট, বিভাগ বিভাগকরণ ইত্যাদির জন্য বিবিধ উপাদান ব্যবহার করেন তবে কেউই প্রকাশ পাবে না - ডকুমেন্টের যে কোনও জায়গায়, খুব বেশি। একটি unenclosed সঙ্গে যে করার চেষ্টা করুন thead, tdঅথবা li। "উদ্দেশ্য-নির্মিত," সম্ভবত "উদ্দেশ্য-নির্দিষ্ট" বা "নির্দিষ্ট সুনির্দিষ্ট ভূমিকার সাথে" পরিবর্তে।
জোনাথন ইউনিস

0

কেস ম্যাটার ব্যবহার করুন। কোনও সামগ্রীর পৃষ্ঠায় এবং একটি অ্যাপ্লিকেশনটিতে বিন্যাস / উপস্থাপনার মধ্যে একটি বড় পার্থক্য রয়েছে। বিষয়বস্তুতে, শব্দার্থবিজ্ঞানগুলি এসইও-সচেতনতা এবং ব্যবহারযোগ্যতার জন্য দুর্দান্ত বিষয়। এই ক্ষেত্রে, সারণী তথ্য উপস্থাপন করতে সারণী ব্যবহার করা সাধারণভাবে সঠিক জিনিস। যেমনটি অন্যরা উল্লেখ করেছে, অনুসন্ধান ইঞ্জিনগুলি আপনাকে দণ্ডিত করবে এবং আপনি যদি ব্যবহারের আইন প্রয়োগের জন্য সরকারী ব্যবহারের দিকনির্দেশনা মেনে চলতে চান তবে আপনি প্রচুর ব্যবহারযোগ্যতা আইনও চালাতে পারেন।

একটি ওয়েব অ্যাপ্লিকেশনে, বিকাশকারীরা এসইও এবং ব্যবহারযোগ্যতার উদ্দেশ্যে সম্পূর্ণ আলাদা দৃষ্টিভঙ্গি তৈরি করতে পছন্দ করতে পারে। প্রতিক্রিয়াশীল নকশার ফলে লোকেরা এমন দৃষ্টিভঙ্গি তৈরি করতে পরিচালিত করে যা ডেস্কটপ এবং মোবাইল লেআউটগুলি পরিচালনা করতে পারে এবং ডিভগুলি ব্যবহারের ক্ষেত্রে টেবিলের চেয়ে ভাল।

উদাহরণস্বরূপ, ইকমার্স সাইটগুলি নিন। কোনও ব্রাউজে পণ্য অনুসন্ধানের তালিকা বা অনুসন্ধানের ফলাফলগুলি দেখায়, সাধারণভাবে, টেবুলার ফর্ম্যাটে পণ্যগুলির তালিকা, তবে এই মতামতগুলি সারণীগুলির চেয়ে ডিভগুলি (যা আরও জেনেরিক এবং নমনীয় বিন্যাস এবং স্টাইলিং বিকল্প সরবরাহ করে) ব্যবহার করে ভালভাবে তৈরি করা যেতে পারে। আমাজন এবং ইবে এই পদ্ধতির ভাল উদাহরণ। উভয় সাইটে একটি অনুসন্ধান ফলাফল পরিদর্শন করুন এবং আপনি ডিভের গভীরভাবে নেস্টেড সেট দেখতে পাবেন।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.