ওয়েব ডিজাইন পরিচিতি এবং HTML5 (Web Design & HTML)
পর্ব ২: HTML টেবিল, Rowspan ও Colspan কোড ভিজ্যুয়ালাইজার
HSC ICT বোর্ড পরীক্ষায় ৪র্থ অধ্যায় থেকে সৃজনশীল প্রশ্নে সবচেয়ে বেশি আসে HTML টেবিল তৈরি করা! টেবিলের প্রতিটি সারি (Row) শুরু হয় <tr> দিয়ে, হেডিং সেল লেখা হয় <th> দিয়ে এবং সাধারণ ডেটা সেল লেখা হয় <td> দিয়ে। পাশাপাশি একাধিক কলাম একত্রিত করতে colspan এবং ওপরে-নিচে একাধিক সারি একত্রিত করতে rowspan ব্যবহৃত হয়।
- <table> ট্যাগে border="1" না দিলে টেবিলের চারপাশের দাগ (Border) দেখা যায় না!
- colspan="2" মানে সেলটি ডানদিকে পাশের ২টি কলামের জায়গা দখল করবে।
- rowspan="2" মানে সেলটি নিচের দিকে ২টি সারির (Row) জায়গা দখল করবে, তাই পরের <tr>-এ ১টি <td> কম লিখতে হবে!
ডানপাশের ল্যাবে কলাম স্প্যান এবং রো স্প্যান বাটন পরিবর্তন করে দেখো কীভাবে নিচের ব্রাউজার টেবিল ও বামের HTML কোড সাথে সাথে পরিবর্তিত হয়!
colspan="3" করলে ১ম সারির একটি সেলই পুরো ৩টি কলাম ঢেকে ফেলে!
যখন কোনো ঘরের মাঝখানের "লম্বালম্বি দেয়াল (Vertical Line)" মুছে ফেলা হয় (অর্থাৎ ঘরটি ডানে-বামে চওড়া হয়), তখন হবে colspan! আর যখন মাঝখানের "আড়াআড়ি মেঝে (Horizontal Line)" মুছে ফেলা হয় (অর্থাৎ ঘরটি ওপরে-নিচে লম্বা হয়), তখন হবে rowspan!
- টেবিলের কোনো ঘরে যদি ছবি থাকে তবে <td><img src="logo.jpg" width="100" height="80"></td> এবং লিংক থাকলে <td><a href="url">Text</a></td> লিখতে হয়।
- কোনো সেলের লেখা ঠিক মাঝখানে আনতে <td align="center"> ব্যবহৃত হয়।
HTML5 টেবিল (rowspan / colspan) ও ট্যাগ ভিজ্যুয়াল ল্যাব
বামপাশে বোর্ড পরীক্ষার HTML কোড এবং ডানপাশে তার ব্রাউজার আউটপুট সরাসরি তুলনা করো
যখন একটি ঘর ডানপাশে ২টি কলামের সমান জায়গা দখল করে, তখন <td colspan="2"> বা <th colspan="2"> লিখতে হয়!
<table border="1" cellspacing="0" cellpadding="8">
<tr>
<th colspan="2">HSC ICT Result</th>
</tr>
<tr>
<td>Roll</td>
<td>GPA</td>
</tr>
<tr>
<td>101</td>
<td>5.00</td>
</tr>
</table>| HSC ICT Result (colspan="2") | |
|---|---|
| Roll | GPA |
| 101 | 5.00 |