স্কুল বা অফিসের জন্য প্রফেশনাল লেভেলের A4 সাইজের প্রিন্টেবল ডকুমেন্ট (যেমন: Routine, Marksheet) ওয়েবপেজে ডিজাইন করার পদ্ধতি ধাপে ধাপে নিচে বিস্তারিত আলোচনা করা হলো।
প্রথমে <table> ট্যাগ নিয়ে কাজ শুরু করুন। টেবিলের উপরের হেডারের (যেমন: Subject, Full Marks) জন্য <thead> এবং মূল ডেটার জন্য <tbody> ব্যবহার করুন। প্রতিটি সারির জন্য <tr> (Table Row) এবং সেলের জন্য <th> (Table Head) বা <td> (Table Data) ট্যাগ লিখুন। টেবিলটি পুরো পেজ জুড়ে রাখতে CSS-এ width: 100%; ব্যবহার করুন।
মার্কশিটকে প্রফেশনাল লুক দিতে CSS এ border-collapse: collapse; অবশ্যই ব্যবহার করুন, যাতে ডাবল বর্ডার না আসে। এরপর th এবং td এর জন্য বর্ডার border: 1px solid #333; এবং padding: 10px; দিন। হেডারগুলোকে হাইলাইট করতে th এর ব্যাকগ্রাউন্ড কালার হালকা ধূসর দিতে পারেন এবং text-align: center; করে লেখাকে মাঝে রাখতে পারেন।
রুটিনে পরপর দুটি ক্লাস একসাথে বোঝাতে বা মার্কশিটে মোট নম্বরের ঘরগুলো জুড়তে colspan (কলাম জোড়ার জন্য) এবং rowspan (সারি জোড়ার জন্য) অ্যাট্রিবিউট ব্যবহার করা হয়। যেমন- রুটিনে টিফিনের বিরতি (Tiffin Break) বোঝাতে একটি সেলে rowspan="4" বা মার্কশিটে গ্র্যান্ড টোটাল (Grand Total) সেলের জন্য colspan="3" যুক্ত করতে পারেন।
প্রিন্ট করার সুবিধার জন্য একটি কন্টেইনার <div> নিয়ে তার প্রস্থ 210mm এবং উচ্চতা 297mm সেট করুন। এরপর CSS-এ @media print রুল ব্যবহার করে প্রিন্ট করার সময় ওয়েবসাইটের ব্যাকগ্রাউন্ড কালার, মেনুবার এবং অন্যান্য বাটন হাইড (display: none;) করে দিন, যাতে শুধুমাত্র সাদা কাগজের উপর পরিষ্কার টেবিলটি প্রিন্ট হয়।
(সহায়তা পরিষেবা শুধুমাত্র SHM Golden Member-দের জন্য উপলব্ধ)
সময়: সন্ধ্যা ৭:৩০ থেকে রাত ৯:৩০ পর্যন্ত।