HTML এর হাতেখড়ি (পর্ব

সিরিজের পঞ্চম পর্ব — Table তৈরি।

আগের পর্বে আমরা শিখেছি List। আজকে শিখবো Table — সারি ও কলাম আকারে ডেটা সাজানোর জন্য এটা খুবই দরকারি, যেমন রুটিন, দাম তালিকা, রেজাল্ট শিট ইত্যাদি বানাতে।

Table-এর বেসিক গঠন

একটা টেবিল তৈরি করতে চারটা মূল ট্যাগ লাগে:

ট্যাগ	কাজ
`<table>`	পুরো টেবিলের wrapper
`<tr>`	Table Row — একটা সারি
`<td>`	Table Data — একটা সাধারণ সেল
`<th>`	Table Header — হেডার সেল (সাধারণত bold ও center হয়)

একটা সাধারণ টেবিল

<table>
  <tr>
    <th>নাম</th>
    <th>বয়স</th>
  </tr>
  <tr>
    <td>আরিফ</td>
    <td>২৫</td>
  </tr>
  <tr>
    <td>রহিম</td>
    <td>৩০</td>
  </tr>
</table>

ব্রাউজারে এটা দেখাবে এরকম:

নাম	বয়স
আরিফ	২৫
রহিম	৩০

টিপস: খালি চোখে বর্ডার ছাড়া টেবিলের সারি-কলাম বোঝা কঠিন, তাই CSS দিয়ে border দেওয়া হয় (এটা আমরা পরের সিরিজে শিখবো)। শুধু HTML দিয়ে টেবিল বানালে ডিফল্টভাবে কোনো বর্ডার দেখা যায় না।

Table-কে সেমান্টিক ভাবে সাজানো — thead, tbody, tfoot

বড় টেবিলে হেডার, বডি আর ফুটার আলাদা করে চিহ্নিত করার জন্য এই তিনটা ট্যাগ ব্যবহার করা ভালো অভ্যাস:

<table>
  <thead>
    <tr>
      <th>পণ্য</th>
      <th>দাম</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>চাল</td>
      <td>৬০ টাকা</td>
    </tr>
    <tr>
      <td>ডাল</td>
      <td>১২০ টাকা</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>মোট</td>
      <td>১৮০ টাকা</td>
    </tr>
  </tfoot>
</table>

এতে টেবিলের গঠন আরও পরিষ্কার হয়, আর CSS দিয়ে হেডার/ফুটারকে আলাদা স্টাইল দেওয়াও সহজ হয়।

Colspan — কলাম জোড়া লাগানো

যখন একটা সেলকে একাধিক কলামের জায়গা জুড়ে দেখাতে হয়, তখন colspan ব্যবহার হয়:

<table>
  <tr>
    <th colspan="2">ছাত্রের তথ্য</th>
  </tr>
  <tr>
    <td>নাম</td>
    <td>করিম</td>
  </tr>
  <tr>
    <td>রোল</td>
    <td>০১</td>
  </tr>
</table>

ব্রাউজারে দেখাবে:

ছাত্রের তথ্য
নাম	করিম
রোল	০১

Rowspan — সারি জোড়া লাগানো

একইভাবে, একটা সেলকে একাধিক সারির জায়গা জুড়ে দেখাতে rowspan ব্যবহার হয়:

<table>
  <tr>
    <th>দিন</th>
    <th>ক্লাস</th>
  </tr>
  <tr>
    <td rowspan="2">শনিবার</td>
    <td>গণিত</td>
  </tr>
  <tr>
    <td>বিজ্ঞান</td>
  </tr>
</table>

ব্রাউজারে দেখাবে:

দিন	ক্লাস
শনিবার	গণিত
শনিবার	বিজ্ঞান

টিপস: rowspan ব্যবহার করলে যে সারিতে সেলটা "জুড়ে" যাচ্ছে, সেই পরের সারিতে সেই কলামের জন্য আলাদা <td> লেখার দরকার নেই — কারণ উপরের সেলটাই সেই জায়গা দখল করে নিচ্ছে। এই জায়গায় beginner-রা সবচেয়ে বেশি ভুল করে।

Table-এ Caption যোগ করা

টেবিলের একটা শিরোনাম দিতে <caption> ব্যবহার করা যায়:

<table>
  <caption>সাপ্তাহিক রুটিন</caption>
  <tr>
    <th>দিন</th>
    <th>বিষয়</th>
  </tr>
</table>

একটা সম্পূর্ণ উদাহরণ

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <title>Table উদাহরণ</title>
</head>
<body>
  <h1>আমার সাপ্তাহিক রুটিন</h1>

  <table>
    <caption>ক্লাস রুটিন</caption>
    <thead>
      <tr>
        <th>দিন</th>
        <th>সকাল</th>
        <th>বিকাল</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>শনিবার</td>
        <td>গণিত</td>
        <td>বিজ্ঞান</td>
      </tr>
      <tr>
        <td>রবিবার</td>
        <td>ইংরেজি</td>
        <td>বাংলা</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

নিজে চেষ্টা করো

Exercise:

নিজের সাপ্তাহিক ক্লাস রুটিন বা কাজের সময়সূচি একটা টেবিলে বানাও
thead ও tbody ব্যবহার করো
একটা হেডারে colspan ব্যবহার করে দেখো কী হয়
একটা <caption> যোগ করো

পরের পর্বে যা থাকছে

পর্ব ৬-এ আমরা শিখবো Form তৈরি করা — <form>, বিভিন্ন input type, label, button, এবং validation attribute, উদাহরণসহ।

প্রশ্ন থাকলে কমেন্টে জানাতে পারো।

ইলন মাস্কের সম্পদের রহস্য

আমিত্ত্ব কি কোনো স্থির সত্তা, নাকি জটিল গাণিতিক ফাংশন?

বাংলাদেশের প্রেক্ষাপটে প্যারেন্টিং ও এর সীমাবদ্ধতা

রেডিও আবিষ্কারের ইতিহাস: মার্কোনি থেকে ডিজিটাল যুগ পর্যন্ত

দারিদ্র্যের মনস্তাত্ত্বিক ফাঁদ

HTML এর হাতেখড়ি (পর্ব – ৫)