কেন আমাদের ডিজাইনে <টেবিল> ব্যবহার করার কথা নয়?


41

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


ব্যাপকভাবে তাই আলোচনা stackoverflow.com/questions/83073/...
গ্যাব্রিয়েল Petrioli

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

উত্তর:


71

1) পৃষ্ঠাগুলি পৃষ্ঠাগুলির জন্য ব্যবহার করা উচিত নয় কারণ সেগুলি হ'ল:

  • ব্র্যান্ডারে রেন্ডার করতে ধীরে ধীরে ধীরে ধীরে ডাউনলোড করার জন্য টেবিলের সবচেয়ে বেশি - যদি না হয় তবে তা ডাউনলোড করতে হবে

  • তাদের নন-টেবিল বিন্যাসের চেয়ে বেশি এইচটিএমএল প্রয়োজন যার অর্থ ধীর লোডিং এবং রেন্ডারিং, পাশাপাশি বর্ধিত ব্যান্ডউইথের ব্যবহার

  • এগুলি বজায় রাখা একটি দুঃস্বপ্ন হতে পারে কারণ তারা দ্রুত জটিল হয়ে উঠতে পারে

  • তারা পাঠ্য অনুলিপি ভাঙ্গতে পারে

  • তারা নেতিবাচকভাবে স্ক্রিন পাঠকদের প্রভাবিত করে এবং আপনার সামগ্রীতে কিছু ব্যবহারকারীর কাছে অ্যাক্সেসযোগ্য হতে পারে

  • এগুলি যথাযথ শব্দার্থক মার্কআপ ব্যবহার করার মতো নমনীয় নয়

  • এগুলি পৃষ্ঠার বিন্যাসের জন্য কখনও ব্যবহারের উদ্দেশ্যে ছিল না

  • একটি প্রতিক্রিয়াশীল বিন্যাসে টেবিল তৈরি করা নিয়ন্ত্রণ করা খুব কঠিন

2) সারণী তথ্য জন্য একটি টেবিল ব্যবহার করুন। টেবিলের জন্য এটিই।

আরও দেখুন: লোকেরা ডিভ দিয়ে টেবিল তৈরি করছে কেন?


1
ঠিক আছে, সুতরাং আমার কাছে যদি যোগাযোগের বিশদে একটি বিভাগ থাকে তবে এর জন্য একটি টেবিল রাখা ঠিক আছে তবে পৃষ্ঠার গ্রাফিকাল বিন্যাসটি ডিআইভিতে বা সেগুলির মতো কিছুতে রয়েছে। আমি দেখেছি কিছু ডিজাইনারগুলি সেগুলি সমস্ত ক্ষেত্রে একসাথে এড়াতে পারে যেখানে ট্যাবুলার ডেটা রয়েছে এবং ডিআইভি ব্যবহার করা হয়।
ছদ্ম

18
ডিজাইনাররা যারা টেবিলগুলি পুরোপুরি এড়িয়ে যান তারা জানেন না যে তারা কী করছেন। তারা "পৃষ্ঠা বিন্যাসগুলির জন্য সারণীগুলি ব্যবহার করবেন না" এর অর্থ কী তা ভুল বুঝেছে।
জন কনডে

1
পুরোপুরি টেবিলগুলি এড়ানো বোকামি, তবে যোগাযোগের তথ্যের জন্য টেবিলগুলির বৈধ বিকল্প রয়েছে। একটি সংজ্ঞা তালিকাটি একটি ভাল বিকল্প, বিশেষত এইচকার্ড বাস্তবায়নের সময়: cagintranet.com/archive/…
লজ মেজেস্ট

2
@ লিটসো: কোনটি DLভাল বা কোনটি ভাল নয় তার সিদ্ধান্ত নেওয়ার আগে আপনার ডাব্লু 3 সি এর নিজস্ব চশমাগুলি পড়া উচিত ।
লস ম্যাজেস্টে

1
একটি অবস্থান রয়েছে: এইচটিএমএল না রেখে টেবিল-ভিত্তিক লেআউটগুলি তৈরি করার জন্য টেবিল সিএসএস ট্যাগ। কয়েকটি কুলুঙ্গির ক্ষেত্রে রয়েছে যেখানে টেবিলগুলি এখনও লেআউটগুলির জন্য সেরা / সহজ বিকল্প। আমি কী বলতে চাইছি তা দেখতে @ css-tricks.com/fluid-width-equal- উচ্চতা- কলামগুলি দেখুন।
ইভান প্লেস

8

টেবিলগুলি ডিজাইন নয়, ট্যাবুলার ডেটার জন্য। লোকেরা প্রায়শই পৃষ্ঠাগুলি "টেবিলবিহীন" করার পিছনে অনুপ্রেরণাকে ভুল বুঝে।

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

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

সুতরাং, জিনিসটি হল, টেবিল-ভিত্তিক নকশার সাথে যান না এবং কোনও HTML / সিএসএস সমাধান মাপসই করা যায় না। এইচটিএমএল সিমেটিক মার্কআপ থেকে শুরু করুন এবং তারপরে সিএসএস দিয়ে নকশা তৈরি করুন। এটি যে কাউকে নিরাপদ রাখতে হবে। এটি থাম্বের নিয়ম হিসাবে ব্যবহার করুন।


3

টেবিলগুলিতে ডেটা রয়েছে এবং নকশার উপাদান নেই।



0

সারণী ব্যবহার না করার আসল কারণটি হ'ল:

একটি সারণির ডিফল্ট বিন্যাস হ'ল: table-layout:fixed

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

নীচের লাইন: উদাহরণস্বরূপ ডিআইভি উপাদান ব্যবহার করার সময় তার অভ্যন্তরের সমস্ত সামগ্রী উপস্থাপনের পরে টেবিলটি রেন্ডার হবে ।


-3

আমি ফিক্সড মিশ্রিত তরলে ওয়েব ডিজাইনের কাঠামোর জন্য টেবিলগুলি ব্যবহার করি এবং আমি জানি অনেকগুলি বলেছেন যে টেবিলগুলি নুব্বুলদের জন্য অন্যরা বলেন যে তারা পুরানো স্কুল ছেলেদের জন্য যারা সবসময় বলে ডিআইভিএসই সেরা, তবে সত্য সত্য যে টেবিলগুলি কোনও কিছুর জন্য আরও ভাল এবং ডিআইভিএসের জন্য অন্যান্য জিনিস.

একটি <br>বা একটি ভাল কি <p></p>? একই জিনিস

আমি এবং আমার নতুন 2015 ওয়েব ডিজাইনে আমার পুরানো টেবিলগুলি আমার বন্ধুত্বপূর্ণ মোবাইলের সাথে 100% প্রস্থের 2 টি সাইড কলাম 200px মিশ্রিত যে কাউকে বাটগুলি কিক করতে পারে।

স্পষ্টতই টেবিলগুলির অভ্যন্তরে আরও বেশি করে সারণী রাখা কুৎসিত হয়, সেখানেই ডিআইভিএস কার্যকর হয়। টেবিলগুলি ডিভগুলি পারে না এমন জিনিসগুলি করতে পারে এবং ডিভগুলি টেবিলগুলি করতে পারে না এমন জিনিসগুলি করতে পারে।

যারা বলছেন ডিফল্ট টেবিল লেআউট স্থির? আমি একটি উদাহরণ দিচ্ছি

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200">left</td>
    <td width="100%">middle</td>
    <td width="200">right</td>
  </tr>
</table>

আপনি এখন সম্ভাবনা দেখতে পাচ্ছেন? পিসি এবং সেলফোনে এটি একবার দেখুন। হ্যাঁ এবং আমার এমনকি বুটস্ট্র্যাপেরও দরকার নেই।

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

এখন ডিভগুলি দিয়ে নকশাটি উন্নত করা যাক

<div style="width:100%; min-width:1000px; height:200px;">top menu or nav</div>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200">left</td>
    <td width="100%">middle</td>
    <td width="200">right</td>
  </tr>
</table>
<div style="width:100%; min-width:1000px; height:200px;">top menu or nav</div>

ডিভিড এবং সারণী ব্যবহার করে এত সুন্দর একটি 5 কলামের নকশা বিন্যাস।

আপনার উত্তরটি হ'ল: তারা উভয়ই একসাথে আরও ভাল কাজ করে এবং দ্রুত হয় এবং এটি টিভি এবং ছোট সেলফোনগুলিতে কোনও ডিজাইনে ভাল দেখাবে।

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