শুরুতে নিচের ছবিতে থাকা টেবিলটির গঠনসহ দেখে নিই। তাহলে সামনের আলোচনা বুঝতে সুবিধা হবে।
চলুন, এবার উপরের ছবিতে থাকা এমন একটি টেবিল HTML দিয়ে কিভাবে তৈরি করা যায় তা জানার চেষ্টা করি।
HTML Table তৈরির কিছু গুরুত্বপূর্ণ ট্যাগ সম্পর্কে জানি।
<table>
: HTML এ টেবিল তৈরি করতে হলে এই ট্যাগটা ব্যবহার করতে হবে। যেটাকে Table এর মূল container বলা যায়।<tr>
(table row): Table এর row define করার জন্য<tr>
ট্যাগ ব্যবহার করা হয়।<td>
(table data): row এর মধ্যে থাকা টেবিলের প্রতিটা কলামের cell কে একেকটা table data হিসেবে বিবেচনা করা হয়। উপরের টেবিলটাতে প্রতিটা row তে ৩টি করে table data বা<td>
রয়েছে। এই ট্যাগটি<tr>
ট্যাগের মধ্যে ব্যবহার করতে হবে।<th>
(table header): টেবিলের কলামগুলোর heading define করার জন্য এটি ব্যবহার হয়। By default<th>
এর কন্টেন্টগুলো center align এবং bold থাকে।
আপাতত, এই ৪টা ট্যাগ বা এলিমেন্ট দিয়েই আমরা উপরের টেবিলটা তৈরি করতে পারি।
<table border="1" cellspacing="0">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
উপরের কোডে <table>
tag এর মধ্যে অতিরিক্ত দুইটা attributes ব্যবহার করেছি।
border="1"
: টেবিলের মধ্যে বর্ডার দেয়ার জন্য এই attribute টা ব্যবহার করা হয়। value1
এর মানে বর্ডারগুলো1px
করে চওড়া হবে।cellspacing="1"
: By Default টেবিলের cell গুলোর মাঝে2px
করে space থাকে। যাতে এই space না থাকে সেজন্য এটি ব্যবহার করা।
বি.দ্র.: এগুলো ছাড়াও আরো অনেক attribute রয়েছে যেমন height
, width
ইত্যাদি। তবে, HTML5 এ এই attribute গুলো পরিত্যক্ত বা ডিপ্রিকেটেট। কারণ, এগুলো পরবর্তী ভার্সনগুলোতে কাজ নাও করতে পারে। তাছাড়া এই attribute গুলোর কাজ আমরা খুব সহজে ও আকর্ষণীয়ভাবে CSS দিয়েই করতে পারি। তাই, কাজ করার সময় আমরা এগুলো ব্যবহার করবো না।
colspan
এবং rowspan
এই attribute গুলো টেবিলের cell কে একাধিক column বা row ধরে প্রসারিত করতে সাহায্য করে।
colspan
: cell কে একাধিক column জুড়ে প্রসারিত করে।colspan="2"
এর মানে হচ্ছে, cell টি তার পরবর্তী অর্থাৎ ডানদিকের কলামের আরো একটি cell সহ মোট দুইটা cell এর জায়গা জুড়ে থাকবে।rowspan
: cell কে একাধিক row জুড়ে প্রসারিত করে।rowspan="2"
এর মানে হচ্ছে, cell টি তার পরের row অর্থাৎ নিচের row থেকে একটি cell সহ মোট ২টি cell এর জায়গা দখল করে নিবে।
চলুন, কোড এবং আউটপুট দেখি।
<table border="1" cellspacing="0">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td colspan="2">Priya</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td rowspan="2">32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
</tr>
</table>
আউটপুট:
সাজানো-গুছানো!
এছাড়াও HTML টেবিলকে আরো সুন্দর করে গুছিয়ে লিখার জন্য header, body এবং footer এই তিনটি ভাগে ভাগ করতে পারি। তার জন্য শিখতে হবে আরো তিনটি ট্যাগ।
<thead>
: টেবিলের header অংশের জন্য এটি ব্যবহৃত হয়।<tbody>
: টেবিলের মূল কন্টেন্ট বা ডাটাগুলো এই অংশে থাকে।<tfoot>
: footer অংশটা থাকে এই অংশে।
এই ট্যাগগুলো নিয়ে বিস্তারিত বলার প্রয়োজন নেই। এতক্ষণ যা জানলাম সবগুলো দিয়ে একটা example দেখি। আশা করি, HTML Table সহজ হয়ে যাবে ইনশাআল্লাহ।
<table>
<thead>
<tr>
<th colspan="4">Invoice #12345</th>
</tr>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Laptop</td>
<td>1</td>
<td>$1000</td>
<td>$1000</td>
</tr>
<tr>
<td>Extended Warranty</td>
<td>$100</td>
<td>$100</td>
</tr>
<tr>
<td>Mouse</td>
<td>2</td>
<td>$25</td>
<td>$50</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Grand Total</td>
<td>$1150</td>
</tr>
</tfoot>
</table>
এটার আউটপুট হবে এমন: