Html দিয়ে কিভাবে Table তৈরি করবেন

HTML Table সাধারণত একটি ওয়েবপেজে ব্যাবহার করা হয়। Table ব্যাবহার করে আমরা অনেক ডাটা কলাম সারিবব্ধ ভাবে সাজাতে পারি। এইচটিএমএল টেবিল তৈরি করার আগে আপনাকে এইচটিএমএল ট্যাগ সম্পর্কে জানতে হবে। এইচটিএমএল ট্যাগ না জানা থাকলে আপনি টেবিল তৈরি করা যাবে না। চলুন দেখে নেই কিভাবে এইচটিএমএল টেবিল ট্যাগ ব্যাবহার করা হয়।

প্রথমে আমরা html table tag এর সাথে পরিচিত হয়ে নেই।  সাধারনত টেবিল তৈরি করতে চারটি ট্যাগ ব্যাবহার করা হয়ে থাকে।

  1. table tag ব্যাবহার করা হয় পূরো table tag কে এর মধ্যে রাখার জন্য।
  2. tr tag ব্যাবহার করা হয় table এর রো বা সারিকে দেখানোর জন্য ।
  3. th tag ব্যাবহার করা হয় table এর প্রতিটি কলামকে হেডিং হিসাবে দেখার জন্য।
  4. td tag ব্যাবহার করা হয় table এর ডাটা গুলোকে লেখার জন্য।

HTML Table

নিচে একটি টেবিল এর পুরো কোড দেয়া হল

<table> 
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Imran</td>
    <td>Shariar</td>
    <td>26</td>
  </tr>
  <tr>
    <td>Joy</td>
    <td>Hossain</td>
    <td>45</td>
  </tr>
  <tr>
    <td>Jony</td>
    <td>Khan</td>
    <td>54</td>
  </tr> 
</table>

এর আগে আমরা html  এর সিম্পল কোড নিয়ে আলোচনা করেছি । উপরের কোড টুকুকে যদি আমরা প্রপার HTML এ লিখি তো সেটা হবে নিচের কোডের মতো  ।

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Table data</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <table> 
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Imran</td>
        <td>Shariar</td>
        <td>26</td>
      </tr>
      <tr>
        <td>Joy</td>
        <td>Hossain</td>
        <td>45</td>
      </tr>
      <tr>
        <td>Jony</td>
        <td>Khan</td>
        <td>54</td>
      </tr> 
    </table>
</body>
</html>

উপরের কোড টুকু Sublime text কিংবা যেকোন কোড এডিটরে  বসিয়ে নিন। বসানো হয়ে গেলে সেগুলোকে সেভ করে নিন। সেভ করার পর যেকোন ব্রাউজারে রান করুন।  আপনার ডাটা গুলি নিচের ছবির মতো দেখা যাবে।

আসলে প্রথম কোড টাকেই আমরা বডি ট্যাগ এর মধ্যে নিয়ে নিয়েছি । এটি plane html কোড , তাই বডার নেই । CSS দিয়ে সহজেই বডার দেয়া যায় । তবে আপনি চাইলে html দিয়েও বডার এড করতে পারেন । সেক্ষেত্রে <table> tag এর থাকে একটি Attribute এড করতে হবে আর সেটি হল border এবং এর ভেলু হিসেবে আপাতত 1 দিতে পারেন । তো border attribute এড করলে <table> এর পার্ট টি হয়ে যাবে নিচের মতো

<table border="1">

তো এবার উপরের টেবিলের পুরো কোড এ এইটি এড করে দেখুন কি হয় 🙂 ভালো থাকবেন আর সাথেই থাকবেন । আরো নতুন নতুন html টিউটোরিয়ার নিয়ে আসছি অচিরেই ।

Related Post

HTML address ট্যাগ এর ব্যবহার... কোন তথ্য বা নথির যোগাযোগের ক্ষেত্রে address ট্যাগ ব্যবহার করা হয়। আবার ওয়েব পেজে কোন ঠিকান লেখবার জন্যও address ট্যাগ ব্যবহার করা হয়ে থাকে। ধরুন, আপনি...
HTML এ বাংলা লিখবো কিভাবে... HTML এ বাংলা লিখলেই বাংলা আসেনা অনেক ওয়েব ব্রাউজারে কারন আমরা ওয়েব পেজে যে বাংলা লিখি সেটি ইউনিকোড ভিত্তিক । বাংলা লিখবার জন্য আসলে html এ character s...
এইচটিএমএল ট্যাগ – html tag ও html attributes... আমাদের আজকের আলোচনার বিষয় এইচটিএমএল ট্যাগ ( html tag ) ও এট্রিবিউট নিয়ে।  এর আগের আর্টিকেল এ আমরা জেনেছিলাম কিভাবে এইচটিএমএল দিয়ে Hello World লিখা যায়...
HTML – এইচটিএমএল কি এবং HTML শিখবো কিভাবে... HTML কি এবং HTML শিখবো কিভাবে? HTML একটি web based programing language যা ওয়েব সাইত তৈরি করতে ব্যবহার করা হয় এবং আজকাল মোবাইল এর অনেক এপ্লিকেশন বানাতে...
HTML comment ট্যাগ কিভাবে ব্যবহার করবেন... Comment অর্থ মন্তব করা । HTML কোডের মন্তব লিখতে comment ট্যাগের ব্যবহার হয়ে থাকে।   html comment  ট্যাগ ব্রাউজারে প্রদর্শিত হয় না কিংবা দেখা যায় না। আ...

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

*