Be a Trainer! Share your knowledge.
Home » Uncategorized » [Hot post] কিভাবে একটি সম্পূর্ণ কালারফুল টেবিল তৈরি করবেন। কেও মিস করবেন না।

3 months ago (Nov 25, 2017)

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

Category: Uncategorized Tags: by


শুরু করছি আজকের টিউন। আশা করছি সবাই ভালই আছেন। আমার 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 NameLast NameAge
    NaimSdq20
    AlaminHossen19
    RaselHossen18

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

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

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

    ফেসবুকে আমি

  • Report

    About Post: 22

    Naim sdq

    ট্রিকবিডিতে শিখতে এবং শিখাতে এসেছি।

    50 responses to “[Hot post] কিভাবে একটি সম্পূর্ণ কালারফুল টেবিল তৈরি করবেন। কেও মিস করবেন না।”

    1. . (Contributor) says:

      ভাবছিলাম পোস্টটা করব। বাট আপনিই করে দিলেন।???

    2. Sabbir Hosen BBS___ sabbirbbs (Contributor) says:

      ok.offline try kore dhekbo…

    3. Naim sdq Trickbd_sdq (Author) says:

      অফলাইনে ট্রাই করে তারপর অনলাইনে দেবেন।

    4. SagorSrkian SagorSrkian (Author) says:

      Bro Ami BOX এর ভিতর কিভাবে কোড দিবো কিভাবে?

    5. Naim sdq Trickbd_sdq (Author) says:

      {textarea cols=”25″ rows”20″} code{textarea}
      Nt: {=

    6. Md. Alamin Al-amin (Author) says:

      ভালো পোষ্ট অনেকের কাজে দিবে

    7. Mr. Rocky (Contributor) says:

      কাজে আসবে ধন্যবাদ

    8. Mr. Rocky (Contributor) says:

      vai offline e kivave try korbo?/
      kotai try korbo kono app hole link
      den.

    9. Naim sdq Trickbd_sdq (Author) says:

      এটা নিয়ে ট্রিকবিডিতে পোষ্ট আছে দেখুন।

    10. MD Kamrul Hasan MD Kamrul Hasan (Contributor) says:

      কোড গুলো কি আপনি লিখেছেন??

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

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

      • Naim sdq Trickbd_sdq (Author) says:

        ভাই HTML এর সঠিক নিয়ম হল টেবিলের অংশে আইডির ব্যবহার এবং CSS অংশে তার ডিজাইন। আর প্রথমে ক্লোজ ট্যগ এবং শেষে স্টার্ট ট্যাগ টি দেওয়া হয় নি। এটা ট্রিকবিডি Automatic দিয়েছে এবং কোড টাকেও ভুল করেদিয়েছে।

    11. MD Kamrul Hasan MD Kamrul Hasan (Contributor) says:

      css এর মধ্যে . ট্যাগ

      • Naim sdq Trickbd_sdq (Author) says:

        CSS এর মধ্যে কেন আমি ট্যাগ দেব। এটা ট্রিকবিডি অটোমেটিক দিয়েছে। কেননা। ট্রিকবিডি কোড সাপোর্ট করে না।

      • Naim sdq Trickbd_sdq (Author) says:

        CSS এর মধ্যে কখন ট্যাগ আসে এটা আপনি কেবল পোষ্ট করলেই বুঝবেন। তার আগেই নয়। কারও সম্পর্কে না জেনে কথা বলাটা নির্বুদ্ধির এবং বোকামির লক্ষণ।

    12. Naim sdq Trickbd_sdq (Author) says:

      আমার সম্পূর্ণ কোড টি Link এ আছে দেখুন।

      • MD Kamrul Hasan MD Kamrul Hasan (Contributor) says:

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

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

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

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

        • Naim sdq Trickbd_sdq (Author) says:

          আপনার এটা ভাবা উচিৎ ছিল যে কেও CSS বা অন্য Structure অংশে ভুল করেও আপাতত Br ট্যাগ কেও ব্যবহার করবে না।

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

    13. Najmul Nazu Najmul Nazu (Author) says:

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

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

      • Naim sdq Trickbd_sdq (Author) says:

        আপনার মতামতের জন্য ধন্যবাদ। কিন্তু এই কোড কোথাও থেকে কপি না। ক্ষমতা থাকলে লিংক দিন। নাজমুল নাজু আপনি মনে হয় কপি বাজ। তাই এইরকম ভাবছেন। কারএ সম্পর্কে না জেনে কথা বলবেন না।

    14. MD_NESHAD NESHAD1122 (Author) says:

      Post ar kicui bujlam na,,,,,

    15. MD_NESHAD NESHAD1122 (Author) says:

      HTML ar kicui bujina,,,,bro…..

    Leave a Reply