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>

Try it Now

এর আগে আমরা 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 hr ট্যাগ ও hr ট্যাগের ব্যবহার... সাধারণত HTML hr  ট্যাগ কোন ডকুমেন্ট কিংবা কোন লাইনে ব্যবহার করলে নিচের দিকে লম্ব রেখা তৈরি হয়। hr tag আসলে Horizontal Line কে বুঝায়। অনেক সময় কিছু সাই...
HTML address ট্যাগ এর ব্যবহার... কোন তথ্য বা নথির যোগাযোগের ক্ষেত্রে address ট্যাগ ব্যবহার করা হয়। আবার ওয়েব পেজে কোন ঠিকান লেখবার জন্যও address ট্যাগ ব্যবহার করা হয়ে থাকে। ধরুন, আপনি...
ওয়েবসাইটে গুগল ম্যাপ যোগ করবো কিভাবে... অনেক সময় কিছু কিছু ওয়েবসাইটে ভিজিট করার সময় আমরা Google Map দেখে থাকি। আমরা অনেকেই জানি Google Map ব্যবহার করে রোড়ম্যাপ, লোকেশন ট্র্যাক সহ অনেক ধরনের ...
HTML datalist ট্যাগ ও HTML datalist এর ব্যবহার... datalist ট্যাগ একটি input ট্যাগের উপাদান, এটির পূর্বনির্ধারিত বিকল্পগুলির একটি তালিকাকে নির্দিষ্ট করে থাকে। অনেক সময় কিছু কিছু সাইটে বা ফর্মে দেখা যায়...
HTML button ট্যাগ ও html button ট্যাগের ব্যবহার... সাধারণত HTML button ট্যাগ একটি ক্লিকযোগ্য বাটনকে নির্ধারণ করে থাকে কিংবা যে বাটনে ক্লিক করা হয়ে থাকে তাক বাটন বলে। আবার বাটন ট্যাগ ব্যবহার করে radio ব...
HTML label ট্যাগ ও html label ট্যাগের ব্যবহার... label ট্যাগ একটি input elements জন্য একটি লেবেলকে নির্ধারণ করে থাকে। label ট্যাগ form, input ট্যাগ এর মধ্যে ব্যবহার করা হয়ে থাকে। label ট্যাগ ইনপুট id...

You may also like...

Leave a Reply

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

error: Content is protected !!