Create a Html table
আজ আমরা শিখব এইচটিএমএল দিয়ে টেবিল তৈরি। আমরা এইচটিএমএল এর মাধ্যমে টেবিল তৈরি করতে পারি। টেবিল তৈরি করার জন্য আমাদেরকে <tabil></tabil> ট্যাগ ব্যবহার করতে হবে। টেবিলগুলো আমরা তৈরি করব রো বাই রো। টেবিলের মধ্যে কতগুলো রো থাকবে সেটা আমরা বলে দেব এবং এর মাঝে কতগুলো সেল থাকবে তা আমরা ডিক্লেয়ার করে দেবো। <th></th> tabil head tag দিয়ে আমরা টেবিলের head তৈরি করব। আমরা একটা টেবিলে তিনটি রো দেব। টেবিলে রো দেয়ার ট্যাগ এর নাম হচ্ছে <tr> </tr> tag। প্রত্যেকটি রো এর তিনটি করে সেল থাকবে। টেবিলের সেল তৈরি করার ট্যাগের নাম হচ্ছে <td></td>। তাহলে চলো শুরু করা যাক।
<html>
<head>
<title> Try It Yourself </title>
</head>
<body>
<table>
<thead>
<tr>
<th> Bangladesh </th>
<th> usa </th>
. <th> india </th>
</tr>
</thead>
<tr>
<td> Dhaka</td>
<td> florida </td>
<td> kolkata </th>
</tr>
<tr>
<td> commilla </td>
<td> arizona </td>
<td>Delhi </td>
</tr>
</table>
</body>
</html>
Output
Bangladesh usa india
Dhaka florida kolkata
comilla arizona Delhi
table-border
টেবিলের বর্ডার তৈরি করার জন্য আমাদেরকে টেবিল ট্যাগ এর ভিতর একটি border এট্রিবিউট দিতে হবে.। <tabil bordsr=" 2">। border attributed 2 লিখি তাহলে 2পিক্সেল এর একটি বর্ডার তৈরি হবে।
<html>
<head>
<title> Try It Yourself </title>
</head>
<body>
<table border="2">
<thead>
<tr>
<th> Bangladesh </th>
<th> usa </th>
. <th> india </th>
</tr>
</thead>
<tr>
<td> Dhaka</td>
<td> florida </td>
<td> kolkata </th>
</tr>
<tr>
<td> comilla </td>
<td> arizona </td>
<td>Delhi </td>
</tr>
</table>
</body>
</html>
output
Table collapsed border
আমরা সিএসএস ব্যবহার table এ collapsed border তৈরি করতে পারি। collapsed border হচ্ছে একই টেবিলে বর্ডার ভিতর আরো একটি বর্ডার তৈরি করা।
<!DOCTYPE html>
<html>
<head>
<title> Try It Yourself </title>
<style type="text/css">
table, th, td {
border-collapse: collapse;
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th> Bangladesh </th>
<th> usa </th>
<th> india</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dhaka </td>
<td> florida </td>
<td rowspan="2">kolkata </td>
</tr>
<tr>
<td> commila </td>
<td> arizona</td>
</tr>
</tbody>
</table>
</body>
</html>
Output
মন্তব্যসমূহ
একটি মন্তব্য পোস্ট করুন