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

Table Layout ডিজাইন

Table Layout ওয়েব পেজে ডেটা প্রদর্শনের জন্য সবচেয়ে প্রচলিত একটি টুল। এটি HTML টেবিলের মাধ্যমে ডেটাকে সারি এবং কলামে ভাগ করে দেখানোর পদ্ধতি। টেবিল ডিজাইন সাধারণত ডেটা সংরক্ষণের জন্য ব্যবহৃত হলেও এটি কিছু ক্ষেত্রে লেআউট তৈরির জন্যও ব্যবহৃত হতে পারে।

টেবিল ডিজাইনের মৌলিক গঠন

<table border="1">
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
    <th>Heading 3</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
    <td>Row 1, Cell 3</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
    <td>Row 2, Cell 3</td>
  </tr>
</table>

এখানে:

• <table> ট্যাগটি একটি টেবিল তৈরি করে।
• <tr> (table row) ট্যাগটি টেবিলের একটি সারি তৈরি করে।
• <th> (table header) ট্যাগটি টেবিলের হেডার সেল তৈরি করে।
• <td> (table data) ট্যাগটি টেবিলের সাধারণ সেল তৈরি করে।

টেবিল ডিজাইনের বৈশিষ্ট্য

• টেবিল বর্ডার: টেবিলের চারপাশে বর্ডার ব্যবহার করা যায় যা কন্টেন্টকে সেগমেন্টে বিভক্ত করে।
• সেল স্প্যান এবং রো স্প্যান: সেল এবং রো একাধিক সেল ধরে রাখতে colspan এবং rowspan অ্যাট্রিবিউট ব্যবহার করা হয়।
• CSS দিয়ে স্টাইলিং: টেবিলের ভেতরের সেলগুলিকে সুষম করতে CSS ব্যবহার করা যায়।

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ddd;
}

Grid Layout ডিজাইন

Grid Layout CSS Grid ব্যবহার করে ওয়েব পেজের লেআউট ডিজাইন করা যায়। CSS Grid একটি দুই-মাত্রিক গ্রিড সিস্টেম যা সারি এবং কলামে কন্টেন্ট বিন্যস্ত করতে ব্যবহৃত হয়। এটি ওয়েব ডিজাইনে আরো নমনীয়তা এবং নিয়ন্ত্রণ প্রদান করে, বিশেষত জটিল লেআউট ডিজাইনের ক্ষেত্রে।

CSS Grid Layout এর মৌলিক গঠন

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
}

.grid-item {
  background-color: lightgray;
  padding: 20px;
  text-align: center;
}

এখানে:

• .grid-container ক্লাসটি display: grid; দিয়ে গ্রিড কন্টেইনার তৈরি করে।
• grid-template-columns ব্যবহার করে গ্রিডের কলামগুলো নির্ধারণ করা হয়।
• gap দিয়ে সেলগুলোর মধ্যে গ্যাপ বা দূরত্ব নির্ধারণ করা হয়।

Grid Layout এর বৈশিষ্ট্য

• Two-dimensional Layout: CSS Grid দুই-মাত্রিক লেআউট তৈরি করতে সক্ষম, যার মানে হল যে এটি একসাথে সারি (rows) এবং কলাম (columns) কন্ট্রোল করতে পারে।
• Flexibility: Grid Layout অনেক বেশি নমনীয়, কারণ আপনি যে কোনো জায়গায় সেলগুলো স্পেসিফাই করতে পারেন।
• Responsive Design: CSS Grid এর মাধ্যমে সহজেই রেসপন্সিভ লেআউট তৈরি করা যায়।

Grid Layout এবং Flexbox এর তুলনা

Table এবং Grid Layout এর ব্যবহারে পার্থক্য

• Layout Flexibility: Grid Layout আরও নমনীয় এবং কাস্টমাইজযোগ্য হতে পারে, কারণ এতে একসাথে সারি এবং কলাম নিয়ন্ত্রণ করা যায়। টেবিল সাধারণত ডেটা বা কন্টেন্ট উপস্থাপনের জন্য ব্যবহৃত হয়, কিন্তু Grid Layout ইন্টারেক্টিভ ওয়েব পেজের জন্য উপযুক্ত।
• Complexity: Table Layout সাধারণত কমপ্লেক্স না হলেও Grid Layout অনেক বেশি জটিল এবং প্রোফেশনাল লেআউট তৈরি করার জন্য উপযুক্ত।
• Accessibility: Table Layout এর মাধ্যমে ডেটা উপস্থাপন করা যেতে পারে, তবে Grid Layout সাধারণত বেশি ব্যবহার হয় ওয়েব পেজের লেআউট ডিজাইনে।

উপসংহার

Table এবং Grid Layout ডিজাইন উভয়ই ওয়েব পেজে বিভিন্ন ধরনের কন্টেন্ট উপস্থাপন করতে ব্যবহৃত হয়, তবে তাদের ব্যবহারের উদ্দেশ্য এবং বৈশিষ্ট্য আলাদা। Table Layout সাধারণত ডেটা প্রদর্শনের জন্য ব্যবহৃত হয়, যেখানে Grid Layout ব্যবহার করে আরও লচিল ও প্রোফেশনাল ওয়েব লেআউট তৈরি করা সম্ভব। Web Design এর প্রয়োজন অনুসারে, আপনি এই দুটি টুলের মধ্যে থেকে সঠিক একটি নির্বাচন করতে পারবেন।