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

aside ট্যাগ ও HTML aside ট্যাগের ব্যবহার... aside ট্যাগ কোন ডকুমেন্ট এর সাথে রিলেটেড বিষয় গুলকে আলাদা রাখবার জন্য ব্যবহার হয়। এক কথায় কোন প্রবন্ধ বা আটিকেল এর সাথে সম্পর্ক যুক্ত বিষয় গুল একটু সা...
MS Word এ Table এর ব্যবহার MS Word এ কাজ করার ক্ষেত্রে টেবিল এর ব্যবহার ব্যপক।  বিভিন্ন বিষয়ে টেবিল বা ছক এর ব্যবহার করতে দেখা যায়।  টেবিলের বিভিন্ন Tools ব্যবহার করে আপনার ইচ্ছ...
html ol ul tag ও li tag এর ব্যবহার... HTML এর মধ্যে দুই ধরনের লিস্ট তৈরি করা যায় প্রথমটি হচ্ছে অর্ডারড লিস্ট এবং দ্বিতীয়টি আনঅর্ডারড লিস্ট। আন অর্ডারড লিস্ট হচ্ছে ul ( Unordered list ) এবং...
HTML u ট্যাগ ও u ট্যাগের ব্যবহার... সাধারণত HTML u ট্যাগ কোন ডকুমেন্টে ব্যবহার করা হলে সে ডকুমেন্টের নিচের দিকে আন্ডারলাইন যুক্ত হয়। আমরা anchor tag ব্যবহার করলে লিংক এর নিচে আন্ডার লাইন...
HTML address ট্যাগ এর ব্যবহার... কোন তথ্য বা নথির যোগাযোগের ক্ষেত্রে address ট্যাগ ব্যবহার করা হয়। আবার ওয়েব পেজে কোন ঠিকান লেখবার জন্যও address ট্যাগ ব্যবহার করা হয়ে থাকে। ধরুন, আপনি...
HTML i ট্যাগ ও i ট্যাগের ব্যবহার... সাধারণত HTML i ট্যাগ ব্যবহার করে যেকোন লেখাকে Italic  বা বাকা করা যায়। অর্থাৎ i ট্যাগ ব্যবহার করলে text গুলো এই ধরনের হয়ে যায় This is html i tag । মাঝ...

You may also like...

Leave a Reply

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

error: Content is protected !!