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 title ট্যাগ ও title ট্যাগের ব্যবহার... একটি ওয়েবপেজ তৈরি করার সময় HTML Page এ title বা শিরোনাম  দেয়ার প্রয়োজন হয় এবং এটি থাকে সবার উপরে ট্যাব এর নাম আকারে এর সঠিক ব্যবহারে আপনার কন্টেন্ট গ...
HTML এ div ট্যাগ ও div ট্যাগের ব্যবহার... HTML এ একটি নির্দিষ্ট অংশকে আলাদাভাবে স্টাইল কিংবা ব্লক আকারে তৈরি করবার জন্য সাধারণত div ট্যাগ ব্যবহার করা হয়ে থাকে।  আমরা যখন একটি ওয়েবসাইট ভিজিট কর...
এইচটিএমএল ট্যাগ – html tag ও html attributes... আমাদের আজকের আলোচনার বিষয় এইচটিএমএল ট্যাগ ( html tag ) ও এট্রিবিউট নিয়ে।  এর আগের আর্টিকেল এ আমরা জেনেছিলাম কিভাবে এইচটিএমএল দিয়ে Hello World লিখা যায়...
HTML hr ট্যাগ ও hr ট্যাগের ব্যবহার... সাধারণত HTML hr  ট্যাগ কোন ডকুমেন্ট কিংবা কোন লাইনে ব্যবহার করলে নিচের দিকে লম্ব রেখা তৈরি হয়। hr tag আসলে Horizontal Line কে বুঝায়। অনেক সময় কিছু সাই...
HTML – এইচটিএমএল কি এবং HTML শিখবো কিভাবে... HTML কি এবং HTML শিখবো কিভাবে? HTML একটি web based programing language যা ওয়েব সাইত তৈরি করতে ব্যবহার করা হয় এবং আজকাল মোবাইল এর অনেক এপ্লিকেশন বানাতে...
html ol ul tag ও li tag এর ব্যবহার... HTML এর মধ্যে দুই ধরনের লিস্ট তৈরি করা যায় প্রথমটি হচ্ছে অর্ডারড লিস্ট এবং দ্বিতীয়টি আনঅর্ডারড লিস্ট। আন অর্ডারড লিস্ট হচ্ছে ul ( Unordered list ) এবং...

You may also like...

Leave a Reply

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

error: Content is protected !!