ওয়েব ডিজাইন বাংলা ভিডিও টিউটোরিয়াল (From w3 School) এইস.টি.এম.এল-৫, পর্ব-১১

আসসালামু আলাইকুম। কেমন আছেন প্রিয় টেকটিউনসবাসী। আলহামদুলিল্লাহ আমিওি ভালো আছি।

আজকের এই পর্বে আমরা কথা বলবো এইচ.টি.এম.এল-৫ এর টেবিল ডেকোরেশন নিয়ে। HTML-5 এ table এর জন্য ব্যাবহৃত tag হলো <table> এবং তা অবশ্যই </table> tag দিয়ে শেষ করতে হবে। এখানে প্রথমেই বলে রাখি এখানে ডিজাইন এর বিষয়ে বিস্তারিত আলোচনা করা হবে না। সামনে আমার সিরিজ আকারে সি.এস.এস এর যে টিউটেরিয়াল আসছে সেখানে আপনারা বিস্তারিত ডিজাইন এর পাবেন। আমি সকল ক্ষেত্রে সি.এস.এস জন্য এক্সটারনাল স্টাইল সিট ব্যাবহার করে থাকি। এখানেও আমি তাই করেছি। প্রথমে আমি table কেই স্টাইল এর জন্য table কেই tag হিসাবে ব্যাবহার করেছি।

Table {

Width: 100%

}

এখানে মূলত আমি পুরো মনিটরটির সাইজে যেন আমার table দেখায় তার জন্য এই tag টি ব্যাবহার করেছি। এবারে আমি table header ব্যাবহার করেছি। table header  হলো যেকোন টেবিল এর হেডিং এ আমরা যে অংশ দেখে থাকি। একটি সারিতে আপনি কতগুলো হেডিং ব্যাবহার করবেন তা একবারেই নির্ধারন করে দিতে হবে। অর্থ্যাৎ ধরুন আমাদের ৩ সারির একটি টেবিল তৈরি করবো। সেক্ষেত্রে আমাদেরকে প্রথমে heading নির্ধারন  করে দিতে হবে। সেক্ষেত্রে কোড হলো

<table>

<tr>

<th>Your First table header name</th>

<th>Your Second table header name</th>

<th>Your Third table header name</th>

</tr>

</table>

কোডটি আপনার localhost এ রান করে দেখুন। টেবিল এর header অংশ তৈরি হয়েছে। এবারে আমরা টেবিল এর ভেতরের অংশ অর্থ্যাৎ আপনি টেবিল এর ভিতরে যে content দিতে চান তা আমরা লিখবো। তার জন্য কোড হলো

<table>

<tr>

<th>Your First table header name</th>

<th>Your Second table header name</th>

<th>Your Third table header name</th>

</tr>

<tr>

<td>Your first row first content</td>

<td>Your second row content</td>

<td>Your third row content</td>

</tr>

</table>

এই কোডটিকে যখন আপনি রান করাবেন তখন দেখবেন যে সারি এর নির্ধারিত লোকেশান ঠিক নাই। তার জন্য আমাদেরকে CSS এ গিয়ে td এবং tr কেও 100% করে দিতে হবে।

আপনাদের যদি কোন অংশ বুঝতে কোন ধরনের সম্স্যা হয়ে থাকে তাহলে নিচের ভিডিওটি দেখে নিন। বিস্তারিত আলোচনা করা হয়েছে এখানে।

আজ এপর্যন্তই। সবাই ভালো থাকবেন। কোন প্রশ্ন থাকলে আমাকে কমেন্ট করে জানাবেন।