HTML এ Table কি?
ওয়েব পেজে বিভিন্ন ধরণের তথ্য উপাত্ত পরিসংখ্যান রিপোর্ট আকারে উপস্থাপন করার একটি অন্যতম পন্থা হচ্ছে টেবিল ব্যবহার করা। টেবিল তৈরির জন্য টেবিল ট্যাগ <table> ব্যবহার করা হয়। একটি table কত গুলো row বা সারি তে বিভক্ত, সেটি উপস্থাপন করার জন্য <tr> tag ব্যবহার করা হয়। tr বলতে “table row” বুঝায়। আবার প্রত্যকটা সারিতে কত গুলো data cells এ ভিবক্ত, তা বুঝাতে <td> tag ব্যবহার করা হয়। td বলতে “table data,” বুঝায়। data cell এর কাজ হচ্ছে content কে সংরক্ষন করা। একটি <td> tag text, links, images, lists, forms, other tables ইত্যাদি সংরক্ষন করে।
HTML এ Table তৈরী করতে হলে কি জানা দরকার ?
Example of simple table
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="300" height="100">
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
<tr>
<td>Masuma Akter</td>
<td>50</td>
<td>Dhaka</td>
</tr>
<tr>
<td>Rashed Khan</td>
<td>55</td>
<td>Khulna</td>
</tr>
</table>
</body>
</html>
HTML Table এ cellpadding এবং cellspacing
কি?
HTML Table এ সেল এর বর্ডার থেকে তার content এর দূরত্ব কতটুকু হবে তা নির্ধারণের জন্য cellpadding ব্যবহৃত হয়। আর এক সেল থেকে অন্য সেল কতটুকু দুরুত্বে বসবে তা নির্ধারণের জন্য cellspacing ব্যবহৃত হয়।
Cellpadding সহ HTML Table
<!DOCTYPE html>
<html>
<head>
<title>HTML Table with Cellpadding</title>
</head>
<body>
<table border="1" width="300" height="100" cellpadding="10">
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
<tr>
<td>Masuma Akter</td>
<td>50</td>
<td>Dhaka</td>
</tr>
<tr>
<td>Rashed Khan</td>
<td>55</td>
<td>Khulna</td>
</tr>
</table>
</body>
</html>
Cellsapcing সহ HTML Table
<!DOCTYPE html>
<html>
<head>
<title>HTML Table with cellspacing</title>
</head>
<body>
<table border="1" width="300" height="100" cellspacing="10">
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
<tr>
<td>Masuma Akter</td>
<td>50</td>
<td>Dhaka</td>
</tr>
<tr>
<td>Rashed Khan</td>
<td>55</td>
<td>Khulna</td>
</tr>
</table>
</body>
</html>
HTML Table এ rowspan এবং colspan
এর কাজ কি?
HTML Table এ একাধিক row কে একটা single cell এ রূপান্তর বা merge
করার জন্য rowspan
এবং একাধিক cell
কে একটা single
cell এ রূপান্তর বা merge করার জন্য colspan attribute ব্যবহৃত হয়
Example of colspan
<!DOCTYPE html>
<html>
<head>
<title>HTML Table with colspan</title>
</head>
<body>
<table border="1" width="300" height="100" border="1">
<tr>
<th colspan="3">Student Information</th>
</tr>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
<tr>
<td>Masuma Akter</td>
<td>50</td>
<td>Dhaka</td>
</tr>
<tr>
<td>Rashed Khan</td>
<td>55</td>
<td>Khulna</td>
</tr>
</table>
</body>
</html>
Example of rowspan
<!DOCTYPE html>
<html>
<head>
<title>HTML Table with rowspan</title>
</head>
<body>
<table border="1" width="300" height="100" border="1">
<tr>
<th colspan="3">Student Information</th>
</tr>
<tr>
<th rowspan="4">Name</th>
</tr>
<tr>
<td>Masuma Akter</td>
</tr>
<tr>
<td>Rashed Khan</td>
</tr>
<tr>
<td>Sojib Khan</td>
</tr>
</table>
</body>
</html>
html table caption
html table এ caption যুক্ত করতে হলে আপনাকে <caption></caption> টি ব্যবহার করতে হবে।
Example:
<table border="1" width="300" height="100" border="1">
<caption>HTML Table Example with Caption</caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
<tr>
<td>Masuma Akter</td>
<td>50</td>
<td>Dhaka</td>
</tr>
<tr>
<td>Rashed Khan</td>
<td>55</td>
<td>Khulna</td>
</tr>
</table>
html table এ কিভাবে header, body এবং footer
এরিয়া নির্ধারণ করবেন?
html table এ header এরিয়া নির্ধারণ করার জন্য <thead></thead> tag , body এরিয়া নির্ধারণ করার জন্য <tbody></tbody> tag এবং footer এরিয়া এর জন্য <tfoot></tfoot> ব্যবহৃত হয়।
Example of table
<!DOCTYPE html>
<html>
<head>
<title>HTML Table with header,body and footer</title>
</head>
<body>
<table border="1" width="300" height="100" border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>Masuma Akter</td>
<td>50</td>
<td>Dhaka</td>
</tr>
<tfoot>
<tr>
<td colspan="3"><center>This is Footer</center></td>
</tr>
</tfoot>
<tr>
<td>Rashed Khan</td>
<td>55</td>
<td>Khulna</td>
</tr>
</tbody>
</table>
</body>
</html>
0 Comments