Lists & Tables

লিস্ট ও টেবিল

Read: ~22 min Easy 5 practice problems Live preview runner

1. Two Different Jobs — Grouping vs Tabulating

So far you have written headings, paragraphs, links, and images — all content that flows one after another. But a huge amount of real content isn't a flowing paragraph at all: it's a group of related items (a menu, a list of ingredients, steps in a recipe) or genuine row-and-column data (a price list, a class schedule, a comparison of specs). HTML gives you two dedicated tools for exactly these two jobs — lists and tables.

এতক্ষণ আপনি heading, paragraph, link ও image লিখেছেন — এই সবগুলোই একটার পর একটা প্রবাহিত হওয়া কনটেন্ট। কিন্তু বাস্তব কনটেন্টের অনেকটাই আসলে সাধারণ paragraph নয় — এটি হয় সম্পর্কিত আইটেমের একটি গ্রুপ (মেনু, উপকরণের তালিকা, রেসিপির ধাপ) অথবা প্রকৃত সারি-কলাম আকারের ডেটা (মূল্য তালিকা, ক্লাস রুটিন, স্পেসিফিকেশন তুলনা)। HTML ঠিক এই দুটো কাজের জন্য দুটি আলাদা টুল দেয় — লিস্ট এবং টেবিল।

By the end of this module you'll know exactly which one to reach for, and — just as importantly — when not to use a table.

2. Unordered Lists — `<ul>` & `<li>`

An unordered list (<ul>) is for items where the order doesn't matter — a shopping list, a set of features, a navigation menu. Each item goes inside its own <li> (list item), and the browser draws a bullet point in front of each one by default.

Unordered list (<ul>) এমন আইটেমের জন্য ব্যবহার করা হয় যেখানে ক্রম গুরুত্বপূর্ণ নয় — একটি shopping list, ফিচারের তালিকা, বা নেভিগেশন মেনু। প্রতিটি আইটেম নিজের <li> (list item)-এর ভেতরে থাকে, এবং ব্রাউজার ডিফল্টভাবে প্রতিটির সামনে একটি bullet point এঁকে দেয়।

unordered-list.html

<h3>Ingredients</h3>
<ul>
  <li>Flour</li>
  <li>Sugar</li>
  <li>Butter</li>
  <li>Eggs</li>
</ul>

3. Ordered Lists & Nested Lists

When the sequence matters — steps in a recipe, ranking in a competition, instructions to follow in order — use an ordered list (<ol>) instead. The browser numbers each <li> automatically: 1, 2, 3... You can also put a whole <ul> or <ol> inside an <li> to create a nested list — useful for sub-steps or sub-categories.

যখন ক্রম গুরুত্বপূর্ণ — রেসিপির ধাপ, প্রতিযোগিতার র‍্যাঙ্কিং, ধাপে ধাপে অনুসরণ করার নির্দেশনা — তখন ordered list (<ol>) ব্যবহার করুন। ব্রাউজার প্রতিটি <li>-কে স্বয়ংক্রিয়ভাবে নম্বর দেয়: ১, ২, ৩... আপনি একটি সম্পূর্ণ <ul> বা <ol> একটি <li>-এর ভেতরে বসিয়ে nested listও তৈরি করতে পারেন — সাব-স্টেপ বা সাব-ক্যাটাগরির জন্য দরকারি।

nested-list.html

<h3>Steps to Publish Your Site</h3>
<ol>
  <li>Write your HTML files</li>
  <li>
    Test locally
    <ul>
      <li>Open in Chrome</li>
      <li>Open in Firefox</li>
    </ul>
  </li>
  <li>Upload via FTP or hosting panel</li>
</ol>

4. Tables — `<table>`, `<tr>`, `<td>`, `<th>`

A table is built from a <table> element containing rows (<tr> — table row). Each row contains cells: <th> (table header — bold, centered by default, marks a column or row label) and <td> (table data — a regular cell). Header cells matter for accessibility too: screen readers announce which header a data cell belongs to.

একটি টেবিল তৈরি হয় <table> এলিমেন্ট দিয়ে, যার ভেতরে থাকে সারি (<tr> — table row)। প্রতিটি সারিতে থাকে সেল: <th> (table header — ডিফল্টভাবে bold ও কেন্দ্রে থাকে, একটি কলাম বা সারির লেবেল বোঝায়) এবং <td> (table data — সাধারণ সেল)। Header সেল accessibility-র জন্যও গুরুত্বপূর্ণ — স্ক্রিন রিডার জানিয়ে দেয় কোন data সেল কোন header-এর অন্তর্গত।

basic-table.html

<table>
  <tr>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Notebook</td>
    <td>৳50</td>
  </tr>
  <tr>
    <td>Pen</td>
    <td>৳10</td>
  </tr>
</table>

5. Structuring a Real Table — `<thead>`, `<tbody>`, `<tfoot>`

For anything beyond a tiny example, wrap your header row in <thead>, your data rows in <tbody>, and any summary row (totals, averages) in <tfoot>. This adds no visible change by default, but it tells browsers, screen readers, and CSS exactly which part of the table is which — and lets you style each section independently.

ছোট উদাহরণের বাইরে বাস্তব টেবিলের জন্য, header সারি <thead>-এর ভেতরে, data সারি <tbody>-এর ভেতরে, এবং সারাংশ সারি (যোগফল, গড়) <tfoot>-এর ভেতরে রাখুন। ডিফল্টভাবে এতে দৃশ্যমান কোনো পরিবর্তন হয় না, কিন্তু এটি ব্রাউজার, স্ক্রিন রিডার ও CSS-কে স্পষ্টভাবে জানিয়ে দেয় টেবিলের কোন অংশ কী — এবং প্রতিটি অংশ আলাদাভাবে স্টাইল করার সুযোগ দেয়।

structured-table.html

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Qty</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Keyboard</td>
      <td>2</td>
      <td>৳1200</td>
    </tr>
    <tr>
      <td>Mouse</td>
      <td>3</td>
      <td>৳400</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>5</td>
      <td>৳3600</td>
    </tr>
  </tfoot>
</table>

Figure 6.1 — একটি সম্পূর্ণ টেবিলের তিনটি অংশ।

6. When NOT to Use a Table

In the early 2000s, developers built entire page layouts — sidebars, columns, navigation bars — using invisible tables. This is now considered a serious anti-pattern. Tables are for genuine tabular data only: information that truly has rows and columns, like a price list or a class schedule. For page layout, you'll use CSS (Flexbox and Grid, coming in Phase 5) instead.

২০০০-এর দশকের শুরুতে ডেভেলপাররা পুরো পেজের লেআউট — সাইডবার, কলাম, নেভিগেশন বার — অদৃশ্য টেবিল দিয়ে তৈরি করতেন। এটি এখন একটি গুরুতর anti-pattern হিসেবে বিবেচিত হয়। টেবিল শুধুমাত্র সত্যিকারের সারি-কলাম আকারের ডেটার জন্য — যেমন মূল্য তালিকা বা ক্লাস রুটিন। পেজ লেআউটের জন্য আপনি CSS (Flexbox ও Grid, Phase 5-এ আসছে) ব্যবহার করবেন।

Anti-pattern Using <table> for page layout breaks accessibility (screen readers announce meaningless "row 1, column 1"), hurts SEO, and makes responsive design far harder than it needs to be.

লেআউটের জন্য <table> ব্যবহার করলে accessibility নষ্ট হয় (স্ক্রিন রিডার অর্থহীন "row 1, column 1" ঘোষণা করে), SEO ক্ষতিগ্রস্ত হয়, এবং responsive design অনেক বেশি কঠিন হয়ে যায়।

7. Where Lists & Tables Show Up (কোথায় ব্যবহৃত হয়)

Navigation menus
প্রায় প্রতিটি nav bar আসলে একটি <ul>।

Step-by-step guides
রেসিপি, টিউটোরিয়াল — <ol> দিয়ে গঠিত।

Price & spec sheets
সত্যিকারের ডেটা টেবিলের সবচেয়ে সঠিক ব্যবহার।

Schedules & timetables
ক্লাস রুটিন, ট্রেনের সময়সূচি।

Feature comparisons
প্ল্যান তুলনা, প্রোডাক্ট স্পেসিফিকেশন।

Checklists & FAQs
To-do তালিকা এবং ধাপে ধাপে নির্দেশনা।

Key insight Ask "is this really rows and columns of related data?" If yes, use a table. If it's just a group of related items, use a list — even if it visually looks like columns, CSS can arrange a list that way.

নিজেকে জিজ্ঞেস করুন — "এটা কি সত্যিই সারি-কলাম আকারের সম্পর্কিত ডেটা?" হ্যাঁ হলে টেবিল ব্যবহার করুন। যদি এটা শুধু সম্পর্কিত আইটেমের একটি গ্রুপ হয়, তাহলে লিস্ট ব্যবহার করুন — এমনকি দেখতে কলামের মতো লাগলেও CSS দিয়ে লিস্টকে সেভাবে সাজানো যায়।

8. Glossary (শব্দকোষ)

Tag	Meaning	বাংলায়
`<ul>`	Unordered list — bulleted, order doesn't matter.	Unordered list — bullet-যুক্ত, ক্রম গুরুত্বপূর্ণ নয়।
`<ol>`	Ordered list — numbered, order matters.	Ordered list — নম্বরযুক্ত, ক্রম গুরুত্বপূর্ণ।
`<li>`	List item — one entry in a ul or ol.	List item — ul বা ol-এর একটি এন্ট্রি।
`<table>`	Wraps a full table of rows and cells.	সারি ও সেলসহ পুরো টেবিলকে মোড়ায়।
`<tr>`	Table row.	টেবিলের একটি সারি।
`<th>`	Table header cell — bold, marks a label.	Table header cell — bold, একটি লেবেল বোঝায়।
`<td>`	Table data cell.	Table data cell।
`<thead>`/`<tbody>`/`<tfoot>`	Groups header, body, and footer rows.	Header, body ও footer সারিকে গ্রুপ করে।

9. Practice Problems

Every problem has a Show Answer button. Try the problem yourself first, then check.

প্রতিটি প্রশ্নের সাথে Show Answer বাটন রয়েছে। প্রথমে নিজে চেষ্টা করুন, তারপর উত্তর মিলিয়ে নিন।

Write an unordered list of your three favorite programming languages.

আপনার পছন্দের তিনটি প্রোগ্রামিং ভাষার একটি unordered list লিখুন।
✨ Show Answer (উত্তর দেখুন)
ans1.html
```
<ul>
  <li>JavaScript</li>
  <li>Python</li>
  <li>HTML & CSS</li>
</ul>
```
Write an ordered list of the first four steps to make tea, with one nested sub-step under step 2.

চা বানানোর প্রথম চারটি ধাপের একটি ordered list লিখুন, যেখানে দ্বিতীয় ধাপের নিচে একটি nested sub-step থাকবে।
✨ Show Answer (উত্তর দেখুন)
ans2.html
```
<ol>
  <li>Boil water</li>
  <li>
    Add tea leaves
    <ul>
      <li>Use 1 spoon per cup</li>
    </ul>
  </li>
  <li>Wait 3 minutes</li>
  <li>Add milk & sugar</li>
</ol>
```
Build a table with a header row (Name, Age) and two data rows of your own choosing.

একটি header সারি (Name, Age) এবং আপনার পছন্দমতো দুটি data সারি সহ একটি টেবিল তৈরি করুন।
✨ Show Answer (উত্তর দেখুন)
ans3.html
```
<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Rahim</td>
    <td>22</td>
  </tr>
  <tr>
    <td>Karim</td>
    <td>25</td>
  </tr>
</table>
```
Rewrite your Problem 3 table using thead and tbody instead of plain tr rows.

Problem 3-এর টেবিলটি plain tr সারির বদলে thead ও tbody ব্যবহার করে পুনরায় লিখুন।
✨ Show Answer (উত্তর দেখুন)
ans4.html
```
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Rahim</td>
      <td>22</td>
    </tr>
    <tr>
      <td>Karim</td>
      <td>25</td>
    </tr>
  </tbody>
</table>
```
In two or three sentences, explain why tables should not be used to build page layouts.

দুই বা তিন বাক্যে ব্যাখ্যা করুন কেন পেজ লেআউট তৈরির জন্য টেবিল ব্যবহার করা উচিত নয়।

✨ Show Answer (উত্তর দেখুন)

Answer: Tables built for layout confuse screen readers, which announce meaningless "row, column" information instead of real content structure. They also hurt SEO because search engines expect tables to contain actual tabular data, and they make responsive design much harder than modern CSS layout tools like Flexbox and Grid.

লেআউটের জন্য বানানো টেবিল স্ক্রিন রিডারকে বিভ্রান্ত করে, যা প্রকৃত কনটেন্ট গঠনের বদলে অর্থহীন "row, column" তথ্য ঘোষণা করে। এটি SEO-ও ক্ষতিগ্রস্ত করে, কারণ সার্চ ইঞ্জিন আশা করে টেবিলে সত্যিকারের tabular ডেটা থাকবে, এবং এটি responsive design-কে Flexbox বা Grid-এর মতো আধুনিক CSS টুলের চেয়ে অনেক কঠিন করে তোলে।

Summary — Module 06

Use lists (<ul>/<ol>) to group related items, with nesting for sub-items. Use tables (<table>, <tr>, <td>, <th>) only for genuine row-and-column data, structured with <thead>, <tbody>, and <tfoot>. Never use a table to build page layout — that job belongs to CSS.

সম্পর্কিত আইটেম গ্রুপ করতে লিস্ট (<ul>/<ol>) ব্যবহার করুন, প্রয়োজনে nesting সহ। সত্যিকারের সারি-কলাম আকারের ডেটার জন্যই শুধু টেবিল ব্যবহার করুন, যা <thead>, <tbody> ও <tfoot> দিয়ে গঠিত হবে। পেজ লেআউট তৈরির জন্য কখনও টেবিল ব্যবহার করবেন না — সেই কাজ CSS-এর।

Next Module → Forms & User Input — সত্যিকারের মানুষের কাছ থেকে ডেটা সংগ্রহ করা শেখা।

Previous: Images & Media Next: Forms & User Input