শুরু করছি আজকের টিউন। আশা করছি সবাই ভালই আছেন। আমার HSC পরিক্ষার জন্য নিয়মিত পোষ্ট করতে পারছি না। আজকে একটু ফ্রি হয়েছি। আজ আমি আপনাদের দেখাব কিভাবে একটি সুন্দর কালারফুল HTML টেবিল তৈরি করবেন । তো চলুন শুরু করি ।

প্রথমে ডেমো টি দেখে নিন।

Table নিয়ে কিছু কথাঃ-

আসলে আমি কোড দিয়ে দিলাম, আপনারা কপি করে কাজ করলেন। এতে শুধু কাজটা হবে শেখা হবে না। আর ট্রিকবিডিতে সবাই শিখতেই আসে।

  • একটি পূর্নাঙ্গ Table এর তিনটি অংশ।

    ? Style অর্থাৎ CSS

    ?Table Headings And

    ? Table Data.

    ————————————————————————

  • ? Style অর্থাৎ CSS

  • এ অংশটি আপনার টেবিলের বিভিন্ন বর্ডার, প্যাডিং, Color, Background-color, Font color, Size ইত্যাদির কাজ করে।

  • ?Table Headings

  • এ অংশটি আপনার টেবিলের হেডিং। হেডিং হচ্ছে টেবিলের শিরোনাম বা উপরের অংশ। এখানে যে বিষয় রাখবেন তাই-ই হেডিং।

  • ? Table Data

  • Table Data হচ্ছে, একটি টেবিলের হেডিং এর অধিনে যা রাখা হয় বা থাকে তাই-ই Table ডেটা। অর্থাৎ হেডিং এর ক্ষুদ্রতম অংশ।

    হয়ত কিছুটা ধারনা দিতে পেরেছি, টেবিল সম্পর্কে। এবার আমরা টেবিল তৈরি করব। যেহেতু এটা ভিডিও টিউটোরিয়াল না। আপনারা কোড কপি করুন। এবং ট্রিক্স অনুযায়ী Edition করুন।

    প্রথমে কোডটি কপি করুনঃ-
    আজ মেজাজ অনেক গরম হইছে সামান্য একটা পোষ্ট করতে গিয়ে। ইচ্ছা করছে পোষ্ট করা বাদ দেই। একটা কোড ঠিকমত সাপোর্ট করে না ট্রিকবিডিতে। ডেভেলপার রা এগুলা ঠিক করতে পারেন না??? এমনি পরিক্ষা, সময় অনেক নষ্ট হল। যা হোক ট্রিকবিডির বেশি অংশই এখন Freebasics Use করেন। তাই কোডটি কোথাও আপলোড না করেই ফ্রি লিংক দিলাম আপনারা কপি করুন এখান থেকে ।

    Nt: দুই জায়গায় < এর পরিবর্তে + দেওয়া হয়েছে চেন্জ করুন। কোড এখান থেকে তবুও সমস্যা হতে পারে।

    এটা টেবিলের CSS অংশ। আপনারা এখানে টেবিলের বিভিন্ন বর্ডার, প্যাডিং, Color, Background-color, Font color, Size ইত্যাদি দিবেন। কোড অনুযায়ী ট্যাগ গুলো দিবেন। এটি আপনার টেবিল সাজানোর অংশ।

    কেও ভাবছেন, সম্পূর্ণ কিভাবে হল? আমি তো ট্যাগ জানিনা বা করতে পারি না। দেখুন এক্ষেত্রে আমার কিছুই করার নেই। আপনাকে শিখতে হবে। যাদের এই বিষয়গুলা সম্পর্কে একটু ধারনা আছে তারা আমার এই ট্রিক্সটি পড়ে ভালভাবে এবং আমার চাইতে ভালভাবে নিজে ইডিট করে তৈরি করতে পারবে।

    এক্ষেত্রে আপনাকে জানতে হবে। শিখতে হবে। তা না হলে হবে না। আমি ভাবছিলাম মৌলিক বিষয়গুলা নিয়ে ধারাবাহিক পোষ্ট করব। কিন্তু একজন HTML নিয়ে শুরু থেকে শুরু করেছেন। তাই আমি Stoped. কিন্তু এখন তার আর পোষ্ট দেখা যায় না। হয়ত HTML নিয়ে পোষ্ট লিখছেন! যা হোক ছাড়ুন এ বিষয়।

    এবার এ অংশটি হচ্ছে আপনার টেবিলের হেডিং। অর্থাৎ টেবিলের মূল বিষয় বা শিরোনাম। এখানে আপনি আপনার মূল বিষয়গুলা রাখবেন। যেমনঃ- SL, Name, Age, Roll ect. আমি Fast Name, Last Name, Age দিয়েছি।
    এই জন্য আপনাকে প্রত্যেকটি বিষয় {th} ট্যাগের মধ্যে দিতে হবে। Th অর্থাৎ T= Table, H= Heading .
    মনে রাখবেন এটি ডাবল ট্যাগ তাই HTML এর নিয়ম অনুযায়ী ডাবল ট্যাগ গুলো শুরু করলে / দিয়ে শেষ করতে হয়। তাই ক্লোজ করবেন। এখানে প্রশ্ন হতে পারে। কিভাবে হেডিং এর সংখ্যা নির্ধারন করব? তিনটি না পাঁচটি? এজন্য যতটি th Tag ব্যবহার করবেন আপনার হেডিং ততটি হবে।

    এবার এ অংশটি হচ্ছে আপনার টেবিলের ডাটা বা উপাত্ত। হেডিং এর অন্তর্ভু্ক্ত বিষয় গুলো এখানে দিতে হবে। যেমনঃ- নাম হেডিং এর অধীনে নাঈম, আলামিন, রাসেল, যদু, মধু, কদু ইত্যাদি। এগুলা হচ্ছে টেবিল ডাটা। আশাকরি বুঝেছেন। আর হ্যাঁ যতগুলো ডেটা থাকবে এগুলা {td} tag এর মধ্যে দিতে হবে। Td অর্থাৎ T= Table, D= Data.

    Table

    এই কোড টি ব্যবহার করে নিচের মত টেবিল বানাতে পারবেন।

    First Name Last Name Age
    Naim Sdq 20
    Alamin Hossen 19
    Rasel Hossen 18

    বুঝতে পারছি না আপনারা কতটুকু বুঝেছেন। পরিক্ষার ব্যস্ততার জন্য হয়ত ভালভাবে বুঝিয়ে লিখতে পারি নি। আমার টিউটোরিয়াল ভালভাবে বুঝে পড়লে, ভিডিও দেখার প্রয়োজন পড়বে না। ভাবছি HTML এর মৌলিক বিষয় গুলো নিয়ে পোষ্ট করব কি না? আপনাদের বেশি পরিমানে সাড়া পেলে করব। কেননা HTML এর বিষয়গুলা লিখে বোঝাতে অনেক ঝামেলা এবং সময়ের ব্যপার। সাড়া পেলে করব।

    আজকের টিউটোরিয়াল এর আপনারা কোথাও না বুঝলে কমেন্ট করুন। HTML এর কোন বিষয় বুঝতে চাইলে আমাকে বলুন। সম্ভব হলে বোঝানোর চেষ্টা করব।

    লেখাটি ভাল লাগলে অবশ্যই কমেন্ট করুন। আপনাদের কমেন্ট আমার ভাল লাগে তাই প্লিজ কমেন্ট করুন।
    ধন্যবাদ সবাইকে ট্রিকবিডির সাথেই থাকুন।

    ফেসবুকে আমি

  • 51 thoughts on "[Hot post] কিভাবে একটি সম্পূর্ণ কালারফুল টেবিল তৈরি করবেন। কেও মিস করবেন না।"

    1. Shadin . Contributor says:
      ভাবছিলাম পোস্টটা করব। বাট আপনিই করে দিলেন।???
      1. Naim sdq Trickbd_sdq Author Post Creator says:
        হ্যা ভাই কিন্তু মেজাজ তো গরম!
      2. Naim sdq Trickbd_sdq Author Post Creator says:
        আপনার নাম স্বাধিন ভাই ইডিট করে দিয়েছে।
        1. Shadin জিসান Contributor says:
          আচ্ছা,,,, একটি প্রশ্ন আপনি কিভাবে জানলেন?
            1. Shadin জিসান Contributor says:
              কিভাবে জানলেন নাম যে িডডিট করে দিয়েছে স্বাধীন ভাই????
            2. Naim sdq Trickbd_sdq Author Post Creator says:
              অফিসিয়াল গ্রুপে আমাদের চ্যাট হচ্ছিল। সেখানে প্রফাইল ইডিট এর বিষয়টা তুলে ধরা হয়েছিল।
              আপনি চাইলে আমাদের গ্রুপে জয়েন করতে পারেন।
            3. Mehedi Islam Ripon Mehedi Islam Ripon Author says:
              ভাই আপনার fb link প্লিজ???
      1. Naim sdq Trickbd_sdq Author Post Creator says:
        ধন্যবাদ ভাই
    2. Sabbir Hosen BBS___ sabbirbbs Contributor says:
      ok.offline try kore dhekbo…
      1. Naim sdq Trickbd_sdq Author Post Creator says:
        অবশ্যই
      2. Naim sdq Trickbd_sdq Author Post Creator says:
        আরেকটা কথা পোষ্ট এ দেওয়া কোডে কাজ নাও করতে পারে, তাই ওই ফ্রি লিংক টা কপি করে ওখান থেকে কোড টি নিন। ১০০% কাজ করবে। আরও ডিজাইন প্রয়োজন হলে বলুন।
      3. Mr. Rocky Contributor says:
        vai offline e kivave try korbo?/kotai try korbo kono app hole link den.
        1. Sabbir Hosen BBS___ sabbirbbs Contributor says:
          99% android phone a html viewer thake.code gulo diye .html file make kore.html viewer diye open korun.achara vidmate o aro browser diye ao open hoi…
    3. Naim sdq Trickbd_sdq Author Post Creator says:
      অফলাইনে ট্রাই করে তারপর অনলাইনে দেবেন।
    4. Naim islam Naim islam Contributor says:
      hmmm,valo post
      1. Naim sdq Trickbd_sdq Author Post Creator says:
        ধন্যবাদ
    5. ‌ SagorSrkian Author says:
      Bro Ami BOX এর ভিতর কিভাবে কোড দিবো কিভাবে?
      1. Naim sdq Trickbd_sdq Author Post Creator says:
        Bro Note Support করল না। Inbox এ আসতে হবে।
    6. Naim sdq Trickbd_sdq Author Post Creator says:
      {textarea cols=”25″ rows”20″} code{textarea}
      Nt: {=
      1. Naim sdq Trickbd_sdq Author Post Creator says:
        অনেক ধন্যবাদ।
    7. Md. Alamin Al-amin Author says:
      ভালো পোষ্ট অনেকের কাজে দিবে
      1. Naim sdq Trickbd_sdq Author Post Creator says:
        hmm ধন্যবাদ
      2. Naim sdq Trickbd_sdq Author Post Creator says:
        তোমার কাজে দেয় নি।
    8. Mr. Rocky Contributor says:
      কাজে আসবে ধন্যবাদ
      1. Naim sdq Trickbd_sdq Author Post Creator says:
        আপনাকেও ধন্যবাদ।
    9. Mr. Rocky Contributor says:
      vai offline e kivave try korbo?/
      kotai try korbo kono app hole link
      den.
      1. Sabbir Hosen BBS___ sabbirbbs Contributor says:
        99% android phone a html viewer thake.code gulo diye .html file make kore.html viewer diye open korun.achara vidmate o aro browser diye ao open hoi…
        1. Mr. Rocky Contributor says:
          ধন্যবাদ।
    10. Naim sdq Trickbd_sdq Author Post Creator says:
      এটা নিয়ে ট্রিকবিডিতে পোষ্ট আছে দেখুন।
    11. MD Kamrul Hasan MD Kamrul Hasan Contributor says:
      কোড গুলো কি আপনি লিখেছেন??

      কথাটা বলার কারণ, যে HTML & CSS এর বেসিক ও জানে সে আর যাই করোক CSS এর মধ্যে ট্যাগ আর ট্যাগ ব্যবহার করবে না। আর কোডের প্রথমে ক্লোজ ট্যাগ আর শেষে ওপেন ট্যাগ দিবেনা।

      আমি নিশ্চিত কোড গুলো কপি কোড।

      1. Naim sdq Trickbd_sdq Author Post Creator says:
        ভাই HTML এর সঠিক নিয়ম হল টেবিলের অংশে আইডির ব্যবহার এবং CSS অংশে তার ডিজাইন। আর প্রথমে ক্লোজ ট্যগ এবং শেষে স্টার্ট ট্যাগ টি দেওয়া হয় নি। এটা ট্রিকবিডি Automatic দিয়েছে এবং কোড টাকেও ভুল করেদিয়েছে।
        1. Naim sdq Trickbd_sdq Author Post Creator says:
          কপালে চোখ থাকলেই কেবল CSS অংশের Screenshoot দেখুন। তাছাড়া দেখার দরকার নেই।
    12. MD Kamrul Hasan MD Kamrul Hasan Contributor says:
      css এর মধ্যে . ট্যাগ
      1. Naim sdq Trickbd_sdq Author Post Creator says:
        CSS এর মধ্যে কেন আমি ট্যাগ দেব। এটা ট্রিকবিডি অটোমেটিক দিয়েছে। কেননা। ট্রিকবিডি কোড সাপোর্ট করে না।
      2. Naim sdq Trickbd_sdq Author Post Creator says:
        CSS এর মধ্যে কখন ট্যাগ আসে এটা আপনি কেবল পোষ্ট করলেই বুঝবেন। তার আগেই নয়। কারও সম্পর্কে না জেনে কথা বলাটা নির্বুদ্ধির এবং বোকামির লক্ষণ।
    13. Naim sdq Trickbd_sdq Author Post Creator says:
      আমার সম্পূর্ণ কোড টি Link এ আছে দেখুন।
      1. MD Kamrul Hasan MD Kamrul Hasan Contributor says:
        আমি আন্তরিক ভাবে দুংখিত। আসলে ট্রিকবিডিতে প্রায়ই কপি পোস্ট চোখে পড়ে আর কপি পোস্ট দেখতে দেখতে মেজাজ গরম হয়ে থাকে।

        তা ছাড়া আমি কোডিং অনেক ভালবাসি আর এই কোডিং ভুল দেখে মন্তব্য না করে পারলাম না।

        কিন্তু আমি যখন কমেন্টে ট্যাগ গুলো লিখে কমেন্ট করেছিলাম তখন অনুবভ করতে পেরেছিলাম সমস্যা ট্রিকবিডিরই হবে হয়ত।

        আমার ভুলের জন্য আমি আবারও ক্ষমা চাচ্ছি। ক্ষমা করবেন।

        1. Naim sdq Trickbd_sdq Author Post Creator says:
          আপনার এটা ভাবা উচিৎ ছিল যে কেও CSS বা অন্য Structure অংশে ভুল করেও আপাতত Br ট্যাগ কেও ব্যবহার করবে না।

          আপনার যদি HTML সম্পর্কে এতটুকু ধারনা থাকে তবে Br এর অর্থ নিশ্চই বুঝেন। CSS এ ব্রেক কেন দিব???

    14. Najmul Nazu Najmul Nazu Author says:
      পোস্ট ভালো তবে কপি নয় সেটা ঠিক না । আপনি কোডটি হুবহু w3school এর থেকে কপি করার পর ইডিট করছেন । পারেনও বটে ।

      তবে আপনার আর একটু বিস্তারিত বলা উচিৎ ছিল । কোড কী দিয়ে ইডিট করবে, কোথায় চেক করবে এ ব্যাপারে 🙂

      1. Naim sdq Trickbd_sdq Author Post Creator says:
        আপনার মতামতের জন্য ধন্যবাদ। কিন্তু এই কোড কোথাও থেকে কপি না। ক্ষমতা থাকলে লিংক দিন। নাজমুল নাজু আপনি মনে হয় কপি বাজ। তাই এইরকম ভাবছেন। কারএ সম্পর্কে না জেনে কথা বলবেন না।
    15. MD_ NESHAD✅ NESHAD1122 Author says:
      Post ar kicui bujlam na,,,,,
      1. Naim sdq Trickbd_sdq Author Post Creator says:
        মন দিয়ে পড়ুন।
    16. MD_ NESHAD✅ NESHAD1122 Author says:
      HTML ar kicui bujina,,,,bro…..
      1. Naim sdq Trickbd_sdq Author Post Creator says:
        হয়ত এই কারনেই এই সমস্যা।

    Leave a Reply