টেবিল ট্যাগ হল HTML এর একটি অবিচ্ছেদ্য অংশ এবং আমরা জোর দিই যে তাদের মধ্যে একটি পুঙ্খানুপুঙ্খ ভিত্তি পাওয়া কতটা গুরুত্বপূর্ণ৷ একটি জাদু সূত্র রয়েছে যা আপনাকে শুরু থেকেই সফল ক্রস-ব্রাউজার টেবিল লিখতে সক্ষম করে এবং এই টিউটোরিয়ালটি আপনাকে এই জাদু সূত্রের পিছনে নীতি এবং কৌশল শেখায়।
একটি প্রয়োজনীয় দক্ষতা
আপনি যদি সফল ক্রস-ব্রাউজার ওয়েব পৃষ্ঠাগুলি তৈরি করতে চান তবে সঠিকভাবে টেবিল তৈরি করতে শেখা একটি অত্যন্ত প্রয়োজনীয় দক্ষতা। তবুও অনেক লোক যারা এইচটিএমএল শিখছে এই বিশেষ বাধায় হোঁচট খায় কারণ তাদের টেবিলগুলি মোটেও কাজ করবে না বা তারা একটি ব্রাউজারে কাজ করবে বলে মনে হবে কিন্তু অন্য ব্রাউজারে ভিন্নভাবে আচরণ করবে।
এই সমস্যার জন্য সাধারণত দুটি প্রাথমিক কারণ থাকে। প্রথম কারণ হল তারা এইচটিএমএল টেবিল ট্যাগ সিনট্যাক্সের কিছু শিখলেও এইচটিএমএল টেবিল কীভাবে কাজ করে তার নীতিটি তারা উপলব্ধি করতে পারেনি। দ্বিতীয় কারণ হল যে তারা তাদের এইচটিএমএল স্ক্রিপ্টটি কীভাবে কাঠামোগতভাবে লিখতে হয় তা শিখেনি এবং তাদের স্ক্রিপ্ট বোঝা কঠিন বা অসম্ভব। আপনি ওয়েবে এটি প্রায়শই দেখতে পান এবং আমি নিশ্চিত যে আমার টেবিলগুলি এই পরিস্থিতিতে কাজ করবে না।
তো চলুন এগিয়ে যাই এবং টিউটোরিয়াল শুরু করি। আমরা নয়টি ঘরের একটি সাধারণ সারণী তৈরি করার দিকে কাজ করব, তিনটি সারির ম্যাট্রিক্সে তিনটি ঘর জুড়ে সাজানো। এই টিউটোরিয়ালে আপনি যে নীতিগুলি শিখবেন তা ভবিষ্যতে আপনি লিখবেন এমন প্রতিটি টেবিলে প্রয়োগ করা উচিত, সে টেবিলটি যত জটিলই হোক না কেন। কোন ব্যতিক্রম নেই..
বেসিক টেবিল ট্যাগ
এইচটিএমএল টেবিলের সাথে যুক্ত অন্যান্য ট্যাগ থাকলেও আমরা তিনটি মৌলিক ট্যাগের উপর মনোযোগ দিতে যাচ্ছি। আপনার সেগুলিকে একটি টেবিলের মৌলিক বিল্ডিং ব্লক হিসাবে বিবেচনা করা উচিত এবং সেগুলি এখানে তালিকাভুক্ত করা হয়েছে৷
- <table></table> টেবিল স্টার্ট ট্যাগ এবং টেবিল শেষ ট্যাগ যা একটি টেবিল তৈরি করে।
- <tr></tr> টেবিল সারি শুরু ট্যাগ এবং টেবিল সারি শেষ ট্যাগ যা একটি টেবিল সারি তৈরি করে।
- <td></td> টেবিল ডেটা স্টার্ট ট্যাগ এবং টেবিল ডেটা শেষ ট্যাগ যা একটি টেবিল ডেটা সেল তৈরি করে।
একটি এক সারি টেবিল
আপনি যদি এই টিউটোরিয়ালের শুরুতে গ্রাফিকটি অধ্যয়ন করেন তবে আপনি মনে রাখবেন যে এটিতে বলা হয়েছে যে মূল নিয়মটি হল যে টেবিলগুলি সারি দ্বারা গঠিত হয় কলাম নয়। এটি মাথায় রেখে আমরা এখন একটি সারি নীচে এবং তিনটি ঘর জুড়ে একটি সাধারণ টেবিল তৈরি করব।
টেবিল …
| Cell 1 | Cell 2 | Cell 3 |
কোড / স্ক্রিপ্ট…
| <table> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> </table> |
আপনার স্ক্রিপ্টগুলিতে লাইন ফিড (ক্যারেজ রিটার্ন) ব্যবহার করতে ভয় পাবেন না। তারা আপনার স্ক্রিপ্টের বিভিন্ন বিভাগকে আলাদা করে এবং এটিকে আরও পাঠযোগ্য এবং বোধগম্য করে তোলে। হোয়াইট স্পেস কিছুই খরচ করে এবং একটি মহান চুক্তি মূল্য. এছাড়াও, স্ক্রিপ্টের কিছু লাইন এই মুহুর্তে একটু ছোট হলে চিন্তিত হবেন না। এটা ঠিক কারণ লম্বা লাইনের চেয়ে সংক্ষিপ্ত কাঠামোবদ্ধ লাইন থাকা অনেক ভালো যেগুলো কাঠামোবদ্ধ নয় এবং বোঝা কঠিন।
টেবিলগুলির সাথে এটি একটি ভাল সাধারণ নিয়ম যে যদি আপনার স্ক্রিপ্টটি ইউএন-গঠিত এবং চিগার-পিগেল্ডি হয় তবে আপনার টেবিলগুলি প্রায় অবশ্যই একই হবে, যেখানে আপনার স্ক্রিপ্টটি যদি কাঠামোগত, ঝরঝরে এবং বোধগম্য হয় তবে আপনার টেবিলগুলি সঠিকভাবে ‘কাজ’ করার সম্ভাবনা রয়েছে। সব ক্ষেত্রে.
একটি তিন সারি টেবিল
যদি এই টিউটোরিয়াল থেকে আপনার শেখা উচিত এমন একটি পাঠ থাকে তা হল সারিগুলিকে আপনার টেবিল স্ক্রিপ্টের মধ্যে আলাদাভাবে ভাগ করা উচিত এবং এটি প্রদর্শন করার জন্য আমরা এখন আরেকটি সাধারণ টেবিল তৈরি করব, এবার তিনটি সারি নিচে এবং তিনটি ঘর জুড়ে।
টেবিল …
| Cell 1 | Cell 2 | Cell 3 |
| Cell 1 | Cell 2 | Cell 3 |
| Cell 1 | Cell 2 | Cell 3 |
কোড / স্ক্রিপ্ট…
| <table> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> </table> |
আপনি যদি উপরের টেবিল স্ক্রিপ্টটি অধ্যয়ন করেন তবে আপনি দেখতে পাবেন যে এটি পাঁচটি স্বতন্ত্র বিভাগে তৈরি করা হয়েছে। এগুলি হল টেবিলের শুরু, তিনটি স্বতন্ত্র টেবিল সারি এবং টেবিল ফিনিস। এটি সফল ক্রস-ব্রাউজার টেবিলগুলি লেখার জন্য যাদু সূত্র যা সমস্ত পরিস্থিতিতে সঠিকভাবে কাজ করে এবং যদি আপনার টেবিল স্ক্রিপ্টগুলি উপরেরটির মতো দেখায় তবে আপনি সফল ক্রস-ব্রাউজার টেবিল তৈরির পথে রয়েছেন৷
