আজকের আলোচ্য বিষয়ঃ টেবিল ট্যাগ(colspan, rowspan, cellpadding, cellspacing,   ) নিয়ে বিস্তারিত আলোচনা। তো চলুন-

কলাম স্পান(colspan):

Column Span কে সংক্ষেপে এবং এইচটিএমএল এর ভাষায় colspan বলে। এর কাজ, ধরুন আপনি একটি টেবিল করেছেন যার ৩টি কলাম আছে (First Column, Second Column, Third Column)। নিচের ইমাজটির মতো…

এখন, আপনি চাইছেন এই তিনটি(First Column, Second Column, Third Column) Row-কে একটি Column তে রুপান্তরিত করবেন। কিন্তু, নিচের Row এবং Column গুলো ঠিক থাকবে। তাহলে কোড লিখি চলুন…

<table width=”600″ border=”1″ align=”center”>

<caption>This is HTML Table</caption>

<tr>

<th colspan=”3″>This is ONE column by using COLSPAN</th>

</tr>

<tr>

<td>This is First Cell </td>

<td>This is Second Cell</td>

<td>This is Third Cell</td>

</tr>

<tr>

<td>This is Fourth Cell</td>

<td>This is Fifth Cell</td>

<td>This is Sixth Cell</td>

</tr>

<tr>

<td>This is Seventh Cell</td>

<td>This is Eighth Cell</td>

<td>This is Ninth Cell</td>

</tr>

<tr>

<td>This is 10th Cell</td>

<td>This is 11th Cell</td>

<td>This is 12th Cell</td>

</tr>

<tr>

<td>This is 13th Cell</td>

<td>This is 14th Cell</td>

<td>This is 15th Cell</td>

</tr>

</table>

তারপর table2.html ফরমেটে সেভ করুন। সবকিছু ঠিক থাকলে নিচের ইমেজের মত প্রদর্শণ করবে…

COLSPAN কোডের বর্ণনাঃ উপরের কোডগুলো লক্ষ করুন…

<tr> <th colspan=”3″>This is ONE column by using COLSPAN</th></tr>

প্রথম রো-টিতে যে তিনটি কলাম ছিল সেটিকে একটি কলামে রুপান্তরিত করতে আমি শুধু colspan=”3″ কোডটি ব্যবহার করেছি। এর অর্থ হলঃ উক্ত রো-তে আমার ৩টি কলাম রয়েছে এবং আমি এই তিনটি কলামকে ১টি কলামে রুপান্তরিত করছি। এখানে বলে রাখা ভাল, আপনার তৈরী করা টেবিলে যদি ৩ এর অধিক কলাম থাকে তবে আপনি সেক্ষেত্রে colspan=”” এর মান আপনার চাহিদা মতো দিতে পারবেন।

রো স্পান(rowspan):

এটি ঠিক কিছুটা কলাম স্পান এর মতই। এর কাজ, ধরুন আপনি একটি টেবিল করেছেন যার ৫টি রো(row) আছে (This is First Cell, This is Forth Cell, This is Seventh Cell, This is Tenth Cell, This is Thirteenth Cell)। নিচের ইমাজটির মতো…

এখন, আপনি চাইছেন এই (This is First Cell, This is Forth Cell, This is Seventh Cell, This is Tenth Cell, This is Thirteenth Cell) ৫টি Rows-কে ১টি Row তে রুপান্তরিত করবেন। কিন্তু, পাশের Rows এবং Columns গুলো ঠিক থাকবে। তাহলে কোড লিখি চলুন…

<table width=”600″ border=”1″ align=”center”>

<caption>This is HTML Table</caption>

<tr>

<th colspan=”3″>This is ONE column by using COLSPAN</th>

</tr>

<tr>

<td rowspan=”5″>This is ONE column by using ROWSPAN</td>

<td>This is Second Cell</td>

<td>This is Third Cell</td>

</tr>

<tr>

<td>This is Fifth Cell</td>

<td>This is Sixth Cell</td>

</tr>

<tr>

<td>This is Eighth Cell</td>

<td>This is Ninth Cell</td>

</tr>

<tr>

<td>This is 11th Cell</td>

<td>This is 12th Cell</td>

</tr>

<tr>

<td>This is 14th Cell</td>

<td>This is 15th Cell</td>

</tr>

</table>

তারপর table3.html ফরমেটে সেভ করুন। সবকিছু ঠিক থাকলে নিচের ইমেজের মত প্রদর্শণ করবে…

ROWSPAN কোডের বর্ণনাঃ উপরের কোডগুলো লক্ষ করুন.

<tr>

<td rowspan=”5″>This is ONE column by using ROWSPAN</td>

<td>This is Second Cell</td>

<td>This is Third Cell</td>

</tr>

প্রথম কলামটিতে যে ৫টি রো ছিল সেটিকে একটি রো-তে রুপান্তরিত করতে আমি শুধু rowspan=”5″ কোডটি ব্যবহার করেছি। এর অর্থ হলঃ উক্ত কলামে আমার ৫টি রো রয়েছে এবং আমি এই ৫টি রো-কে ১টি রো-তে রুপান্তরিত করছি। এখানে বলে রাখা ভাল, আপনার তৈরী করা টেবিলে যদি ৫ এর অধিক রো থাকে তবে আপনি সেক্ষেত্রে rowspan=”” এর মান আপনার চাহিদা মতো দিতে পারবেন।

সেল প্যাডিং(cellpadding) ও সেল স্পেসিং(cellspacing):

সেল প্যাডিং হলঃ আপনার টেবিল সেলের লিখা গুলো থেকে সেলের এর বর্ডারের দূরত্ব। মানে, আপনি যদি চেয়ে থাকেন আপনার প্রতিটি সেল আপনার সেলের ভিতরের লিখা থেকে কমপক্ষে ৫ পিক্সেল করে ডানে, বায়ে, উপরে এবং নিচে ফাঁকা রাখবে সেই ক্ষেত্রে আপনি টেবিল ট্যাগ লিখার শুরুতেই সেল প্যাডিং এর জন্য কোড লিখে দিতে হবে।

সেল স্পেসিং হলঃ আপনার টেবিল সেলের বর্ডারের ঘনত্ব। মানে, আপনি যদি চেয়ে থাকেন আপনার প্রতিটি সেলের বর্ডারের ঘনত্ব কমপক্ষে ৫ পিক্সেল করে ডানে, বায়ে, উপরে এবং নিচে রাখবেন সেই ক্ষেত্রে আপনি টেবিল ট্যাগ লিখার শুরুতেই সেল স্পেসিং এর জন্য কোড লিখে দিতে হবে। বলে রাখা ভাল আপনি যদি টেবিলের জন্য বর্ডার না রাখতে ইচ্ছুক হন(0 রাখেন) তাহলে সেল স্পেসিং এর মান দিলেও কাজ তা প্রদর্শন করবে না।

চলুন সেল প্যাডিং(cellpadding) ও সেল স্পেসিং(cellspacing) এর জন্য কোড লিখিঃ

<table width=”600″ border=”1″ align=”center” cellpadding=”5″ cellspacing=”10″>

<caption>This is HTML Table</caption>

<tr>

<th>First Column</th>

<th>Second Column</th>

<th>Third Column</th>

</tr>

<tr>

<td>This is First Cell </td>

<td>This is Second Cell</td>

<td>This is Third Cell</td>

</tr>

<tr>

<td>This is Fourth Cell</td>

<td>This is Fifth Cell</td>

<td>This is Sixth Cell</td>

</tr>

</table>

তারপর table4.html ফরমেটে সেভ করুন। সবকিছু ঠিক থাকলে নিচের ইমেজের মত প্রদর্শণ করবে…

সেল প্যাডিং(cellpadding) ও সেল স্পেসিং(cellspacing) কোডের বর্ণনাঃ উপরের কোডগুলো লক্ষ করুন…

উপরের লাইনটিতে border=”1″, cellpadding=”5″ এবং cellspacing=”10″ এর অর্থ হচ্ছে,আমার টেবিলটিতে বর্ডার হবে ১ পিক্সেল মান এর সমান, প্রতিটি সেলের চারদিক থেকে লিখার দূরত্ব হবে ৫ পিক্সেল সমান, এবং প্রতিটি সেলের বর্ডারের ঘনত্ব হবে ১০ পিক্সেল সমান।

&nbsp;:

এর কাজ হল আপনি টেবিলের মধ্যে কোন সেল যদি ফাঁকা রাখতে ইচ্ছুক হন তবে উক্ত সেল কি শুধু মাত্র কোড টুকু পেস্ট করে দিন।   এর অর্থ Non Breaking Space।চলুন কোড লিখি…

তারপর table5.html ফরমেটে সেভ করুন। সবকিছু ঠিক থাকলে নিচের ইমেজের মত প্রদর্শণ করবে…

&nbsp: কোডের বর্ণনাঃ উপরের কোডগুলো লক্ষ করুন…

আমি উপরের যে যে সেলের মধ্যে &nbsp; কোডটি ব্যবহার করেছি সেই সেল গুলো দেখুন ফাঁকা(লিখাহীন)। আপনি চাইলে আপনার ইচ্ছা মতো আরো অনেক সেলের মধ্যে এটি প্রয়োজন অনুয়ায়ী লিখতে পারবেন।

আজ এ পর্যন্তই! টেবিল নিয়ে বিস্তারিত আলোচনা এখানেই শেষ।

দেখা হবে সামনে অন্যকোনো বিষয় নিয়ে।

সেই পর্যন্ত সবাই ভাল থাকুন, সুস্থ থাকুন। 🙂